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.
- 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.
- 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.
- 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.
- 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.
As a result of the change proposed here, the hidden machine-name field is no longer picked up by screen readers unless the Machine name: ... [edit] is clicked. In order to improve accessibility, we should add aria-label="Edit machine name" to this button. This will result in a screen reader describing this button as "Edit machine name, button" instead of the current "Edit, button".
Remaining tasks
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."
Also reported by findleys in
#2933550: 508 Compliance - Add Menu Page - Visual Focus Disappears →
.