Class HyloAccessibilityButton

Handles the accessibility functions of a button element. It's not a button in itself but a button/link wrapper. The component takes over the role of a button, the tab index and handles the screen reader properties. It sets the tabindex of each child element to -1.

Wrap your button element with a hylo-accessibility-button component to give it accessibility functionality. It doesn't has to be a button or link element but any element or nested elements which function as a button.

The hylo-accessibility-button component dispatches a "click" mouse event on each child element with the class "primary-action" when the primary action is triggered. If no such child element is found it goes down the child tree by selecting always the first child of each tree level until the last child and dispatches the "click" mouse event on this one. Make sure the "primary-action" element is a child element of your actual button/link so that when the event bubbles up, it reaches your button/link.

Recognizes only "aria-label", not "aria-labelledby" if set! If not set, it creates an aria-label attribute with the textContent of the component as value.

You can not add or remove an aria-label after you initially created the component. The component will either use what is set in the aria-label attribute if you used an aria-label initially or use the textContent if you didn't.

You can place the text of the button in "span" elements with the classes "hylo-content", "hylo-content-active", "hylo-content-hover", "hylo-content-focus", "hylo-content-on", "hylo-content-off", "hylo-content-mixed" or "hylo-content-disabled" to provide different text for different states of the button. If you use state depending text, it is probably preferable to set the aria-label manually since otherwise all text will be set as label.

You can force the state styles of the component by applying the classes "hylo-focus", "hylo-hover", "hylo-active", "hylo-disabled" respectively.

Make sure click and keydown events on the wrapped button are not canceled and reach this component.

Properties

cancelClickEvent disabled goto gotoDelay inactive keepAriaLabel keepChildren preventFocus role srOnlyLabel toggle triple

Methods

getStatus setAriaLabel setStatus triggerPrimaryAction update updateLabel

Events

hyloAccessibilityButtonClicked hyloAccessibilityButtonMiddle hyloAccessibilityButtonOff hyloAccessibilityButtonOn hyloHasFocus hyloHasKeyactive hyloHasMouseover hyloInitialized

Properties

cancelClickEvent

cancelClickEvent: boolean

Stops the propergation of the click event.

disabled

disabled: boolean

Same as "inactive" and "preventFocus" plus disables the component specific events.

Add aria-hidden="false" to have not set aria-hidden="true".

goto

goto: string

A css query selector which defines an element to which the focus will shift when the status becomes either "on", "mixed-on" or "opened". Or, in case of a simple button, when the button gets clicked. If the css query results in multiple elements, the first which is not hidden (display != "none" and visibility != "hidden") is used.

gotoDelay

gotoDelay: number = 10

The delay in millisecond when the focus will shift to the goto element.

inactive

inactive: boolean

If the component is turned inactive, no primary event is delivered to the child elements. The component specific events are still fired and the various states of aria-pressed or aria-expanded are still changed accordingly.

keepAriaLabel

keepAriaLabel: boolean

On default, the component is managing the aria-label content and might change it. This property disables the default behavior.

keepChildren

keepChildren: boolean

On default, the component is disabling all interaction with its children and is hiding them from a screen reader. This property disables the default behavior.

preventFocus

preventFocus: boolean

Prevents the component of gaining focus and disables key interaction like gaining focus through the "tab" key. Hides the component from screen readers.

Add aria-hidden="false" to have not set aria-hidden="true".

role

role: "button" | "link" | "menuitem" | "menuitemradio" | "menuitemcheckbox" = 'button'

The role of the button. 'menuitem' can not be toggled.

srOnlyLabel

srOnlyLabel: boolean

Adds a hylo-sr-only component to the hylo-accessibility-button component. The content will be the same as in the aria-label. If no aria-label is set, it will be set to the textContent of the component.

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

toggle

toggle: "off" | "on" | "mixed-on" | "mixed-off" | "opened" | "closed"

Defines the button as a switch where the states can be "on", "off", "mixed-on", "mixed-off", "opened", "closed". Is translated into the corresponding values of aria-pressed, aria-expanded and aria-haspopup.

  • "on", "off" - aria-pressed="true|false" or aria-checked="true|false" when type="menuitemradio|menuitemcheckbox"
  • "mixed-on", "mixed-off" - aria-pressed="mixed|false"
  • "opened", "closed" - aria-expanded="true|false", aria-haspopup="true"

The value is not changed when the status of the button changes through interaction of the user (e.g. click). Use getStatus() to retrieve the current status.

triple

triple: "true" | "middle"

Changes the "on", "off" and "mixed-on", "mixed-off" switch into a sequence of three states.

  • "off", "on" - aria-pressed="false" -> aria-pressed="mixed" -> aria-pressed="true" -> ...

  • "mixed-off", "mixed-on" - aria-pressed="false" -> aria-pressed="true" -> aria-pressed="mixed" -> ...

  • "true" - initial value of aria-pressed is defined by the value of "toggle"

  • "middle" - initial value of aria-pressed is the middle state (for "off"/"on" it's "mixed", for "mixed-off"/"mixed-on" it's "true")

The value is not changed when the status of the button changes through interaction of the user (e.g. click). Use getStatus() to retrieve the current status.

Methods

getStatus

  • getStatus(): Promise<"off" | "on" | "middle">

  • Returns the current status of the button ("off", "middle" or "on").

    "off" -> stays for "off", "mixed-off" or "closed"
    "on" -> stays for "on", "mixed-on" or "opened"
    "middle" -> stays for the middle state of a triple switch

    Returns Promise<"off" | "on" | "middle">

setAriaLabel

  • setAriaLabel(text): Promise<void>

  • Sets the "aria-label" value of the component.

    Parameters

    • text: string

    Returns Promise<void>

setStatus

  • setStatus(value, event?, clicked?): Promise<void>

  • Sets the status of the button ("off", "middle" or "on"). Unlike resetting the properties "toggle" and/or "triple", setting the status does not trigger a rerendering of the component. The corresponding accessibility attributes will be set by javascript.

    "off" -> stays for "off", "mixed-off" or "closed"
    "on" -> stays for "on", "mixed-on" or "opened"
    "middle" -> stays for the middle state of a triple switch

    Parameters

    • value: "off" | "on" | "middle"

      'off' || 'on' || 'middle'

    • Optional event: boolean

      should the corresponding event be fired

    • Optional clicked: boolean

      should the hyloAccessibilityButtonClicked event be fired

    Returns Promise<void>

triggerPrimaryAction

  • triggerPrimaryAction(): Promise<void>

  • Triggers the primary action as if the user triggered it.

    Returns Promise<void>

update

  • update(): Promise<void>

  • Updates the button's children accessibility values and the button label. Has to be called when children get added/removed.

    Returns Promise<void>

updateLabel

  • updateLabel(): Promise<void>

  • Updates only the label. Needs to be called when the label changed.

    You can not add or remove an aria-label after you initially created the component. The component will either use what is set in the aria-label attribute if you used an aria-label initially or use the textContent if you didn't.

    Returns Promise<void>

Events

hyloAccessibilityButtonClicked

hyloAccessibilityButtonClicked: EventEmitter<boolean>

Fires when the button gets clicked and/or the primary action gets triggered.

Returns whether the button has a keyboard focus when clicked. (has class "hylo-has-focus")

hyloAccessibilityButtonMiddle

hyloAccessibilityButtonMiddle: EventEmitter<any>

Fires when the button turns to the middle state of a tripple button switch.

hyloAccessibilityButtonOff

hyloAccessibilityButtonOff: EventEmitter<any>

Fires when the button turns "off", "mixed-off" or "closed".

hyloAccessibilityButtonOn

hyloAccessibilityButtonOn: EventEmitter<any>

Fires when the button turns "on", "mixed-on" or "opened".

hyloHasFocus

hyloHasFocus: EventEmitter<boolean>

Fires when the component gains or looses focus through the "tab" key. The component also toggles the class "hylo-has-focus".

The emitted boolean value indicates whether the component gained or lost the focus.

hyloHasKeyactive

hyloHasKeyactive: EventEmitter<boolean>

Fires when the component is or looses active through a key action. The component also toggles the class "hylo-has-keyactive".

The emitted boolean value indicates whether the component gained or lost the active state.

hyloHasMouseover

hyloHasMouseover: EventEmitter<boolean>

Fires when the component gains or looses "mouseover". The component also toggles the class "hylo-has-mouseover". Does not fire when the "mouseover" was gained through a touch event.

The emitted boolean value indicates whether the component gained or lost "mouseover".

hyloInitialized

hyloInitialized: EventEmitter<any>

Fires when the component is fully loaded.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc