From bc0ab59da1845663af905ea04645fd622e535ed2 Mon Sep 17 00:00:00 2001 From: michael-n-cooper Date: Tue, 15 Jan 2019 02:59:30 +0000 Subject: [PATCH] Generated by TRAVIS-CI ca78f0a602a80ba904f7b8a83c1d9fc2e461998c Add carousel pattern (pull #957) Completes drafting of the carousel design pattern for issue #43. --- index.html | 133 ++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 90 insertions(+), 43 deletions(-) diff --git a/index.html b/index.html index 1c106824d5..e8c3155e10 100644 --- a/index.html +++ b/index.html @@ -2714,34 +2714,81 @@

Examples

Keyboard Interaction

- -
Note

- The initial focus behavior described above differs slightly from the behavior - provided by some browsers for native HTML radio groups. In some browsers, if none of the - radio buttons are selected, moving focus into the radio group with Shift+Tab will place focus on the last radio button - instead of the first radio button. -

+
+
For Radio Groups Not Contained in a Toolbar
+

+ This section describes the keyboard interaction implemented for most radio groups. + For the special case of a radio group nested inside a toolbar, use the keyboard interaction described in the following section. +

+
    +
  • + Tab and Shift + Tab: + Move focus into and out of the radio group. + When focus moves into a radio group : +
      +
    • If a radio button is checked, focus is set on the checked button.
      • +
    • If none of the radio buttons are checked, focus is set on the first radio + button in the group.
      • +
    +
    • +
  • Space: checks the focused radio button if it is not already checked.
    • +
  • + Right Arrow and Down Arrow: move focus to the next radio button in + the group, uncheck the previously focused button, and check the newly focused button. If + focus is on the last button, focus moves to the first button. +
    • +
  • + Left Arrow and Up Arrow: move focus to the previous radio button + in the group, uncheck the previously focused button, and check the newly focused button. + If focus is on the first button, focus moves to the last button. +
    • +
+
Note

+ The initial focus behavior described above differs slightly from the behavior + provided by some browsers for native HTML radio groups. In some browsers, if none of the + radio buttons are selected, moving focus into the radio group with Shift+Tab will place focus on the last radio button + instead of the first radio button. +

+
+
+
For Radio Group Contained in a Toolbar
+

+ Because arrow keys are used to navigate among elements of a toolbar and the Tab key moves focus in and out of a toolbar, when a radio group is nested inside a toolbar, the keyboard interaction of the radio group is slightly different from that of a radio group that is not inside of a toolbar. + For instance, users need to be able to navigate among all toolbar elements, including the radio buttons, without changing which radio button is checked. + So, when navigating through a radio group in a toolbar with arrow keys, the button that is checked does not change. + The keyboard interaction of a radio group nested in a toolbar is as follows. +

+
    +
  • Space: If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing.
    • +
  • Enter (optional): If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing.
    • +
  • Right Arrow: +
      +
    • When focus is on a radio button and that radio button is not the last radio button in the radio group, moves focus to the next radio button.
      • +
    • When focus is on the last radio button in the radio group and that radio button is not the last element in the toolbar, moves focus to the next element in the toolbar.
      • +
    • When focus is on the last radio button in the radio group and that radio button is also the last element in the toolbar, moves focus to the first element in the toolbar.
      • +
    +
    • +
  • Left Arrow: +
      +
    • When focus is on a radio button and that radio button is not the first radio button in the radio group, moves focus to the previous radio button.
      • +
    • When focus is on the first radio button in the radio group and that radio button is not the first element in the toolbar, moves focus to the previous element in the toolbar.
      • +
    • When focus is on the first radio button in the radio group and that radio button is also the first element in the toolbar, moves focus to the last element in the toolbar.
      • +
    +
    • +
  • + Down Arrow (optional): Moves focus to the next radio button in the radio group. + If focus is on the last radio button in the radio group, moves focus to the first radio button in the group. +
    • +
  • + Up Arrow (optional): Moves focus to the previous radio button in the radio group. + If focus is on the first radio button in the radio group, moves focus to the last radio button in the group. +
    • +
+
Note

+ Radio buttons in a toolbar are frequently styled in a manner that appears more like toggle buttons. + For an example, See the Simple Editor Toolbar Example +

+
@@ -2817,7 +2864,7 @@

Keyboard InteractionPage Up (Optional): Increment the slider by an amount larger than the step change made by Up Arrow.
  • Page Down (Optional): Decrement the slider by an amount larger than the step change made by Down Arrow.
    • -
    Note
      +
      Note
      1. Focus is placed on the slider (the visual object that the mouse user would move, also known as the thumb.
      2. In some circumstances, reversing the direction of the value change for the keys specified above, e.g., having Up Arrow decrease the value, could create a more intuitive experience.
      @@ -2947,7 +2994,7 @@

      Keyboard Interaction -
      Note
        +
        Note
        1. Focus remains on the text field during operation.
        2. Standard single line text editing keys appropriate for the device platform:
            @@ -3003,7 +3050,7 @@

            3.20 Table -
            Note

            +

            Note

            As with other WAI-ARIA roles that have a native host language equivalent, authors are strongly encouraged to use a native HTML table element whenever possible. This is especially important with role table because it is a new feature of WAI-ARIA 1.1. @@ -3044,7 +3091,7 @@

            aria-rowspan or aria-colspan is applied as described in grid and table properties. -
            Note

            +

            Note

            If rows or cells are included in a table via aria-owns, they will be presented to assistive technologies after the DOM descendants of the table element unless the DOM descendants are also included in the aria-owns attribute.

            @@ -3122,7 +3169,7 @@

            Keyboard Interaction -
            Note
              +
              Note
              1. It is recommended that tabs activate automatically when they receive focus as long as their associated tab panels are displayed without noticeable latency. This typically requires tab panel content to be preloaded. @@ -3197,7 +3244,7 @@

                Keyboard InteractionHome (Optional): Moves focus to first element.

              2. End (Optional): Moves focus to last element.
                3. -
                Note
                  +
                  Note
                  1. If the items in a toolbar are arranged vertically:
                    1. Down Arrow performs as Right Arrow is described above.
                      2. @@ -3252,7 +3299,7 @@

                      Example<

                      Keyboard Interaction

                      Escape: Dismisses the Tooltip.

                      -
                      Note
                        +
                        Note
                        1. Focus stays on the triggering element while the tooltip is displayed.
                        2. If the tooltip is invoked when the trigger element receives focus, then it is dismissed when it no longer has focus (onBlur). @@ -3400,7 +3447,7 @@

                          Keyboard Interaction

                          3. -
                          Note
                            +
                            Note
                            1. DOM focus (the active element) is functionally distinct from the selected state. For more details, see this description of differences between focus and selection.
                            2. The tree role supports the aria-activedescendant property, @@ -3454,7 +3501,7 @@

                              Note

                              +

                              Note

                              If aria-owns is set on the tree container to include elements that are not DOM children of the container, those elements will appear in the reading order in the sequence they are referenced and after any items that are DOM children. Scripts that manage focus need to ensure the visual focus order matches this assistive technology reading order. @@ -3464,7 +3511,7 @@

                              3.25 Treegrid

                              -
                              Editor's note

                              +

                              Editor's note

                              This pattern is new in APG 1.1 Release 2. Please provide feedback in issue 793. @@ -3583,7 +3630,7 @@

                              Keyboard Interaction

                              3. -
                      @@ -3689,7 +3736,7 @@

                      aria-rowspan or aria-colspan is applied as described in grid and table properties. -
                      Note

                      WAI-ARIA Roles, States, and Properties

                      @@ -4733,7 +4780,7 @@

                      5.9.2 As And, given the vast array of operating system, browser, and assistive technology keys, it is almost impossible to be certain conflicts do not exist. So it is also important to employ strategies that mitigate the impact of conflicts whether they are intentional or unknown.

                      -
                      Note

                      +

                      Note

                      In the following sections, meta key refers to the Windows key on Windows-compatible keyboards and the Command key on MacOS-compatible keyboards.