Problem/Motivation

There is a visually-hidden text input for editing the machine name, in between the "Edit" button and the "Description" text area.

Pressing the Edit button reveals the "Machine-readable name" text input field, by removing a visually-hidden CSS class from a wrapper <div>. The problem is that when the machine-readable name field is visually hidden, it still exists in the tab order for the page.

Steps to reproduce

You can experience the problem anywhere that we use a "machine-readable name" field. For example:

Visit "Add content type" at admin/structure/types/add.

  1. Type a name (e.g. "Book Review") for the content type in the "Name" field. While you do this, the text "Machine name: book_review [edit]" appears nearby.
  2. While you still have keyboard focus inside the "Name" field, press tab. It is not focus moves to the [Edit] button, which gains an underline style.
  3. Press tab again. It is not visually clear where focus has moved to. THIS IS THE BUG. Focus is on a text field for the machine name, which is visually-hidden but still in the keyboard tabbing order.
  4. Press tab again. Focus will move to the "Description" text area.

Tip: the FireFocus add-on for Firefox is a handy tool for tracking focus around the DOM, even when elements are visually hidden.

Proposed resolution

We can fix this by keeping the macine-name text field out of the tabbing order unless the "[Edit]" button is pressed.

Instead of using our .visually-hidden CSS style to conceal the field, we should be removing it from the tabbing order and accessibility tree completely, using CSS display: none.

Drupal 8 already has some CSS utility styles for this. Propose we try "hidden" class instead of "visually-hidden" class in machine-name.js, lines 53 and 112.

Remaining tasks

  • Patch.
  • Manual testing, with keyboard-only
  • Manual testing with a screen-reader.

User interface changes

No change to the UI design as such. This is an accessibility improvement, to make the existing interface more robust.

API changes

None proposed.

Data model changes

None.

Original report by cortezj

"Visual focus disappears between user interface elements. As an example within the “Add comment type” screen, after entering data in the “Label” required field and pressing Tab, user is navigated to a dynamically appearing “Edit” links. Pressing the Tab key to navigate away from the “Edit” link causes the focus to disappear. However, pressing the Tab key once more brings the focus to the next field, “Description” text box.

The defect exists in IE 11 and Google Chrome Version 55.0.2883.87 m.

Expected result: An indication of focus is expected to be visually present at all times so that a user can discern their location within the application.

Reference: Section 508, Part 1194.21, Paragraph (c).

Notes:
• This defect also exists elsewhere within the application.
• This is a medium severity defect as the user needs to only press Tab once to bring focus back into the following field and can discern their location."

Comments

cortezj created an issue. See original summary.

kershme’s picture

Title: 508 Compliance Issue - Visual Focus » 508 Compliance Issue - Visual focus disappears between user interface elements
Version: 8.2.4 » 8.3.x-dev
Assigned: cortezj » Unassigned
Issue tags: +accessibility, +508 Compliance
Parent issue: » #2852732: [meta] Fix 508 compliance issues
mgifford’s picture

I don't know if this is possible at this time. I believe the behavior you are describing is happening because a link is listed as hidden or invisible. The browser at this time will still navigate to an invisible element and I am unaware of any pattern or best practice that overrides this.

I agree it's annoying.

andrewmacpherson’s picture

Thanks cortezj + kershme, I managed to replicate this.

There is a visually-hidden text input for editing the machine name, in between the "Edit" button and the "Description" text area.

Pressing the Edit button reveals the "Machine-readable name" text input field, by removing a visually-hidden CSS class from a wrapper <div>. The problem is that when the machine-readable name field is visually hidden, it still exists in the tab order for the page.

We can fix this. Instead of using our .visually-hidden CSS style to conceal the field, we should be removing it from the tabbing order and accessibility tree completely, using CSS display: none.

Drupal 8 already has some CSS utility styles for this. We just need to use .hidden instead of .visually-hidden.

andrewmacpherson’s picture

Issue tags: +JavaScript

I propose we try "hidden" class instead of "visually-hidden" class in machine-name.js, lines 53 and 112.

andrewmacpherson’s picture

Component: browser system » javascript
andrewmacpherson’s picture

Title: 508 Compliance Issue - Visual focus disappears between user interface elements » Machine-name field is not effectively hidden from keyboard and screen reader users.

This mainly a problem for sighted keyboard-only users who can focus the machine-name input, but not see it on the
screen.

It also means that the machine-name field is presented to screen reader users, to whom it is announced.

andrewmacpherson’s picture

Issue summary: View changes

Updating issue summary, for whoever works on fixing this. It's a good introductory issue for learning about keyboard accessibility.

andrewmacpherson’s picture

Issue summary: View changes

minor issue summary edit.

andrewmacpherson’s picture

Issue summary: View changes
andrewmacpherson’s picture

Issue summary: View changes
andrewmacpherson’s picture

Issue summary: View changes
andrewmacpherson’s picture

Issue tags: +keyboard focus
andrewmacpherson’s picture

Issue summary: View changes
brenv’s picture

Status: Active » Needs review
FileSize
979 bytes

Patch in core/misc/machine-name.js changing "visually-hidden" to "hidden"

Status: Needs review » Needs work

The last submitted patch, 15: machine-name-accessibility-2852724-15.patch, failed testing.

Jo Fitzgerald’s picture

Status: Needs work » Needs review
FileSize
974 bytes
1.91 KB

Address test failure.

droplet’s picture

This is designed for screen reader I think. So that they able to read the machine name change? After patching, it required Drupal.announce to speak it out.

Status: Needs review » Needs work

The last submitted patch, 17: machine-name-accessibility-2852724-17.patch, failed testing.

Jo Fitzgerald’s picture

Status: Needs work » Needs review
FileSize
1.77 KB
2.85 KB

Having problems with my local test environment so I'm just gonna throw this one out there.

droplet’s picture

Completely hidden elements should be tested with \Zumba\Mink\Driver\PhantomJSDriver::isVisible

droplet’s picture

Status: Needs review » Needs work
himanshu-dixit’s picture

Status: Needs work » Needs review

@droplet Not too sure if this should be done. Have you read this comment

     // Validate the machine name field is hidden. Elements are visually hidden
     // using positioning, isVisible() will therefore not work.
droplet’s picture

With current patch, the comment is wrong. Needs a fix on it.

But again. @see my comment on #18. I think that needs a review and further tweaks and new tests.