Drag-and-drop page editor is not keyboard-accessible

Bug #1262933 reported by Jono Mingard on 2013-12-20
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Jono Mingard

Bug Description

Currently the drag and drop page editor cannot be used with the keyboard. This is a major accessibility problem for people who rely on the keyboard and are unable to use a mouse easily.
There are two options for making this accessible: Implement keyboard drag-and-drop using ARIA and Javascript or display the non-js editor for screen reader users (and make that accessible)

It seems that ARIA drag-and-drop attributes are not well supported among most screen readers but a mostly-JS approach (like in http://dev.opera.com/articles/view/accessible-drag-and-drop/) can work well.

Affects latest master

(WCAG Level A)

Jono Mingard (mingard) wrote :

My current thinking is that we should do a JS-based solution rather than trying to modify the non-js editor, but not rely on ARIA attributes (since not only are they badly supported, they can stop parts of the JS from running properly in some screen readers).

IMO we should make the block types selectable with the keyboard and have a popup when Space/Enter is pressed which displays the places they can be put ("Row 1 Column 1", "Row 3 Column 2", etc), and have a button next to the Edit button for each content block (called "Move" or something) which brings up the same menu and allows the block to be moved. After these changes the rest of the editor should be quite accessible (once alt texts and suchlike are sorted out)

Aaron Wells (u-aaronw) wrote :

That sounds good to me. There are a couple of complications, though:

1. There can be up to 30 layout cells in a Page (6 rows with 5 columns each). So that might be a lot of options for the menu.

2. It's not enough just to choose a cell. If there are already blocks in a cell, you can put the new block above, below, or between them. Perhaps you could add new blocks to the bottom of the cell, and then add controls to move it up/down within the cell?

Jono Mingard (mingard) wrote :

True. We could implement it as a modal dialog (once Bug #1270987 is fixed) where pressing Enter/Spacebar on a block type opens a dialog where you can choose the cell and position within the cell.

This would probably involve adding a new pieforms element for the cell selector (which could look like the layout thumbnails in "Edit layout"). To choose the position within the cell I would just use a <select> with items such as 'Top' and 'After "About Me"'

Jono Mingard (mingard) on 2014-01-22
Changed in mahara:
assignee: nobody → Jono Mingard (mingard)
status: New → In Progress
Jono Mingard (mingard) on 2014-01-26
tags: added: wcag

Reviewed: https://reviews.mahara.org/2957
Committed: http://gitorious.org/mahara/mahara/commit/ed8785f1bb98e9f1f04ad0c7f78a7fa8a7fd45be
Submitter: Son Nguyen (<email address hidden>)
Branch: master

commit ed8785f1bb98e9f1f04ad0c7f78a7fa8a7fd45be
Author: Jono Mingard <email address hidden>
Date: Wed Jan 22 13:53:53 2014 +1300

Allow blocks to be added in the page editor using the keyboard (Bug #1262933)

Adds a dialog for adding and moving blocks, activated when the user pressed Space/Enter
with a blocktype focused, or activates the new "Move block" button. The user can select
which cell (row/column) to put the block in and where in the cell to place the new
The "Move block" button is hidden unless it gains keyboard focus meaning the interface isn't
any more cluttered for mouse users.

Change-Id: I9a3ced66c0947756f1f80b0dacff82de201c2142
Signed-off-by: Jono Mingard <email address hidden>

Son Nguyen (ngson2000) on 2014-02-06
Changed in mahara:
status: In Progress → Fix Committed
Changed in mahara:
milestone: none → 1.9.0
Robert Lyon (robertl-9) on 2014-04-22
Changed in mahara:
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

Related blueprints