Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#16976 closed defect (fixed)

[Patch][CLA] dojox/mobile: IconMenuItem uses <a href="javascript:void">

Reported by: Paul Christopher Owned by: Eric Durocher
Priority: undecided Milestone: 1.9
Component: DojoX Mobile Version: 1.9.0b2
Keywords: Cc:
Blocked By: Blocking:

Description

IconMenuItem uses <a href="javascript:void"> which gives always a status line with the link address when hovering over the menu item on desktop browsers. I'm not an expert, but I find the usage of <a href="javascript:void"> is not correct (without knowing too much about dojox/mobile).

Maybe a simple <div> with some ARIA notation and cursor:pointer is enough?

Attachments (1)

[Patch][CLA]IconMenuItem.diff (942 bytes) - added by Paul Christopher 6 years ago.

Download all attachments as: .zip

Change History (6)

Changed 6 years ago by Paul Christopher

comment:1 Changed 6 years ago by Adrian Vasiliu

In any case, with your patch, on desktop browsers (FF20 and Chrome 25 on Windows) double-clicking the icon labels in dojox/mobile/tests/test_IconMenu-standalone.html has the (unwanted) effect to select the text. (This is not the case without your suggested change.)

comment:2 Changed 6 years ago by Paul Christopher

Mmmh, that's true. But it happens to me also for some normal diijit/form/Buttons, see http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Button.html. The first "+ create" button on the top is not selected when double clicking, the second one is (tested with FF19).

Anyhow, adding a CSS class "unselectable" to the label node fixes the issue

.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
<div class="mblIconMenuItemLabel unselectable">Some button text</div>

Maybe we should ask Bill or the person responsible for accessibility at Dojo. But as far as I know, using <a> with "javascript:void" as href is not a good design pattern. It should be rather a div with ARIA "role=link", and css styles "cursor: pointer; user-select:none".

But all in all, this bug report is a minor issue since everything is working fine. However the link text in the status line on desktop browsers is a little bit annoying for me and I still have the design rule in my mind: "Don't use <a href="javascript:void" when creating widgets...

comment:3 Changed 6 years ago by bill

That annoys me too (when the bottom left corner of the browser show some link text but the thing you are hovering isn't a link). Disclaimer: I'm not the person responsible for accessibility, no one is really assigned to that right now.

I do notice that problem where you can select text in a dijit/form/ComboButton, but I guess that's not the point of this ticket.

comment:4 Changed 6 years ago by Eric Durocher

Resolution: fixed
Status: newclosed

In [31223]:

fixes #16976, refs #16178. Accessibility enhancements for mobile IconMenu? and IconMenuItem? + resets pointer cursor on Accordion (removed by a previous a11y patch). Thanks David Todd (IBM, CCLA), Paul Christopher (CLA). !strict

comment:5 Changed 6 years ago by Eric Durocher

Milestone: tbd1.9

Fixed according to David Todd's (a11y specialist) advice: replaced href="javascript:void" by role="presentation", and also set the pointer cursor by CSS as proposed by Paul.

Note: See TracTickets for help on using tickets.