In edit mode it is pretty hard to actually activate the tray for a certain block while tabbing.
We should improve the accessibility.

Current situation

Steps to take to activate the tray:
1) Activate edit mode
2) Tab through contextual links buttons
3) Press enter to show the contextual links
4) Tab until you hit 'Quick edit'.
5) Press enter on the 'Quick edit' link.

Proposed solution by @dmsmidt in #7

Even better would be that in edit mode, when tabbing (through the blocks) you actually tab through two links per block:
the first being Quick edit, the second being the contextual links link, that gives you the option to show all other edit links that navigate away from the page (advanced links).
This would also be more in line with what you do as a non-disable person, because they can just click the dotted outlined block directly.
In non edit mode, it would be oke to show the 'Quick edit' link again in the contextual links list per block.

Original description
From Wim's comment in #164 in issue #2753941-164: [Experimental] Create Outside In module MVP to provide block configuration in Off-Canvas tray and expand site edit mode:

Accessibility: This does not yet meet the accessibility gate! Tabbing should jump from one editable to the next one, but it just does the "normal" tabbing. This should use the TabbingManager to constrain tabbing to just the contextual links, just like Contextual Links module does. But also… and perhaps more worrisome… this is then overriding that portion of Contextual Links? Why?

Comments

webchick created an issue. See original summary.

nod_’s picture

Issue tags: +JavaScript
tedbow’s picture

Component: quickedit.module » outside_in.module
crasx’s picture

Issue summary: View changes
crasx’s picture

This probably needs some clarification.
Should the tabbing only be restricted to contextual links during "editing mode"? When I first enter editing mode my tabbing is indeed restricted to context links, but this may be changed by #2784577: Outside-in Accessibility: Ensure the tray is easily found in screen readers
When I refresh the page I am still in "editing" mode but I am still able to tab among the admin menu and my tabbing is not restricted to context links. Is this part the bug?

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

dmsmidt’s picture

Version: 8.3.x-dev » 8.4.x-dev

Just tested this with the ChromeVox screenreader while tabbing.

I can confirm tabbing is now restricted to contextual links when in editing mode as planned.

However it took some time to figure out how to open the inside out dialog. And it is troublesome to do.

Steps to take:
1) Activate edit mode
2) Tab through contextual links buttons
3) Press enter to show the contextual links
4) Tab until you hit 'Quick edit'.
5) Press enter on the 'Quick edit' link.

For someone using a screen reader this is not at all a 'quick' edit.

I wanted to quickly configure some block settings, so in edit mode the first thing I did was choosing the 'Configure block' link.
However both that link as any other link in the contextual links list (that is not 'Quick edit') navigates away from the current page.
That I didn't pick the 'quick edit' link is probably because I was already known with the Quick edit module which is different from Outside in.
So the link name is bit confusing for site builders, but for end users it seems ok!

The easiest (small) improvement I see here is: making sure that the 'Quick edit' option is always the first item in the contextual links. The second improvement would be to indicate somehow which links navigate away from the current page.

Even better would be that in edit mode, when tabbing (through the blocks) you actually tab through two links per block:
the first being Quick edit, the second being the contextual links link, that gives you the option to show all other edit links that navigate away from the page (advanced links).
This would also be more in line with what you do as a non-disable person, because they can just click the dotted outlined block directly.
In non edit mode, it would be oke to show the 'Quick edit' link again in the contextual links list per block.

Since this issue is marked as 'must have' I think we could close this issue and use my input for a separate issue which proposes some ux/u11y improvements.

Off topic: it seems from a quick test that Quick Edit (not the link but the module) is not at all accessible.

dmsmidt’s picture

Title: Outside-in Accessibility: Fix tabbing (remove override of contextual links' accessibility features?) » Outside-in Accessibility: Improve tabbing
Priority: Major » Normal
Issue summary: View changes
Related issues: +#2784567: List "Quick edit" before "Configure" in contextual links while in Edit mode

So, #2784567: List "Quick edit" before "Configure" in contextual links while in Edit mode actually fixes the most pressing concerns.
We will now use this issue to improve tabbing even more.