diff --git a/third_party/aria-practices/src/content/patterns/toolbar/examples/help.html b/third_party/aria-practices/src/content/patterns/toolbar/examples/help.html index adcc0bbeb9e96..af81d8e160d5c 100644 --- a/third_party/aria-practices/src/content/patterns/toolbar/examples/help.html +++ b/third_party/aria-practices/src/content/patterns/toolbar/examples/help.html @@ -2,19 +2,9 @@ - Toolbar Example - - - - - - - - -

Toolbar Help

diff --git a/third_party/aria-practices/src/content/patterns/toolbar/examples/toolbar.html b/third_party/aria-practices/src/content/patterns/toolbar/examples/toolbar.html index a076530bebcf4..a432cbbcc2926 100644 --- a/third_party/aria-practices/src/content/patterns/toolbar/examples/toolbar.html +++ b/third_party/aria-practices/src/content/patterns/toolbar/examples/toolbar.html @@ -2,19 +2,9 @@ - Toolbar Example - - - - - - - - - @@ -25,34 +15,6 @@ - -
-

Toolbar Example

- -
-

About This Example

- -

- The following example of an editor toolbar implements the Toolbar Pattern and demonstrates how a toolbar can group a set of interactive widgets into a single tab stop. - For illustrative and interoperability assessment purposes, this implementation includes a diverse set of widgets, some of which may not be ordinarily grouped in the same toolbar. - For instance, it includes both a checkbox and toggle buttons. - In a typical implementation, the design would use either one or the other but not both. - Similarly, the edit field is included to help simulate actual implementation and is not intended to represent an actual rich text editor. - This example also illustrates the practice of - Managing Focus Within Components Using a Roving tabindex. -

-
- -
-
-

Example

-
-
- -
-

Accessibility Features

-

Keyboard Features

- -

Focus Styling

- -

Button Popup Labels

-

- The bold, italic, underline, and text align buttons have popup labels that implement the requirements of - WCAG Success Criterion 1.4.13 Content on Hover or Focus: -

- -
- -
-

Keyboard Support

-
-

Toolbar

-

The toolbar provides the following keyboard support described in the toolbar pattern.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
Tab -
    -
  • Moves focus into and out of the toolbar.
    • -
  • The first control is focused if the toolbar is receiving focus for the first time after page load.
    • -
  • Otherwise, the most recently focused control receives focus.
    • -
-
Right Arrow -
    -
  • Moves focus to the next control.
    • -
  • If the last control has focus, focus moves to the first control.
    • -
  • If an item in the popup menu has focus, does nothing.
    • -
-
Left Arrow -
    -
  • Moves focus to the previous control.
    • -
  • If the first control has focus, focus moves to the last control.
    • -
  • If an item in the popup menu has focus, does nothing.
    • -
-
HomeMoves focus to the first control.
EndMoves focus to the last control.
ESCIf a button popup label is visible, hides it.
-
- -
-

Toggle Buttons (Bold, Italic, Underline)

-

- The toggle buttons for choosing to apply Bold, Italic, and Underline styling provide the following keyboard support described in the - Button Pattern. -

- - - - - - - - - - - - - -
KeyFunction
Enter
Space		Toggle the pressed state of the button.
-
- -
-

Radio Group (Text Alignment)

-

- The buttons for choosing left, center, or right text alignment are styled like toggle buttons. - However, since pressing one toggles off another so that only one button in the group is in the pressed state, the toggles behave like radio buttons. - Because ARIA is designed to inform assistive technologies about UI semantics and behaviors, not styling, the alignment toggles provide the following keyboard support described in the - Radio Group Pattern. - As described in the pattern, nesting a radio group in a toolbar calls for an important behavioral difference compared to radios outside a toolbar: moving focus inside the group does not automatically change which button is checked. - In addition, because Left Arrow and Right Arrow are needed by the parent toolbar, they are not captured by the radio group. - The toolbar thus provides navigation into, inside, and out of the nested radio group. -

- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
Enter
Space		 -
    -
  • If the focused radio button is checked, do nothing.
    • -
  • Otherwise, uncheck the currently checked radio button and check the radio button that has focus.
    • -
-
Down Arrow -
    -
  • Moves focus to the next radio button.
    • -
  • If the last radio button has focus, focus moves to the first radio button.
    • -
-
Up Arrow -
    -
  • Moves focus to the previous radio button.
    • -
  • If the radio button has focus, focus moves to the last radio button.
    • -
-
-
- -
-

Button (Cut, Copy, Paste)

-

- The buttons for cut, copy, and paste provide the following keyboard support described in the - Button Pattern. - While they are HTML button elements, as described in the accessibility features section above, in order to remain focusable when disabled, they have aria-disabled instead of the HTML disabled attribute. -

- - - - - - - - - - - - - -
KeyFunction
Enter
Space		 - If the button is enabled, execute the action associated with the button. - Otherwise, do nothing. -
-
- -
-

Menu Button (Font Family)

-

- The menu button for opening the font family menu provides the following keyboard support described in the - Menu Button Pattern. -

- - - - - - - - - - - - - -
KeyFunction
- Enter
- Space
- Down Arrow
- Up Arrow - 		- Open the menu and place focus on a menu item. - In this implementation, the focus is set on the currently selected font family when the menu opens. -
-
- -
-

Menu (Font Family)

-

- The menu for choosing a font family provides the following keyboard support described in the - Menu and Menubar Pattern. -

- - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
Enter
Space		Activate the menu item, close the menu, and place focus on the menu button.
Down Arrow -
    -
  • Moves focus to the next menu item.
    • -
  • If the last menu item has focus, focus moves to the first menu item.
    • -
-
Up Arrow -
    -
  • Moves focus to the previous menu item.
    • -
  • If the first menu item has focus, focus moves to the last menu item.
    • -
-
ESCCloses the menu and moves focus to the menu button.
-
- -
-

Spin Button (Font Size)

-

- The spin button for changing font size provides the following keyboard support described in the - Spin Button Pattern. -

- - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
Down ArrowDecreases the font size of the text in the textarea by 1 point.
Up ArrowIncreases the font size of the text in the textarea by 1 point.
Page DownDecreases the font size of the text in the textarea by 5 points.
Page UpIncreases the font size of the text in the textarea by 5 points.
-
- -
-

Checkbox (Night Mode)

-

- The checkbox for toggling night mode provides the following keyboard support defined in the - Checkbox Pattern. - As an HTML input element, the browser provides the keyboard support. -

- - - - - - - - - - - - - -
KeyFunction
SpaceToggles the state of the checkbox.
-
- -
-

Link (Help)

-

- The link for opening a help page provides the following keyboard support described in the Link Pattern. - As an HTML link, the keyboard support is provided by the browser. -

- - - - - - - - - - - - - -
KeyFunction
Enter
Space		Activate the link.
-
-
- -
-

Role, Property, State, and Tabindex Attributes

-
-

Toolbar

-

The toolbar implements the following ARIA attributes described in the Toolbar Pattern.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
toolbardiv - -
- aria-label="Text Formatting" - divProvides the toolbar with an accessible name of "Text Formatting".
- aria-controls="IDREF" - divSet to a value that references the text area, indicating the toolbar controls the text area.
- tabindex="-1" - button, div, input[type="checkbox"], a -
    -
  • Makes the toolbar item focusable but not part of the page Tab sequence.
    • -
  • Applied to all toolbar items contained in the toolbar except for one that is included in the page Tab sequence.
    • -
  • - This approach to managing focus is described in the practice of - Managing Focus Within Components Using a Roving tabindex. -
    • -
-
- tabindex="0" - button, div, input[type="checkbox"], a -
    -
  • Makes the toolbar item part of the page Tab sequence.
    • -
  • Set on only one item contained in the toolbar.
    • -
  • On page load, set on the first item in the toolbar.
    • -
  • Moves with focus inside the toolbar so the most recently focused item is included in the page Tab sequence.
    • -
  • - This approach to managing focus is described in the practice of - Managing Focus Within Components Using a Roving tabindex. -
    • -
-
-
- -
-

Toggle Buttons (Bold, Italic, Underline)

-

- The toggle buttons for choosing to apply Bold, Italic, and Underline styling implement the following ARIA attributes described in the - Button Pattern. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
aria-pressed="true"buttonIndicates the button is a toggle and that the styling controlled by the button has been applied.
- aria-pressed=false - buttonIndicates the button is a toggle and that the styling controlled by the button has NOT been applied.
aria-hidden="true"spanHides the icon character from being included in the accessible name.
-
- -
-

Radio Group (Text Alignment)

-

- The buttons for choosing left, center, or right text alignment are styled like toggle buttons. - However, since pressing one toggles off another so that only one button in the group is in the pressed state, the toggles behave like radio buttons. - Because ARIA is designed to inform assistive technologies about UI semantics and behavior, not styling, the alignment toggles implement the following ARIA attributes described in the - Radio Group Pattern. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
radiogroupdivIdentifies the div element as a container for group of radio buttons.
aria-label="Text Alignment"divDefines the accessible name for the group of radio buttons as "Text Alignment".
radiobutton -
    -
  • Identifies the button element as a radio button.
    • -
  • The accessible name comes from the child text content of the button element.
    • -
-
aria-checked="true"button -
    -
  • Indicates the radio button is checked, i.e., the type of alignment currently applied to the text area.
    • -
  • Only one radio button in the group has aria-checked set to true at any given time.
    • -
-
aria-checked="false"button -
    -
  • Indicates the radio button is NOT checked.
    • -
  • All radio buttons in the group, except for one, have aria-checked set to false.
    • -
-
aria-hidden="true"spanHides the icon character from being included in the accessible name.
-
- -
-

Button (Cut, Copy, Paste)

-

- The buttons for cut, copy, and paste implement the following ARIA attributes described in the - Button Pattern. - While they are HTML button elements, as described in the accessibility features section above, in order to remain focusable when disabled, they have aria-disabled instead of the HTML disabled attribute. -

- - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
aria-disabled="true"buttonSet when the button is disable to inform assistive technologies of the disabled state.
aria-disabled="false"buttonSet when the function provided by the button is available.
-
- -
-

Menu Button (Font Family)

-

- The menu button for opening the font family menu implements the following ARIA attributes described in the - Menu Button Pattern. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
aria-label="Font: FONT_FAMILY_NAME"button -
    -
  • Defines the accessible name for the menu button by concatenating Font: with the name of the font family currently checked in the menu.
    • -
  • Updated when a different font family is chosen in the font family menu.
    • -
-
aria-haspopup="true"button -
    -
  • Indicates the button opens a menu.
    • -
  • - NOTE: While ARIA does not include a menubutton, most platform accessibility APIs have a menubutton role. - On those platforms, assistive technologies identify buttons with aria-haspopup set to either true or menu as menu buttons. -
    • -
-
aria-controls="IDREF"button -
    -
  • Set to a value that references the element with role menu.
    • -
  • Indicates the button opens and closes the menu.
    • -
-
aria-expanded="false"buttonIndicates the menu is not displayed and that activating the menu button opens the menu.
aria-expanded="true"buttonIndicates the menu is displayed and that activating the menu button closes the menu.
-
- -
-

Menu (Font Family)

-

- The menu for choosing a font family implements the following ARIA attributes described in the - Menu and Menubar Pattern. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
- menu - ulIdentifies the ul element as a menu.
aria-label="Font Family"ulDefines the accessible name for the menu as "Font Family".
menuitemradioli -
    -
  • Identifies the li element as a menuitemradio.
    • -
  • The text content of the li element provides the accessible name of the menuitemradio.
    • -
-
aria-checked="true"li -
    -
  • Applied to an element with role menuitemradio to indicate the item is checked, informing users which font is applied to the text area.
    • -
  • Only one item in the menu has the checked state at any given time.
    • -
-
aria-checked="false"li -
    -
  • Applied to elements with role menuitemradio to indicate the items are NOT checked.
    • -
  • All items in the menu, except one, have this value.
    • -
-
tabindex="-1" - li - -
    -
  • Makes the menuitemradio element focusable so DOM focus can be set on the menu item.
    • -
  • Dynamically added by JavaScript.
    • -
-
-
- -
-

Spin Button (Font Size)

-

- The spin button for changing font size implements the following ARIA attributes described in the - Spin Button Pattern. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
spinbuttondivIdentifies the div element as a spinbutton.
aria-label="Font size in points"divDefines the accessible name for the spin button as "Font size in points".
aria-valuenow="NUMBER_POINTS"div -
    -
  • Indicates the current value of the spin button.
    • -
  • Updated by JavaScript as users adjust the value of the spin button.
    • -
-
aria-valuetext="NUMBER_POINTS Points"div -
    -
  • Provides a more user friendly announcement of the current value for screen reader users.
    • -
  • NUMBER_POINTS is updated by JavaScript as the user adjusts the value of the spin button.
    • -
  • As users adjust the value, instead of hearing only a number, they will hear the current value followed by the word Points, e.g., 10 Points.
    • -
-
aria-valuemin="8"divIndicates the minimum allowed value for the spin button, i.e., smallest supported font size.
aria-valuemax="40"divIndicates the maximum allowed value for the spin button, i.e., largest supported font size.
-
-
- -
-

JavaScript and CSS Source Code

- -
- -
-

HTML Source Code

-

To copy the following HTML code, please open it in CodePen.

- -
- - -
-