split button dropdown control is missing a label for accessibility APIs

[ckundo]

When navigating to the dropdown caret in the split button dropdown, a screen reader user should hear an announcement of the label of the control (as recommended in WCAG2 technique H91).

The following markup in v3.0.0-rc.2 does not yield that behavior. The screen reader should announce the button's behavior (e.g. "Expand button"), but instead it only announces "Button".

components.html line 744

<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
</button>

To test on a Mac, go to http://jsfiddle.net/3GRus/show/ in Chrome or Safari, enable VoiceOver with or install ChromeVox, and press the tab key until the button has focus.

Tested with and VoiceOver and ChromeVox screen readers on OS 10.8.4, surfaced by HTML CodeSniffer.

[cvrebert]

FYI, RC 2 is outdated. v3.0.0 final has been released.

[cvrebert]

@ckundo What fix do you propose?

[ckundo]

@cvrebert the issue exists on HEAD as well as of d10ed7e.

I suggest adding an accessibly hidden span with descriptive text, using sr-only:

<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
  <span class="sr-only">Toggle Dropdown</span>
</button>

Test it at http://jsfiddle.net/3GRus/1/

I'd be happy to submit a pull request.

[mdo]

Fixed by #10453.