From c8c274870a3aca32d7a9a6ee866eb06ad2005b97 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 22 Oct 2017 10:28:55 -0700 Subject: [PATCH] Multi-Thumb Slider Pattern: Editorial Cleanup For issue #221, made editorial revisions to the multi-thumb slider (id="slidertwothumb") design pattern in aria-practices.html. 1. Clarified wording of description. 2. Added link to single-thumb slider pattern in the description. 3. Changed format of example section to paragraph instead of list because there is only one example. 4. Changed target of link in keyboard interaction to go directly to the keyboard interaction section of single-thumb slider. 5. Removed a "must" from the roles, states, and properties. --- aria-practices.html | 32 +++++++++++++------------------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index d0164754a6..1c429476a5 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -2124,7 +2124,7 @@

Examples

-
+

Keyboard Interaction

  • Right Arrow: Increase the value of the slider by one step.
    • @@ -2141,7 +2141,7 @@

    Keyboard Interaction

  • 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.
-
+

WAI-ARIA Roles, States, and Properties

  • The element serving as the focusable slider control has role slider.
    • @@ -2170,30 +2170,24 @@

    WAI-ARIA Roles, States, and Properties

    Slider (Multi-Thumb)

    - NOTE: Revisions to this pattern are in progress. - Please provide feedback in - issue 221. -

    -

    - A multi-thumb slider is a slider with two or more thumbs that each set a value in a group of related values, for example selecting a price range for a product or service. - Many two-thumb sliders set a maximum and minimum value for a range, and the thumbs are not allowed to pass one another. - That is, the thumb that sets the upper value of the range can not be set lower than the thumb that controls the lower value of the range. - For example, in a price range selector the thumb for the maxmimum value of the lower price is determined by the current value of the maxmimum price. - Conversly the minimum value of the higher price thumb is determined by the current value of the lower price. + A multi-thumb slider is a slider + with two or more thumbs that each set a value in a group of related values. + For example, in a product search, a two-thumb slider could be used to enable users to set the minimum and maximum price limits for the search. + In many two-thumb sliders, the thumbs are not allowed to pass one another, such as when the slider sets the minimum and maximum values for a range. + For example, in a price range selector, the maxmimum value of the thumb that sets the lower end of the range is limited by the current value of the thumb that sets the upper end of the range. + Conversly the minimum value of the upper end thumb is limited by the current value of the lower end thumb. However, in some multi-thumb sliders, each thumb sets a value that does not depend on the other thumb values.

    - +

    Example

    -
      -
    • Multi-Thumb Slider Examples: Demonstrates a two thumb silder to pick a price range for an airline flight and a hotel reservation.
      • -
    +

    Multi-Thumb Slider Examples: Demonstrates two-thumb sliders for picking price ranges for an airline flight and hotel reservation.

    -
    +

    Keyboard Interaction

      -
    • Each thumb is in the page tab sequence and has the same keyboard interaction as a single-thumb slider.
      • +
    • Each thumb is in the page tab sequence and has the same keyboard interaction as a single-thumb slider.
    • The tab order remains constant regardless of thumb value and visual position within the slider. For example, if the value of a thumb changes such that it moves past one of the other thumbs, the tab order does not change. @@ -2208,7 +2202,7 @@

      WAI-ARIA Roles, States, and Properties

    • Each slider element has the aria-valuenow property set to a decimal value representing the current value of the slider.
    • Each slider element has the aria-valuemin property set to a decimal value representing the minimum allowed value of the slider.
    • Each slider element has the aria-valuemax property set to a decimal value representing the maximum allowed value of the slider.
      • -
    • When the range (e.g. minimum and/or maximum value) of another slider is dependent on the current value of a slider, the values of aria-valuemin or aria-valuemax of the dependent sliders must be updated when the value changes. +
    • When the range (e.g. minimum and/or maximum value) of another slider is dependent on the current value of a slider, the values of aria-valuemin or aria-valuemax of the dependent sliders are updated when the value changes.
    • If a value of aria-valuenow is not user-friendly, e.g., the day of the week is represented by a number, the aria-valuetext