Class AriaCommandHandler

GoJS® Diagramming Components
version 3.0.14
by Northwoods Software®

This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

Hierarchy

This custom CommandHandler is an example of how screen reader accessibility can be added to diagrams with an aria-live DIV.

This CommandHandler adds more key commands for a user:

  • Arrow keys: Change selection to a new node, if possible, based on direction/tree realationship/linked nodes. This is added to an internal navigation history.
  • b: Give a description of which nodes are adjacent/connected to the currently selected node
  • x: Go backwards in the navigation history
  • c: Go forwards in the navigation history

This custom CommandHandler is meant as a starting point to create a more individualized CommandHandler for your unique use case. Certain data and attributes of nodes that are different between diagrams may be important to the accessibility interpretation. When describing a Part, this example calls getPartText, which uses the Part.text if it is specified, otherwise the Part.key. You'll want to modify this to suit your needs.

If you want to experiment with this extension, try the Accessibility sample.

Index

Constructors

constructor

Methods

callAria callFamilyTreeNodes callLinkedNodes callSurroundingNodes doKeyDown getPartText

Properties

history index liveRegion mode

Accessors

CommandHandler.archetypeGroupData CommandHandler.copiesConnectedLinks CommandHandler.copiesGroupKey CommandHandler.copiesParentKey CommandHandler.copiesTree CommandHandler.deletesConnectedLinks CommandHandler.deletesTree CommandHandler.diagram CommandHandler.isZoomToFitRestoreEnabled CommandHandler.memberValidation CommandHandler.zoomFactor

Methods

CommandHandler.addTopLevelParts CommandHandler.canCollapseSubGraph CommandHandler.canCollapseTree CommandHandler.canCopySelection CommandHandler.canCutSelection CommandHandler.canDecreaseZoom CommandHandler.canDeleteSelection CommandHandler.canEditTextBlock CommandHandler.canExpandSubGraph CommandHandler.canExpandTree CommandHandler.canGroupSelection CommandHandler.canIncreaseZoom CommandHandler.canPasteSelection CommandHandler.canRedo CommandHandler.canResetZoom CommandHandler.canScrollToPart CommandHandler.canSelectAll CommandHandler.canShowContextMenu CommandHandler.canStopCommand CommandHandler.canUndo CommandHandler.canUngroupSelection CommandHandler.canZoomToFit CommandHandler.collapseSubGraph CommandHandler.collapseTree CommandHandler.computeEffectiveCollection CommandHandler.copySelection CommandHandler.copyToClipboard CommandHandler.cutSelection CommandHandler.decreaseZoom CommandHandler.deleteSelection CommandHandler.doKeyUp CommandHandler.editTextBlock CommandHandler.expandSubGraph CommandHandler.expandTree CommandHandler.groupSelection CommandHandler.increaseZoom CommandHandler.isValidMember CommandHandler.pasteFromClipboard CommandHandler.pasteSelection CommandHandler.redo CommandHandler.resetZoom CommandHandler.scrollToPart CommandHandler.selectAll CommandHandler.showContextMenu CommandHandler.stopCommand CommandHandler.undo CommandHandler.ungroupSelection CommandHandler.zoomToFit

Constructors

constructor

  • new AriaCommandHandler(mode?: string, init?: Partial<AriaCommandHandler>): AriaCommandHandler

  • Creates and sets the Aria live region. Defines variables for node selection history and runs setup method.

    Parameters

    • mode: string = 'default'

      the mode of the diagram, 'default', 'tree', or 'links'

      Default mode: Arrow keys change selection to a new node, if possible, based on direction. Tree mode: Arrow keys change selection to a new node, if possible, based on tree relationships. Links mode: Arrow keys change selection to a new node, if possible, based on linked nodes.

    • Optional init: Partial<AriaCommandHandler>

    Returns AriaCommandHandler

Methods

callAria

  • callAria(message: string): void

  • Clears the text on the aria region and sets it to the passed message.

    Parameters

    • message: string

      the string to read

    Returns void

callFamilyTreeNodes

  • callFamilyTreeNodes(): void

  • For tree layouts. Checks for parent, sibling, and child nodes and build a message to be called based on if there is and which nodes are around the currently selected one

    Returns void

callLinkedNodes

  • callLinkedNodes(): void

  • For links layouts. Checks for linked nodes and build a message to be called based on if there is and which nodes are around the currently selected one

    Returns void

callSurroundingNodes

  • callSurroundingNodes(): void

  • Checks for a node in each direction and build a message to be called based on if there is and which nodes are around the currently selected one

    Returns void

OverridedoKeyDown

  • doKeyDown(): void

  • This implements custom behaviors for keyboard events. This effects behavior when user types arrow keys, 'b', 'x', and 'c'.

    Returns void

getPartText

  • getPartText(part: Part): string

  • Given a Part, return the text that the aria label should read By default this uses Part.text, unless it is empty, then it uses Part.key This can be overridden to return arbitrary text based on Part data, etc.

    Parameters

    Returns string

Properties

history
: Node[]

index
: number

liveRegion
: HTMLDivElement

mode
: string

On This Page

Theme

Copyright © 1998-2024 by Northwoods Software Corporation.