FLUID-3730: Create a little component that will manage the items that should be announced audibly through a screen reader.

Description

This will be used by the reorderer to announce the location of a given reorderable element, as well as to announce its new location on reordering. This little component will be akin to the way we are able to add tabindex to an element.

Several variations of this component will be needed:

1. A static label component that makes it easy to associated elements with labels using aria-labelledby
2. A dynamically changing label, which is updated based on user interactions. This may be implemented by switching the element's aria-labelledby on the fly, or may need to be implemented using a live region

Attachments

• FLUID-3730-ariaLabeller.patch

Comments

• Justin Obara commented 2010-10-04T14:01:45.948-0400

  "Bug Parade Infusion 1.3"

• Jonathan Hung commented 2010-10-29T09:39:21.367-0400

  Suggested implementation:

  Grid reorderer: <row>, <column>. <description / contents>. <movable / fixed> element.
  i.e. "Row 1, Column 1. Quick Brown fox... Movable element."

  Layout reorderer: <item position in column> in <column number>. <description / contents>. <movable / fixed> element.
  i.e. "Element 1 in Column 2. Graphic Apple. Fixed element."

  List reorderer example: <position>. <description / contents>. <movable / fixed> element.
  i.e. "Element 1. Lorem ipsum. Movable element."

  Instructions on how to reorder items should be provided in an alternate location.

• Colin Clark commented 2010-11-17T19:33:30.781-0500

  Here's a tiny patch for the little component fixing a slight bug.

• Antranig Basman commented 2010-12-10T15:42:14.390-0500

  Implemented at revision 10364 with some test cases at revision 10382 - review required

• Colin Clark commented 2010-12-14T16:49:19.965-0500

  I've written a quick test for the live region functionality of the labeller. To avoid patch conflicts, I've pasted the relevant test below:

  fluidViewTests.test("ARIA labeller live region test", function () {
  var target = $("#component-3");
  var labeller = fluid.updateAriaLabel(target, "Label 1", {
  dynamicLabel: true
  });

  var region = fluid.jById(fluid.defaults("fluid.ariaLabeller").liveRegionId);
  jqUnit.assertEquals("Live region should have the correct label", "Label 1", region.text());
  labeller.update({
  text: "Label 2",
  dynamicLabel: true
  });
  jqUnit.assertEquals("The live region should be updated", target.attr("aria-label"), region.text());
  });

• Colin Clark commented 2010-12-15T10:27:51.355-0500

  I reviewed, tested, and committed Antranig's ariaLabeller component, adding an additional unit test along the way. Other commits under this ticket involved general framework changes, which I will review separately. +1 for inclusion of the fluid.ariaLabeller() component in 1.3.

• Michelle D'Souza commented 2011-01-14T10:44:40.544-0500

  Reopening to add the framework component to the issue.