Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#17598 closed defect (fixed)

dojo/dijit/templates/MenuItem.html accessibility

Reported by: apbdojo Owned by: Bill Keese <bill@…>
Priority: undecided Milestone: 1.9.4
Component: Dijit Version: 1.9.1
Keywords: Cc:
Blocked By: Blocking:

Description

iPad iOS 7 Safari VoiceOver? With Menu created with autoFocus true, VoiceOver? cursor is not set to the first MenuItem? of the Menu as expected.

A workaround is to set the property role="presentation" for the containerNode <td> on line 5 of the template dojo/dijit/templates/MenuItem.html

Perhaps this property should be added to line 5 of the production template. Because of the accessibility issue, I have entered this ticket as type defect instead of feature.

Change History (9)

comment:1 Changed 6 years ago by bill

Component: HTMLDijit

OK. Incidentally why are you setting autoFocus:true?

comment:2 Changed 6 years ago by glen walker

autoFocus:true should really be the default. From a screen reader perspective, when you press the spacebar to display the dropdown menu, the user should hear what the first item is rather than forcing them to navigate to it. That's how a standard menu bar works. If you're on a PC and you hit Alt+F to get the file menu, a screen reader will read that you're on a menu and will then read the first item in that menu.

My question is the opposite. Why would you ever want autoFocus:false?

comment:3 Changed 6 years ago by apbdojo

To avoid any potential issue in other environments, it may be wise to also add role="presentation" to line 6 for the accelKeyNode <td>.

comment:4 Changed 6 years ago by bill

From a screen reader perspective, when you press the spacebar to display the dropdown menu, the user should hear what the first item is rather than forcing them to navigate to it.

Right, and that's how dijit works already. But also be aware of how PCs and Macs work natively when using a mouse. The first menu item is not highlighted. Dijit intentionally matches this behavior too.

As for touch devices, I don't really want to highlight the first menu item unless the user is using a screen reader. But I'm not sure how to detect that.

comment:5 in reply to:  4 Changed 6 years ago by apbdojo

Replying to bill :

As for touch devices, I don't really want to highlight the first menu item unless the user is using a screen reader. But I'm not sure how to detect that.

By adding the role="presentation", the screen reader is better informed about the element and appropriate behavior. The programmer is able to decide desired behavior. By default, there is no behavior change. If the programmer sets autoFocus: true upon menu creation, the choice is made to highlight the first element. Currently, without role="presentation", the autoFocus: true is not working as desired/described.

A documentation note/hint could be added for the accessibilty programmer to advise clearly about autoFocus behavior on touch device. No dijit code changes are required; only the addition of role="presentation" to the template (which is an accessibility requirement).

comment:6 Changed 6 years ago by bill

Sure we can definitely add that role. I'm just looking for something better,in addition.

comment:7 Changed 6 years ago by Bill Keese <bill@…>

Owner: set to Bill Keese <bill@…>
Resolution: fixed
Status: newclosed

In 6d464712dc9550fc426fd5e1fb8bc1b4543b5012/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:7 Changed 6 years ago by Bill Keese <bill@…>

Owner: set to Bill Keese <bill@…>
Resolution: fixed
Status: newclosed

In acc915670fe3f2627f66bb8c9f3e88cc7c938ac4/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:8 Changed 6 years ago by bill

Milestone: tbd1.9.4
Note: See TracTickets for help on using tickets.