# Class AriaCommandHandler

GoJS® Diagramming Components
version 3.0.13
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

- CommandHandler
  - AriaCommandHandler

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

_arrowKeySelectLinks
_getPreviousSiblingNodes
callAria
callFamilyTreeNodes
callLinkedNodes
callSurroundingNodes
doKeyDown
getPartText
setMode

### Properties

history
index
liveRegion
mode

#####
Inherited Index

### 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

### _arrowKeySelectLinks

- _arrowKeySelectLinks(): void

- For links layouts. Checks for closest node in the direction of the hit arrow key and selects the node Adds the node to the node movement history If there is no node is checked direction does an aria call letting the user know

  #### Returns void

### _getPreviousSiblingNodes

- _getPreviousSiblingNodes(node: Node): Node[]

- For tree layouts. Checks for and returns the previous sibling nodes of the currently selected node. All nodes previous of the currently selected node will be in the array and first element is the previous node.

  #### Parameters

  - ##### node: Node

  #### Returns Node[]

  returns null if there is no previous sibling node

### 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

### `Override` doKeyDown

- 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

  - ##### part: Part

  #### Returns string

### setMode

- setMode(mode: string): void

- Allows for changing of the mode after initialization.

  #### Parameters

  - ##### mode: string

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

  #### Returns void

## Properties

### history
: Node[]

### index
: number

### liveRegion
: HTMLDivElement

### mode
: string

Copyright © 1998-2024 by Northwoods Software Corporation.