[wp-trac] [WordPress Trac] #51580: Application Passwords: Accessibility Improvements

[WordPress Trac]

#51580: Application Passwords: Accessibility Improvements
------------------------------------+--------------------------------------
 Reporter:  georgestephanis         |       Owner:  georgestephanis
     Type:  defect (bug)            |      Status:  reopened
 Priority:  normal                  |   Milestone:  5.6
Component:  Login and Registration  |     Version:  trunk
 Severity:  normal                  |  Resolution:
 Keywords:  has-patch               |     Focuses:  accessibility, rest-api
------------------------------------+--------------------------------------

Comment (by afercia):

 Re: focus: I stand corrected: yes, focus is moved to the alert notice.
 It's just that it doesn't have a focus style so at a first glance I was
 confused. The tabindex attribute value should be -1 though a not 0.

 There is a focus loss when clicking the "Revoke" button though. The button
 gets removed together with the table row and focus is not managed. Of
 course, it happens also when there's only one password and on removal the
 whole table gets removed. In either cases, focus needs to be moved to a
 proper place, not sure what the best place is though.

 The readonly input field doesn't have an associated `<label>` element. As
 pet the accessibility coding standards, all input fields need to have a
 label associated with for/id attributes. See the sample code provided by
 @sabernhardt above.

 Regarding:

 > The notice is read multiple times, not sure how to fix this. Maybe
 remove role="alert" if focus is being placed on the notice?

 The double announcement actually depends on the browser / screen reader
 combination being used.  Setting focus will also bring the notice into
 view in case it isn't thus ensuring all visual users will see it. The
 alert role ensures screen readers will announce the notice. Using both
 focus and the alert role is the same technique already suggested and
 implemented in other places, see for example #47147 under "Remediation
 Guidance".

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/51580#comment:30>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform