Opened 10 years ago

Last modified 5 years ago

#3525 open bug

Selectable: Add ARIA semantics and keyboard handling

Reported by: davidb Owned by: Scott González
Priority: minor Milestone: 2.0.0
Component: ui.selectable Version: 1.6rc2
Keywords: Cc: michelled
Blocked by: Blocking:

Description (last modified by davidb)

For accessibility, we should add an attribute to elements that are selectable. Using WAI-ARIA we can do the following:

  1. If an element is selectable, specify attribute aria-selected=false
  2. If an element is selectable, and selected, aria-selected=true
  3. If an element is not selectable, provide no aria-selected attribute

So in codespeak something like:

this.element.addClass("ui-selectable");

would be:

this.element.addClass("ui-selectable").ariaState("selected",false);

I wonder if we should first refactor (extract-method) such that there are one or two places where selection related classes are added or removed?

Change History (9)

comment:1 Changed 10 years ago by davidb

Description: modified (diff)

comment:2 Changed 10 years ago by Scott González

From #3481 (duplicate):

The "Selectable" interaction might be a good place to auto-expose the following ARIA semantics: aria-selected aria-multiselectable

The aria-multiselectable = true|false would apply to the container element. The aria-selected = true|false would apply to the selectable items. There is no aria-selectable, but if aria-selected is not undefined, selectability is assumed (by browser, and exposed to platform accessibility layer).

comment:3 Changed 10 years ago by Scott González

Milestone: TBD1.next

comment:4 Changed 7 years ago by Scott González

Component: [meta] ui.a11yui.selectable

comment:5 Changed 6 years ago by Scott González

Milestone: 1.next2.0.0

comment:6 Changed 6 years ago by petersendidit

Status: newopen
Summary: Add ARIA semantics to SelectableSelectable: Add ARIA semantics to Selectable

comment:7 Changed 5 years ago by tj.vantoll

#9634 is a duplicate of this ticket.

comment:8 Changed 5 years ago by tj.vantoll

Summary: Selectable: Add ARIA semantics to SelectableSelectable: Add ARIA semantics and keyboard handling

Per #9634 the widget should be focusable with the keyboard.

comment:9 Changed 5 years ago by dylanb

This will require more than simply implementing these attributes. Will require role="option" and role="listbox" as well as potentially aria-multiselectable.

Note: See TracTickets for help on using tickets.