From 25ef3ce434f29571f1bb3d140cf79dca2744b5d8 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sat, 25 Nov 2017 21:43:02 -0800 Subject: [PATCH] Toolbar Example: Complete Example Page For issue #126, completed the examples/toolbar/toolbar.html page: * Revise wording of introduction. * Convert keyboard documentation from list to table format. * Update roles, states, and properties table to current format. * Update links to source code. * Editorial revisions to documentation. --- examples/toolbar/toolbar.html | 167 ++++++++++++++++++++++++---------- 1 file changed, 121 insertions(+), 46 deletions(-) diff --git a/examples/toolbar/toolbar.html b/examples/toolbar/toolbar.html index 6973c2b1fe..9465f51c04 100644 --- a/examples/toolbar/toolbar.html +++ b/examples/toolbar/toolbar.html @@ -23,15 +23,14 @@

Toolbar Example

- NOTE: This example is not yet complete. - When it is ready for review, feedback will be welcome in - issue 126. + NOTE: Please provide feedback on this example page in + issue 539.

Following is an example implementation of the design pattern for toolbar - that demonstrates how a toolbar can group buttons, links, and checkboxes into a single tab stop. - It also illustrates the roving tabindex method for managing focus in a composite component. + that demonstrates how a toolbar can group a set of buttons into a single tab stop. + It also illustrates the roving tabindex method for managing focus within a component.

Example

@@ -71,34 +70,65 @@

Example

Accessibility Features

  1. - The focus is managed using roving tabindex. - Because the control that most recently had focus has tabindex="0", - focus returns to the control that last had focus when tabbing into the toolbar. + When tabbing into the toolbar, focus returns to the control that last had focus. + Focus movement inside the toolbar is managed using roving tabindex.
    2. -
  2. Since there is only a single disabled control, to ensure screen reader users are aware of its presence, it is focusable.
    3. -
  3. The menubutton can be opened with either Enter or Down Arrow since Down Arrow is not needed to navigate a horizontal toolbar.
    4. +
  4. + Since there is only a single disabled control, to ensure screen reader users are aware of its presence, it is focusable. + For additional guidance, see Focusability of disabled controls. +
    5. +
  5. Since Down Arrow is not used to navigate a horizontal toolbar, the menubutton can be opened with Down Arrow as well as Enter.

Keyboard Support

-
    -
  • - Tab: Moves focus into and out of the toolbar. - When focus moves into the toolbar, the first enabled control receives focus. - If the toolbar has previously contained focus, the control that last had focus receives focus. -
    • -
  • - Left Arrow: Moves focus to the previous control, - wrapping from the first control to the last. -
    • -
  • - Right Arrow: Moves focus to the next control, - wrapping from the last control to the first. -
    • -
  • Home: Moves focus to the first control.
    • -
  • End: Moves focus to the last control.
    • -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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.
    • +
+
Left Arrow +
    +
  • Moves focus to the previous control.
    • +
  • If the first control has focus, focus moves to the last control.
    • +
+
Right Arrow +
    +
  • Moves focus to the next control.
    • +
  • If the last control has focus, focus moves to the first control.
    • +
+
HomeMoves focus to the first control.
EndMoves focus to the last control.
@@ -106,32 +136,80 @@

Role, Property, State, and Tabindex Attributes

- - - + + + + - + + - + - + - + + + + + + + + + + + + + + + + + + + + @@ -142,14 +220,11 @@

Role, Property, State, and Tabindex Attributes

Javascript and CSS Source Code

AttributeApplied to ElementUsageRoleAttributeElementUsage
role="toolbar"toolbar div - Identifies the toolbar container for assistive technologies. - Because focus is managed with a roving tabindex instead of aria-activedescendant, the toolbar div is not focusable. +
    +
  • Identifies the toolbar container.
    • +
  • The toolbar div is not focusable because focus is managed with a roving tabindex.
    • +
+ aria-label="LABEL_STRING" div with toolbar rolediv - Since the toolbar does not have a visible label, provides an accessible label that helps screen reader users understand the purpose of the toolbar. - Invisible labels are used when sighted users can derive purpose from visual context. +
    +
  • Provides an accessible label for the toolbar.
    • +
  • An invisible label is appropriate when the visual context adequately communicates purpose.
    • +
aria-disabled="true"buttondivIdentifies the element as a button.
+ tabindex=-1 + + button + +
    +
  • Makes the element focusable but not part of the page Tab sequence.
    • +
  • Applied to all elements contained in the toolbar except for one that is included in the page Tab sequence.
    • +
  • This approach to managing focus is described in the section on roving tabindex.
    • +
+
+ tabindex=0 + + button + +
    +
  • Makes the element focusable and includes it in the page Tab sequence.
    • +
  • Set on only one widget contained by the toolbar.
    • +
  • On page load is set on the first widget element contained by the toolbar.
    • +
  • Moves with focus inside the toolbar so the most recently focused element is included in the page Tab sequence.
    • +
  • This approach to managing focus is described in the section on roving tabindex.
    • +
+
aria-disabled="true" button Informs assistive technologies of the disabled state.