Key / stateFunctionTab, Shift-TabMoves focus to the next (or previous) focusable element.Enter, SpaceActivates the button.disabledButton still focusable.
ARIA enhancements
External ARIA provided by the aria property:
prev
next
ARIAUsagearia-labelDefines a string value that labels the interactive element.aria-expandedExposes a visual state (e.g. expanded/collapsed) of another element.aria-pressedExposes the pressed state of a toggle button.aria-haspopupDefines that the button opens a popup (e.g. dialog). It can be used in combination with aria-expanded to indicate the state of the popup.
Internal ARIA that is managed by the component:
prev
next
ARIAUsagearia-disabled="true"When disabled prop is set, this ARIA attribute is set on the button element.role="status"When loading prop is set, the component announces the loading state (start and finish).aria-hidden="true"When the icon prop is set, the icon is hidden from the screen reader.
Due to the nature of Web Components and shadowDOM, there are limitations in the usage of some ARIA
attributes if they try to set relationship between elements in different shadowDOM's or shadowDOM/lightDOM combinations.
If the text of a button does not clearly indicate what the button's behavior is, add a brief, descriptive label using
the aria property with the aria-label value to provide more context for e.g. screen reader users. Phrases like
"Add", "Detail" or "Show" can be unclear when read out of context by a screen reader. In such instances, provide an
alternative text that offers more detailed information, such as "Add item XYZ to shopping cart" or "Details of product
XYZ."
