Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Selectmenu ARIA tweaks #877

Closed
wants to merge 4 commits into from

3 participants

@jzaefferer
Owner

For code review, to eventually merge into the selectmenu branch. I've pushed the individual commits for now, we can squash that into one later.

There are currently a few tests failing - I haven't updated those yet.

I've tested with JAWS and NVDA under Windows and VoiceOver under OSX.

  • NVDA/Firefox: Good
  • NVDA/IE9: Good
  • JAWS/Firefox: Good
  • JAWS/IE9: Works, but value is announced two times when changing it
  • VoiceOver/Safari: Unusable. Gets announced as combobox, but nothing else happens, at all. Native select is announced as "popup button" instead. Sucks, but then I also don't understand how anyone would use VO with Safari... I guess its good for native apps?

Feature wise this is probably as good as it gets, for now anyway. We can still improve later, but this is already much better then what we had.

Once the code is reviewed I'll sqaush and fix the unit tests.

jzaefferer added some commits
@jzaefferer jzaefferer Selectmenu: Use button element instead of anchor, makes click-on-labe…
…l work. Add aria-live to announce changes in JAWS/Firefox while menu is closed. Remove aria-labelledby as the label element is now the label. Still terrible in IE9/JAWS, way better with Safari/VoiceOver.
1bbcb3e
@jzaefferer jzaefferer Selectmenu: Remove aria-expanded updates, not being useful at all. Re…
…move labelledby on menu to avoid double announcement. Remove aria-activedescdent updates on button, as that breaks in IE.
e11a301
@jzaefferer jzaefferer Selectmenu: Restore label-click handler to move focus to button witho…
…ut opening the menu
7d47cc5
@jzaefferer jzaefferer Selectmenu: Trigger screenreaders to read button's value on focus by …
…appending empty content to live region
fd9b2b9
@jzaefferer
Owner

@fnagel could you test this?

@fnagel
Collaborator

I'm not quite sure how this is possible but I've tested on Win7 with NVDA 2012.2.1 and JAWS 14.0.1102 :

  • NVDA/Firefox: Works good, but it seems keyboard control is broken when menu is opened and NVDA is active.
  • NVDA/IE9: Broken,reads partly wrong information multiple times and it seems keyboard control is broken when menu is opened and NVDA is active.
  • JAWS/Firefox: Broken, almost no announcements
  • JAWS/IE9: Works, but value is announced two times on first change

These are my test results from latest selectmenu branch:

  • NVDA/FF: works good, but it seems keyboard control is broken when menu is opened. When NVDA is not active it works like expected.
  • NVDA/IE9: works good, but reads value multiple times
  • JAWS/FF: works with opened menu only
  • JAWS/IE9: works good, but reads value multiple times
@fnagel fnagel referenced this pull request in fnagel/jquery-ui
Closed

Official jQuery UI Selectmenu Widget #140

@kborchers
Owner

I did some testing as well.

  • NVDA/FF: Good (Did not notice broken keyboard control)
  • NVDA/IE9: Good, multiple value reads (Wonder if it's reading the option text and the value)
  • I don't have JAWS
  • VoiceOver/Safari and VoiceOver/Chrome: Sort of works if the selectmenu is expanded but otherwise it doesn't really work
@fnagel
Collaborator

Did you test FF / IE and NVDA on native Windows machine?

@jzaefferer
Owner

For testing JAWS, you can download free demos here: http://www.freedomscientific.com/products/fs/jaws-product-page.asp

Would be good if you could also compare this branch to the selectmenu branch, since my and Felix' results differed so heavily.

@jzaefferer
Owner

Btw. I tested in VirtualBox VM on Windows 7.

@fnagel
Collaborator

I've tested FF + NVDA on another Win7 machine (and latest NVDA 2012.3.1) and the keyboard control is definitely broken when the menu is open.

@kborchers
Owner

@fnagel Hmm, I'll check my NVDA version next time I switch to Windows. I'm running Win7 on my MBP via Bootcamp

@kborchers
Owner

OK, got a chance to do more testing. I have the latest NVDA but I noticed that my previous tests must have been on the selectmenu branch not the selectmenu-aria-tweaks branch. Below are my results for the tweaks branch:

NVDA/FF - Seems to work OK. Keyboard worked fine but couldn't open the menu with spacebar.
NVDA/IE9 - Broken. Keyboard left/right can rotate through the values properly but up/down does some crazy jumping and multiple value reads before losing focus and then have to tab back to the selectmenu. The 3rd selectmenu in the default selectmenu demo seems to work ok but it reads the values twice.

@fnagel
Collaborator

Mhh, so both branches do work partly but far from perfect. What now?

Shall I merge tweaks into selectmenu and we test again?

@jzaefferer
Owner

Replaced by #931

@jzaefferer jzaefferer closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 3, 2013
  1. @jzaefferer

    Selectmenu: Use button element instead of anchor, makes click-on-labe…

    jzaefferer authored
    …l work. Add aria-live to announce changes in JAWS/Firefox while menu is closed. Remove aria-labelledby as the label element is now the label. Still terrible in IE9/JAWS, way better with Safari/VoiceOver.
  2. @jzaefferer

    Selectmenu: Remove aria-expanded updates, not being useful at all. Re…

    jzaefferer authored
    …move labelledby on menu to avoid double announcement. Remove aria-activedescdent updates on button, as that breaks in IE.
  3. @jzaefferer
  4. @jzaefferer

    Selectmenu: Trigger screenreaders to read button's value on focus by …

    jzaefferer authored
    …appending empty content to live region
This page is out of date. Refresh to see the latest.
Showing with 16 additions and 23 deletions.
  1. +16 −23 ui/jquery.ui.selectmenu.js
View
39 ui/jquery.ui.selectmenu.js
@@ -59,8 +59,8 @@ $.widget( "ui.selectmenu", {
this.label = $( "label[for='" + this.ids.id + "']" ).attr( "for", this.ids.button );
this._on( this.label, {
"click": function( event ) {
- this.button.focus();
event.preventDefault();
+ this.button.focus();
}
});
@@ -68,17 +68,17 @@ $.widget( "ui.selectmenu", {
this.element.hide();
// create button
- this.button = $( "<a>", {
+ this.button = $( "<button>", {
"class": "ui-button ui-widget ui-state-default ui-corner-all",
href: "#" + this.ids.id,
tabindex: ( tabindex ? tabindex : this.options.disabled ? -1 : 0 ),
id: this.ids.button,
width: this.element.outerWidth(),
role: "combobox",
- "aria-expanded": false,
"aria-autocomplete": "list",
"aria-owns": this.ids.menu,
- "aria-haspopup": true
+ "aria-haspopup": true,
+ "aria-live": "assertive"
});
this.button.prepend( $( "<span>", {
@@ -110,7 +110,6 @@ $.widget( "ui.selectmenu", {
// create menu portion, append to body
this.menu = $( "<ul>", {
"aria-hidden": true,
- "aria-labelledby": this.ids.button,
id: this.ids.menu
});
@@ -144,9 +143,6 @@ $.widget( "ui.selectmenu", {
}
}
that.focus = item.index;
-
- // Set ARIA active descendant
- that.button.attr( "aria-activedescendant", that.menuItems.eq( item.index ).find( "a" ).attr( "id" ) );
},
// set ARIA role
role: "listbox"
@@ -204,14 +200,6 @@ $.widget( "ui.selectmenu", {
this.isOpen = false;
this._toggleAttr();
-
- // check if we have an item to select
- if ( this.menuItems ) {
- var id = this._getSelectedItem().find( "a" ).attr( "id" );
- this.button.attr( "aria-activedescendant", id );
- this.menu.attr( "aria-activedescendant", id );
- }
-
this._trigger( "close", event );
},
@@ -291,11 +279,18 @@ $.widget( "ui.selectmenu", {
_buttonEvents: {
focus: function() {
- // init Menu on first focus
- this.refresh();
- // reset focus class as its removed by ui.widget._setOption
- this.button.addClass( "ui-state-focus" );
- this._off( this.button, "focus" );
+ // cause the button live region to update on focus, triggering screenreaders to read its value
+ // would be nice to find a less hacky solution in the future
+ this.buttonText.html( this.buttonText.text() + "&#160;" );
+
+ // run this just once; _off can't unbind a specific handler
+ if ( !this.wasFocused ) {
+ // init Menu on first focus
+ this.refresh();
+ // reset focus class as its removed by ui.widget._setOption
+ this.button.addClass( "ui-state-focus" );
+ this.wasFocused = true;
+ }
},
click: function( event ) {
this._toggle( event );
@@ -378,7 +373,6 @@ $.widget( "ui.selectmenu", {
// change ARIA attr
this.menuItems.find( "a" ).attr( "aria-selected", false );
this.menuItems.eq( item.index ).find( "a" ).attr( "aria-selected", true );
- this.button.attr( "aria-labelledby", this.menuItems.eq( item.index ).find( "a" ).attr( "id" ) );
},
_setOption: function( key, value ) {
@@ -430,7 +424,6 @@ $.widget( "ui.selectmenu", {
this.button.toggleClass( "ui-corner-top", this.isOpen ).toggleClass( "ui-corner-all", !this.isOpen );
this.menuWrap.toggleClass( "ui-selectmenu-open", this.isOpen );
this.menu.attr( "aria-hidden", !this.isOpen);
- this.button.attr( "aria-expanded", this.isOpen);
},
_getCreateOptions: function() {
Something went wrong with that request. Please try again.