Class HyloAccessibilityDropdown

Creates a hylo-dropdown component with a default hylo-dropdown-header included. Unlike a plain hylo-dropdown component it adds accessibility features out of the box.

Place hylo-dropdown-item components inside this component. You have to give the hylo-dropdown-item components the class "hylo-accessibility-list-child" if they are not a direct child of this component to be picked up as part of the opptions list of the dropdown. Also the hylo-dropdown-item component itself or one of its children need to be tabable (tabindex >= 0) as well.

Slots:

  • "header": inside the default hylo-dropdown-header
  • default: for hylo-dropdown-item components

Properties

accessibilityFocus announcementClosed announcementOpened arrowDownKey checkable hiddenTextAfter hiddenTextBefore level noHeader noValueHeader permanentHeader srOnlyLabel tabAfter tabBefore type

Methods

close getValue open setValue toggle triggerPrimaryAction update

Events

hyloClosing hyloOpening hyloValueChanged hyloValueStayed

Properties

accessibilityFocus

accessibilityFocus: boolean

Adds a hylo-accessibility-focus component to the hylo-dropdown-header component.

announcementClosed

announcementClosed: string = 'Dropdown geschlossen'

Text to be announcent in a screen reader when the dropdown gets closed.

announcementOpened

announcementOpened: string = 'Dropdown geöffnet'

Text to be announced in a screen reader when the dropdown gets opened.

arrowDownKey

arrowDownKey: boolean

If set, the dropdown opens when the header has the focus and the arrow down key is pressed.

By default, only the space and enter key opens the dropdown.

checkable

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.

hiddenTextAfter

hiddenTextAfter: string

Text only for screen readers which gets put after the regular header text.

hiddenTextBefore

hiddenTextBefore: string

Text only for screen readers which gets put in front of the regular header text.

level

level: number

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

noHeader

noHeader: boolean

If set, no default hylo-dropdown-header component is included.

noValueHeader

noValueHeader: string

If set and no value is set/selected, this phrase is shown in the header. Otherwise the first item will get selected.

Can also be used to set a "none" value of a dropdown untill an item gets selected, even if the dropdown does not have a header.

permanentHeader

permanentHeader: boolean

If set, the content of the header does not change. By default the content of the selected hylo-dropdown-item component is shown.

srOnlyLabel

srOnlyLabel: boolean

Adds a hylo-sr-only component to the hylo-dropdown-header component.

Might help if the screen reader does not read out the content of the header component.

tabAfter

tabAfter: boolean

If set and you keyboard tab forward out of the dropdown menu, the default dropdown header gets the focus instead of the next element in the focus order. The dropdown closes anyways.

tabBefore

tabBefore: boolean

If set and you keyboard tab back from the dropdown menu to the default dropdown header, the dropdown closes.

type

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

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"
  • tree -> role="treeitem"
  • subtree -> role="treeitem"
  • group -> role="listitem"

Methods

close

  • close(): Promise<void>

  • Closes the dropdown.

    Returns Promise<void>

getValue

  • getValue(): Promise<string>

  • Returns the current value of the dropdown.

    Returns Promise<string>

open

  • open(): Promise<void>

  • Opens the dropdown.

    Returns Promise<void>

setValue

  • setValue(value): Promise<void>

  • Sets the value of the dropdown.

    Parameters

    • value: string

    Returns Promise<void>

toggle

  • toggle(): Promise<void>

  • Toggles the dropdown between being open or closed.

    Returns Promise<void>

triggerPrimaryAction

  • triggerPrimaryAction(): Promise<void>

  • Triggers the primary action of the default header.

    Returns Promise<void>

update

  • update(item_selection?): Promise<void>

  • Updates the component. Needs to be called when subcomponents where added or removed (e.g. "hylo-dropdown-item").

    Parameters

    • Optional item_selection: boolean

      if set, a possibly selected item will set/define the value of the dropdown (otherwise the value will select an item)

    Returns Promise<void>

Events

hyloClosing

hyloClosing: EventEmitter<any>

Fires when the dropdown gets closed.

hyloOpening

hyloOpening: EventEmitter<any>

Fires when the dropdown gets opened.

hyloValueChanged

hyloValueChanged: EventEmitter<string>

Fires when the value changed. Emits the new value.

hyloValueStayed

hyloValueStayed: EventEmitter<string>

Fires when an already selected item was clicked. Emits the value.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc