FLUID-3011: Share the slider ARIA back with the jQuery UI community

Description

ARIA for the slider in TextfieldSlider was put directly into the component. We should create a patch for jQuery UI and share it back with them.

Attachments

• FLUID-3011.txt
• FLUID-3011b.txt
• FLUID-3011c.txt
• FLUID-3011d.txt
• FLUID-3011e.txt
• FLUID-3011f.txt
• FLUID-3011g.txt
• FLUID-3011h.txt

Comments

• Michelle D'Souza commented 2009-07-13T13:06:42.000-0400

  I will work with Alison on this task.

• Alison Benjamin commented 2009-07-24T11:51:37.000-0400

  in ui.slider.js - Adds aria-valuenow, aria-valuemin, & aria-valuemax to handle of slider.
  in slider.core.js - unit tests

• Alison Benjamin commented 2009-07-27T10:15:50.000-0400

  Previous patches FLUID-3011 & FLUID-3011b had whitespace problems.

  Files in FLUID-3011c:

  in ui.slider.js - Adds aria-valuenow, aria-valuemin, & aria-valuemax to handle of slider. Also appends a div tag with tabindex="0" to the handle to give it keyboard focus instead of a link with href="#". We think using these div tags instead addresses a JAWS bug that we found that occurs when JAWS is focused on the handle of the slider: the screen reader then reads the URL of the Website the widget is embedded on.

  in slider.core.js - unit tests

• Alison Benjamin commented 2009-07-30T11:22:43.000-0400

  I couldn't seem to replicate JAWS reading the URL of the website when the handle received focus. I don't know why this is. This patch removes the change I made that appends a div tag with tabindex="0" to the handle and reverts this section of the code back to the way it was before.

• Michelle D'Souza commented 2009-07-31T13:51:26.000-0400

  Alison has started a thread on the jQuery accessibility list here: http://groups.google.com/group/jquery-a11y/browse_thread/thread/18a538d6baf05e41

• Alison Benjamin commented 2009-08-04T10:12:05.000-0400

  Scott from jQuery pointed out that the last two unit tests I provided tested value, not aria-valuenow, so I corrected this error.

• Alison Benjamin commented 2009-11-30T10:28:42.000-0500

  same as Fluid-3011f.txt, but updates for jQuery 1.7.2

• Alison Benjamin commented 2009-11-30T10:30:53.000-0500

  This gives the jquery slider a "unittext" default of null. When null is set to a string it becomes the aria value text of the slider. Please apply FLUID-3011g.txt first.

• Alison Benjamin commented 2009-12-04T13:13:23.000-0500

  please apply this before applying fluid-3011h.txt

• hhillen commented 2010-02-25T20:37:41.000-0500

  I made some changes to this patch (http://dev.jqueryui.com/attachment/ticket/4739/slider_additions_to_fluid_patch_HH.txt)

  It fixes the following:

  • Omission of "unittext" option used to result in the aria-valuetext attribute containing "null" as unit. Now, if the unittext option is not specified, aria-valuetext is not set.
  • Aria-valuetext was not set until the value is actually changed. Now it is set when the slider is initialized.
  • Changes to range slider handles now updated the aria-valuemin/max value of the opposite thumb
  • Added two options for labeling slider handles (implemented using the 'title' attribute):
    1: The "label" option can be used to specify a single label. If the slider has multiple thumbs, this label will be given to each handle, but with an index concatenated (e.g. "color 1", "color 2", etc) If the slider is a range slider, both thumbs will have the label, followed by "min" and "max" (e.g. "price range min", "price range max"
    2: The "labels" options can be used to specify an array of labels for multiple thumb sliders (e.g. "color picker red", "color picker blue", "color picker green".

• Michelle D'Souza commented 2011-01-30T11:56:39.054-0500

  Reopening these issues to add the frameworkcomponent