Problem/Motivation

The issue #1874664: Introduce toolbar level "Edit" mode that shows all contextual links attempts to reconcile local tasks (tabs) and in-place editing actions introduced to contextual links.

We want this UI to be accessible to keyboard navigation. Much of the accessibility work for this feature requires management of page element tabbing orders and informing aural UI users of changes to the default page navigation.

Proposed resolution

Drupal already has tabbing management in the overlay module. This patch builds off of #1913086-2: Generalize the overlay tabbing management into a utility library. This patch moves the tabbing management out of overlay in to a library file. By doing this, both overlay and contextual modules can use the utility to manage their custom tabbing orders.

In addition to changing tabbing order, an aural user needs to be informed through audio queues of page element navigation changes. We will do that with an aria-live element.

Remaining tasks

Propose a working patch.

User interface changes

Users who navigate with a keyboard and rely on auditory queues will have a richer experience.

API changes

None.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jessebeach’s picture

Status: Active » Needs work
Issue tags: +Accessibility
FileSize
5.53 KB

I cleaved the accessibility code already present in #1874664-91: Introduce toolbar level "Edit" mode that shows all contextual links out of that patch and proposed #1874664-93: Introduce toolbar level "Edit" mode that shows all contextual links instead.

The changes we need to make to put in the UI I think we need require some changes to overlay. I proposed those changes in #1913086-2: Generalize the overlay tabbing management into a utility library. This patch builds off those changes. So in order to test it, you must apply the following patches first, in this order:

  1. http://drupal.org/files/pencils-1874664-93.patch
  2. http://drupal.org/files/tabbing-1913086-2.patch

Then the patch in this issue. This patch utilizes the newly introduced Drupal.TabbingManager class to control the tabbing order on the page when edit mode is toggled. When edit mode is active, toggling moves between the contextual link triggers. The previous tabbing order is restored when edit mode is disabled.

Next steps

  • Drupal.TabbingManager needs more work to handle stacked tabbing contexts. What I mean by this is, when a user clicks on the quick edit link of a contextual link set, the tabbing should be constrained to the editable fields. When an editable field is clicked, the tabbing should be constrained to the in-place editing dialog. Backing out of this path should reinstate the tabbing order of the previous UI state.
  • The UI needs more auditory clues of what is being focused and acted on i.e. information about the item the contextual links are associated with.

I will post information about how to demo this work using simplytest.me in the following comment.

jessebeach’s picture

The latest changes can (always) be tested at simplytest.me with the 8.x-1.x branch.

mgifford’s picture

Sounds great! We still need to "add a patch" and plunk in https://drupal.org/files/pencils-a11y-1913214-1.patch though, right?

jessebeach’s picture

mgifford, I'm not sure what you mean in #3.

mgifford’s picture

Sorry for the confusion. I just wanted to clarify that the Spark branch doesn't already include the pencils patch in #1 above.

Wim Leers’s picture

#5: Aha, that helps :) You were referring to simplytest.me's "add a patch" interface :)

You shouldn't have to do that, since it's already in Spark 8.x-1.x: http://drupalcode.org/project/spark.git/commit/501316d — about 8 hours before you made the comment in #3.

mgifford’s picture

Ok, there are some issues with Spark's inline editing without a mouse for sure.

It seems that you can get under the top dialog box using tab.

I also can't seem to enable the editor without clicking in the body. There doesn't seem a way to get focus within the body. Once you're there it seems reasonable but getting there without a mouse is still a problem.

jessebeach’s picture

Sorry mgifford! I had intended for this next step in #1 to convey that the fields cannot yet be reached by tabbing:

Drupal.TabbingManager needs more work to handle stacked tabbing contexts. What I mean by this is, when a user clicks on the quick edit link of a contextual link set, the tabbing should be constrained to the editable fields. When an editable field is clicked, the tabbing should be constrained to the in-place editing dialog. Backing out of this path should reinstate the tabbing order of the previous UI state.

I got far enough along with this patch in the first pass to tab between the contextual link triggers. The next step is to move from a contextual link "quick edit" option to the fields available when quick edit is enabled. When a field is selected, the tabbing context would then need to move to the dialog that contains the edit UI.

Sorry for the confusion. This code was a bit tricky to get working this far. It's still a work in progress. I wanted to get what I had posted since it functions in the simplest of terms and gives us a hint at the final direction I wanted to verify first.

Wim Leers’s picture

Issue tags: +in-place editing, +Spark

.

mgifford’s picture

Sounds good Jesse. Thanks for the clarification.

jessebeach’s picture

Rerolled on D8 HEAD (298db7a05b1a6a4f181cc000af36f6a650a707df).

mgifford’s picture

Status: Needs work » Needs review

Go bot.

Wim Leers’s picture

Status: Needs review » Needs work

As per #1: this still needs work before it's in a reviewable state :)

Unless Jesse magically finds time to work on this today, I'll be working on it tomorrow.

mgifford’s picture

Sorry Wim. I just like seeing green bars. Forgot about #1.

Wim Leers’s picture

Hah, I'm the same :) No worries!

mgifford’s picture

Status: Needs work » Needs review
Issue tags: -Accessibility, -in-place editing, -Spark

#11: pencils-a11y-1913214-11.patch queued for re-testing.

Status: Needs review » Needs work

The last submitted patch, pencils-a11y-1913214-11.patch, failed testing.

Wim Leers’s picture

Issue summary: View changes
Status: Needs work » Closed (fixed)
Issue tags: +Spark