Modernize tabledrag accessibility.

Problem/Motivation

Our draggable tables (tabledrag.js) hasn't changed much since it was introduced in D7. Let's look at ways to make tabledrag's accessibility better.

Currently tabledrag doesn't really work for screen readers, and we kept the fallback method with row weights. It's worth looking at ways to modernize this, so screen reader users can have a more equivalent experience.

Proposed resolution

A number of more modern approaches to accessible drag and drop are in 📌 Research accessibility of drag-and-drop grid interfaces. Active . Some improvements we could make include:

• Make it understandable for screen reader users. Currently the drag-handles are keyboard-operable but the outcome of moving it isn't yet perceivable or understandable. If the outcome of using the drag-handles can be conveyed to screen reader users, they will have a more equivalent experience to sighted users.
• Use different icons to visually convey what kind of movements are allowed. A vertical 2-arrow icon for a simple up/down order, versus a 4-arrow icon for situations where rows can be ordered as nested trees. A vertical 2-arrow icon is available in the Libricons icon set used by Classy/Bartik/Seven.
• #2912737: Table Drag showing visual feedback when move was forbidden →
• Make the show row weights alternative method work better for situations where there are more than 31 rows. See Problems with weight range in book module. Quick-win idea: use a HTML5 number input instead of the limited range dropdown. (Note, we already have this in MediaLibraryWidget.)
• 🐛 Make the show/hide row weights button more informative for assistive tech users. Needs work

Remaining tasks

Use child issues for implementation.

• Add a styling hook for the 2-arrow vs 4-arrow icons. NEEDS CHILD ISSUE.
• Include the 2-arrow (up/down) vs. 4-arrow (nested) distinction in the Claro theme. #3032365: Table drag style update → .
• Convert the "-15 to 15" row weights to a HTML5 number field. NEEDS CHILD ISSUE.

User interface changes

Yes, modest design changes may be involved to help convey some aspects of tabledrag behaviour visually.
Non-visual improvements for assistive tech are also proposed, which may involve new translatable strings.