dojox/mobile accessibility fixes

[cjolif]

A few accessibility bugs have been noticed after 1.9. They must be fixed for 1.9.1.

[Paul Christopher]

I noticed this when I looked at ListItem: When you provide a "label" and a "rightText", the rightText div appears before the label div in the DOM. As far as I can see, this is not correct since a screenreader would first read the rightText div then the label div?

[davidtodd1]

Editable list patch - move button role to element that has title attribute so VoiceOver? announces button title. Also move aria-grabbed to button element.

[davidtodd1]

The Dojo mobile ComboBox? widget is missing an aria-expanded. The combobox must have aria-expanded=true if the list is displayed or aria-expanded=false when it is not.

[Christophe Jolif]

refs #17129. Fix some accessibility issues:

1/ move button role to element that has title attribute so VoiceOver? announces button title. Also move aria-grabbed to button element. 2/ The Dojo mobile ComboBox? widget is missing an aria-expanded. The combobox must have aria-expanded=true if the list is displayed or aria-expanded=false when it is not.

Thanks David Tood (IBM, CCLA).

Changeset: 99b0031688bda299b341cf7f348cfc269052fa9c

[Christophe Jolif]

Merge pull request #4 from cjolif/master

refs #17129. Mobile accessibility fixes.

Changeset: 22920d79a1581ccc21cb70679b59ff8d33c0cda9

[Christophe Jolif]

refs #17129. Fix some accessibility issues:

1/ move button role to element that has title attribute so VoiceOver? announces button title. Also move aria-grabbed to button element. 2/ The Dojo mobile ComboBox? widget is missing an aria-expanded. The combobox must have aria-expanded=true if the list is displayed or aria-expanded=false when it is not.

Thanks David Tood (IBM, CCLA).

Changeset: 1d55367a16ec56549a8c9e905e8b8d3ac75cc9df

[Christophe Jolif]

Merge pull request #5 from cjolif/1.9

refs #17129. Mobile accessibility fixes (1.9 backport)

Changeset: 2b4cc95aafcae55dbfdce2b8a106a70bb23508f5

[cjolif]

Replying to Paul Christopher:

I noticed this when I looked at ListItem: When you provide a "label" and a "rightText", the rightText div appears before the label div in the DOM. As far as I can see, this is not correct since a screenreader would first read the rightText div then the label div?

I'm not 100% sure if that is really problematic from a pure accessibility point of view as I'm not an accessibility expert. That said might be nice to get that fixed as well. We are always happy to accept patches.

[bill]

Screen readers understand which labels apply to which nodes because of the "for" attribute, ex:

<input id="foo" type="checkbox"><label for="foo">xyz</label>

[Paul Christopher]

See ​http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/mobile/tests/test_EdgeToEdgeList.html.

The html of a list item named "Wi-Fi" (so called "label" in dojox/mobile) and a right text "mac" looks like this:

<li id="dojox_mobile_ListItem_1" class="mblListItem" data-dojo-props="icon:"images/i-icon-2.png", rightText:"mac", moveTo:"hello"" data-dojo-type="dojox.mobile.ListItem" tabindex="0" style="" widgetid="dojox_mobile_ListItem_1" role="button">
  <img class="mblImageIcon mblListItemIcon" alt="" src="images/i-icon-2.png">
  <div class="mblListItemRightIcon">
  <div class="mblListItemRightText">mac</div>
  <div class="mblListItemLabel" style="display: block;"> Wi-Fi </div>
</li>

There is no semantic in there. "Wi-Fi" is the name of the list item. It is the most important information. Right text "mac" is just a supplement. But "mac" appears before "Wi-Fi" in the Dom. Therefore screenreaders might read it first. There is also no way for search engines/screenraders to tell a difference in the importance of "Wi-Fi" or "mac". A description is missing what "mac" is (right text/ supplement), and what "Wi-Fi" (list item's name/ label). And missing semantics is always an accessibility problem as far as I know.