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
3.3
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
Jane Sandberg (sandbej) on 2019-05-21
Changed in evergreen:
assignee: nobody → Jane Sandberg (sandbej)
Changed in evergreen:
milestone: 3.2.6 → 3.2.7
Jane Sandberg (sandbej) wrote :

This is fantastic, Bill! All this keyboard functionality is really nice to have.

I've rebased, corrected a small merge conflict, and signed off on your commit here: user/sandbergja/lp1816480-ang-grid-aria (Link: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sandbergja/lp1816480-ang-grid-aria)

I've done the same for a 3.2-compatible branch here: user/sandbergja/lp1816480-ang-grid-aria-32 (Link: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sandbergja/lp1816480-ang-grid-aria-32)

Changed in evergreen:
assignee: Jane Sandberg (sandbej) → nobody
tags: added: signedoff
Jane Sandberg (sandbej) wrote :

...actually, ignore that 3.2-compatible branch, since it doesn't compile. I'll correct that later this week.

Changed in evergreen:
assignee: nobody → Jane Sandberg (sandbej)
Jane Sandberg (sandbej) wrote :

All right, I added a small follow-up commit to the 3.2-compatible branch, so that should work now.

Changed in evergreen:
assignee: Jane Sandberg (sandbej) → nobody
Bill Erickson (berick) on 2019-05-24
Changed in evergreen:
assignee: nobody → Bill Erickson (berick)
Bill Erickson (berick) wrote :

Thanks, Jane. 3.2 branch merged to 3.2, other branch merged to 3.3 and master.

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

Marking as fix committed. If we want to pursue similar changes to AngJS grids, I propose we handle that via a new LP.

Changed in evergreen:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers