Opened 9 years ago

Closed 6 years ago

#5984 closed enhancement (wontfix)

Use dojo.attr for ARIA states and properties

Reported by: simonjb Owned by: becky
Priority: high Milestone: future
Component: Accessibility Version: 1.0
Keywords: Cc: davidb, clown, bill
Blocked by: Blocking:

Description (last modified by becky)

We could move the functionality of:

  • dijit.hasWaiState
  • dijit.getWaiState
  • dijit.setWaiState
  • dijit.removeWaiState

into dojo.attr, using the "aria-" prefix for state and property names. For example dijit.setWaiState(elem, "haspopup", true) would become dojo.attr(elem, "aria-haspopup", true). This change would have the advantage of reducing the API size and implementing the latest ARIA attribute syntax. We will need some FF2 special-case processing but that can be triggered by the "aria-" prefix.

Attachments (3)

5984dojo.patch (4.5 KB) - added by clown 8 years ago.
Use in conjunction with attachment "5984dijit.patch"
5984dijit.patch (4.3 KB) - added by clown 8 years ago.
Use in conjunction with "5984dojo.patch"
5984a.patch (26.6 KB) - added by clown 8 years ago.
Moves handling of aria states and properties, and the role attribute to html.js

Download all attachments as: .zip

Change History (19)

comment:1 Changed 9 years ago by becky

We need to this or #4828 but not both.

comment:2 Changed 9 years ago by davidb

  • Cc davidb added

comment:3 Changed 9 years ago by becky

  • Description modified (diff)
  • Milestone changed from 1.2 to 1.3

comment:4 Changed 8 years ago by becky

  • Milestone changed from 1.3 to 1.4

this got support at a recent dojo meeting but it won't make 1.3 unless someone else tackles it

comment:5 Changed 8 years ago by davidb

  • Cc clown added

comment:6 Changed 8 years ago by clown

  • Cc bill added

Step 1: Modified dojo/_base/html.js to handle the aria state functions, namely get/set/remove/hasWaiState(). For example:

dijit.setWaiState(element, "checked", "true");

becomes:

dojo.attr(element, "aria-checked", "true");

Attaching patches to get feedback as to whether this is a good approach.

Changes to:

  • dojo.attr() to get and set aria states.
  • dojo.hasAttr() to detect aria states.
  • dojo.removeAttr() to remove aria states.
  • internal _fixAttrName() in html.js to handle "aria-*" attribute names, specifically takes an optional second boolean parameter indicating if the attribute is an aria name, truncating the "aria-" prefix.
  • redefined xWaiState() functions in dijit/_base/wai.js to use the changes in dojo/_base/html.js (for backward compatibility).
  • updated unit tests in dijit/tests/_base/wai.html in light of the above.

The two patch files, "5984dojo.patch", and "5984dijit.patch" should be applied to dojo and dijit respectively. The unit tests in dijit's "wai.html" pass in FF2, FF3 (Mac OSX), IE7, and IE6. The dojo unit tests also pass for the same browsers/OSes.

To do:

  • similar changes to html.js to handle dijit's get/set/has/removeWaiRole().
  • update dijit's xAWaiRole() functions to use dojo.attr(), etc.
  • "migrate" dijit wai unit tests to dojo's html unit tests.

Changed 8 years ago by clown

Use in conjunction with attachment "5984dijit.patch"

Changed 8 years ago by clown

Use in conjunction with "5984dojo.patch"

comment:7 follow-up: Changed 8 years ago by bill

FYI, if this goes in for 1.4 then I think we can drop the FF2 support. In theory FF2 has already been desupported by mozilla although we agreed to support it in dojo until 1.4.

comment:8 in reply to: ↑ 7 Changed 8 years ago by davidb

Replying to bill:

FYI, if this goes in for 1.4 then I think we can drop the FF2 support

+1

comment:9 Changed 8 years ago by clown

Attaching "5984a.patch" that does everything the previous patches did, with the additional feature of using dojo.attr() to set/get/remove the "role" attribute. For example, dijit.setWaiRole(node, "menuitem") is replaced by dojo.attr(node, "role", "menuitem"). The latter call will take into account XHTML landmark roles (see #4828), as per the existing dijit.set|get|has|removeWaiRole() functions.

Changes to .../dojo/_base/html.js:

  • added private var _xhtmlRoles (regular expression).
  • added private _setRole() utility.
  • modified dojo.attr() to special case the role attribute.
  • added public getAriaRole() utility.
  • added public hasAriaRole() utility.
  • added public removeAriaRole() utility.
  • added unit tests for above to .../dojo/tests/_base/html.html

Changes to .../dijit/_base/wai.js:

  • removed private var _XhtmlRoles.
  • modifed xWaiRole() functions to use the changes in .../dojo/_base/html.js
  • modified unit tests in .../dijit/tests/_base/wai.html in light of above.

Ran unit tests in FF2/FF3/MacOSX and FF2/FF3/IE7/IE8RC1/WinXP.

Note: these changes still special case the way FF2 handles roles. Bill and DavidB have expressed the dropping this support. I await an official decision on this; for now support for FF2 is maintained.

Changed 8 years ago by clown

Moves handling of aria states and properties, and the role attribute to html.js

comment:10 Changed 8 years ago by davidb

Don't hit me, but it would be interesting to see what this patch looks like trimmed down with no FF < 3 sniffing (i.e. no FF2 wai: support).

Would it be more likely to land in core if it was smaller?

comment:11 follow-up: Changed 8 years ago by davidmark

I don't recommend adding any more complexity to the attr (or realAttr) methods. These low-level functions needs to be as simple (and fast) as possible. There is already some extra baggage in there that should be removed for 2.0 (e.g. innerHTML.)

IMO, the current interface is superior to adding custom prefixes to attributes names.

Also, note that - despite the name - attr deals with properties, not attributes. I'm looking into what sort of mapping there is between them (attributes and properties) in ARIA. That will probably lead to a test for ARIA support, which will resolve the FF2 issue.

comment:12 in reply to: ↑ 11 Changed 8 years ago by clown

Replying to davidmark:

One quick comment. Using "aria-" is not "...adding a custom prefix to attribute names". According to the current spec, ARIA state and property attributes all begin "aria-". FF2 implemented an earlier draft version of ARIA where xml namespaces were used. Name spaces have since been abandoned.

comment:13 Changed 8 years ago by becky

  • Milestone changed from 1.4 to 1.5

comment:14 Changed 7 years ago by becky

  • Milestone changed from 1.5 to future

comment:15 Changed 6 years ago by bill

Becky, seems like we should close this as wontfix, since the plain-old dojo.attr() will work as is:

  • dijit.hasWaiState(element, "checked") --> dojo.hasAttr(element, "aria-checked")
  • dijit.getWaiState(element, "checked") --> dojo.attr(element, "aria-checked")
  • dijit.setWaiState(element, "checked", true) --> dojo.attr(element, "aria-checked", "true")
  • dijit.removeWaiState(element, "checked") --> dojo.removeAttr(element, "aria-checked")
  • dijit.setWaiRole(element, "tablist") --> dojo.attr(element, "role", "tablist")
  • dijit.getWaiRole(element) --> dojo.attr(element, "role")

The last two are predicated on elements only having one role, as assumed in [22914].

Not sure how booleans like "checked" work exactly, to set checked=false maybe you just remove the attribute? Anyway should be doable through dojo.attr(). What do you think?

comment:16 Changed 6 years ago by becky

  • Resolution set to wontfix
  • Status changed from new to closed

Agree we can use dojo.attr(). We can slowly clean up and replace the ???WaiState/Role calls in the dijit code. Just need to remember to append "aria-" to the states since the old apis did that. You are correct that booleans can either be set to false or removed. Closed.

Note: See TracTickets for help on using tickets.