Groups the direct children into a list which will be announced by screen readers as such. The necessary aria attributes will be added to the direct children if the type is a "list" or "group". Otherwise the closest tabbable children (including the direct children) receive the aria attributes.

Also adds the possibility to change the focus of the children by pressing key "Up" and "Down".

Does not create a list in the sense of markup like ul, ol or display: list-item;. The created list is build for accessibility purpose. To get a visual representation of a list, additional list styles would need to be added.

Does not count HyloFocusRedirect components but keeps them reachable through the "Up" and "Down" keys. That makes it possible to set jump marks at the beginning and/or ending of the list.

As alternative to group all direct children you can give the class 'hylo-accessibility-list-child' to the elements to be grouped. Keep in mind that for lists of type "list" and "group" only direct children should be grouped.

Fires the event "hyloAccessibilityListEscape" when the "Esc" key is pressed while having the focus inside the list.

Properties

checkHidden: boolean

Excludes list children whose display style or one of its ancestors is 'none'.

checkable: "checkbox" | "radio"

If the type is "menu" you can choose for the list items role between "menuitemcheckbox", "menuitemradio" or simple "menuitem" if checkable is not set.

If checkable is set, you can mark the list item as checked with aria-checked="true". The tabbable child needs to get the aria-checked attribute.

If your list item is a hylo-dropdown-item component, the item is taking care of aria-checked for you. If your list item is a hylo-accessibility-button component, aria-checked is set by the button status.

disabled: boolean = false

Disables the list functionality. Does not disable the list children.

escGoto: string | HTMLElement

A css query selector which defines an element to which the focus will shift before the hyloAccessibilityListEscape event gets fired. If the css query results in multiple elements, the first which is not hidden (display != "none" and visibility != "hidden") is used.

As alternative you can provide a HTMLElement as well.

focusDelay: number = null

The delay in milliseconds the goto element gets the focus.

level: number

A level value which will be set as "aria-level".

size: number

The size of the list. Can be used to set a list size greater than the amount of list items currently present in the DOM. By default the size is calculated automatically by counting the list items present in the DOM.

Does not work with NVDA and the list type "list" or "group".

triggerPrimaryAction: boolean

Should the primary action of the escGoto element be triggered? Calls "triggerPrimaryAction()" if the goto element has a function called "triggerPrimaryAction" otherwise dispatches a "click" mouse event.

Using an explicit triggerPrimaryAction function on the goto element can solve some screen reader mode issues because of the asynchronous nature of such function.

The "click" mouse event will contain the properties event.screenX = 0, event.screenY = 0, event.clientX = 0, event.clientY = 0 and event.detail = 0 which can be used to separate the event from a regular click event.

type: "menu" | "list" | "tree" | "subtree" | "group" = 'list'

The type of list. Will be translated into a "role" value.

  • list -> role="list"
  • menu -> role="menu"
  • tree -> role="tree"
  • subtree -> role="group"
  • group -> role="group"

Also defines the "role" values of the list items.

  • list -> role="listitem"
  • menu -> role="menuitem|menuitemcheckbox|menuitemradio"
  • tree -> role="treeitem"
  • subtree -> role="treeitem"
  • group -> role="listitem"

If no children were found, no role will be set.

Methods

  • Updates the values of the child elements. Needs to be called if the child elements change. Is called automatically on initialization.

    Returns Promise<void>

  • Checks if the amount of the direct children changed and/or one of the direct children itself. If so, it calls for an update.

    Returns Promise<void>

Events

hyloAccessibilityListEscape: EventEmitter<any>

Fires when the "Esc" key is pressed while having the focus inside the list.

Generated using TypeDoc