Angular and Angularjs grids should adhere to WAI-ARIA Authoring Practices for grids as much as possible

Bug #1816480 reported by Jane Sandberg on 2019-02-18
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Evergreen
Undecided
Unassigned

Bug Description

The ARIA grid design pattern describes some best practices and user expectations relating to grid widgets here: https://www.w3.org/TR/wai-aria-practices-1.1/#grid

There are a few aria roles, states, and properties that would be good to add to the current grids:
* The grid divs should have a "grid" role (https://www.w3.org/TR/wai-aria-1.1/#grid)
* The rows should have a "row" role
* The cells should have a "gridcell" role: https://www.w3.org/TR/wai-aria-1.1/#gridcell

There are also some keyboard interactions that would be really nice for users:
* If focus is in a particular grid, Ctrl + A selects all rows of that grid
* If focus is in a particular grid, Page Down goes to the next page of the grid
* If focus is in a particular grid, Page Up goes to the previous page of the grid
* Shift + Down Arrow: Extends selection one cell down.
* Shift + Up Arrow: Extends selection one cell Up.

Bill Erickson (berick) wrote :

Grabbing to update Angular grid.

Changed in evergreen:
status: New → Confirmed
assignee: nobody → Bill Erickson (berick)
Bill Erickson (berick) wrote :

Fixes for Angular grid pushed:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/berick/lp1816480-ang-grid-aria

From the commit:

* Apply "grid", "row", "columnheader", and "gridcell" role attributes.
* Page-Down goes to next page
* Page-Up goes to previous page
* Shift-UpArrow extends selection one row up (spanning pages).
* Shift-DownArrow extends selection one row down (spanning pages).
* Shift-Arrow controls support reverse navigation for back-tracking to de-select certain rows.
** E.g. shift-up 3 rows then shift-down 1 will leave 2 rows selected.
* Control-A now selects all rows in the page.
** For consistency with the select-all checkbox, only rows in the current page are selected.
** Note we could add an option to extend the selection to all rows, but it would require pre-fetching all of the data, similar to how grid printing pre-fetches.
* Adds a bit of text in the grid toolbar (left of first button) indicating how many rows are currently selected.

Changed in evergreen:
assignee: Bill Erickson (berick) → nobody
tags: added: pullrequest
Changed in evergreen:
milestone: none → 3.2.5
Changed in evergreen:
milestone: 3.2.5 → 3.2.6
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers