[wp-trac] [WordPress Trac] #24048: Code Editors: Increase the usability of Code Editor's files list

[WordPress Trac]

#24048: Code Editors: Increase the usability of Code Editor's files list
-----------------------------------------------+---------------------------
 Reporter:  Daedalon                           |       Owner:
     Type:  enhancement                        |      Status:  new
 Priority:  normal                             |   Milestone:  4.9
Component:  Plugins                            |     Version:  3.5.1
 Severity:  normal                             |  Resolution:
 Keywords:  has-patch ui-feedback ux-feedback  |     Focuses:  ui,
                                               |  accessibility
-----------------------------------------------+---------------------------

Comment (by afercia):

 Quickly tested the patch, I'm sorry I have no time to go in depth but
 noticed a few things worth checking.

 Icons: I don't think we can use unicode characters directly in the CSS
 files. These should use the unicode escape sequence or, better, dashicons.
 See the dashicons `f139` and `f140`.
 For RTL: I think there's already a Grunt task that inverts `f139` to
 `f141` but worth checking.

 Regardless they're unicode or dashicons, screen readers tend to announce
 CSS generated content. VoiceOver announces "Right pointing triangle" and
 "Down pointing triangle", we should avoid this generating the CSS pseudo
 element inside a span that uses `aria-hidden="true"`, see also #40428.

 Coding standards, minor issues to address for example:
 `$('#templateside [role="tree"] [aria-expanded]').attr("aria-expanded",
 false);`
 WordPress uses single quotes and spaces inside parenthesis: `.attr( 'aria-
 expanded', 'false' )`
 Minor: HTML attributes are string, not boolean. Ideally, false and true
 should be `'false'` and `'true'` even if jQuery and browsers take care of
 this.

 As per the ARIA side, seems to me it is working nicely with Firefox and
 NVDA. Instead, it doesn't work as expected with Safari 11 and VoiceOver.
 To my understanding, Safari and VoiceOver don't fully support tree views,
 they announce them as "table" and "list box" on the W3C example, but here
 they announce the items as "Link" and this shouldn't happen.
 I've tried changing `role="none"` to `role="presentation"` and seems to me
 this pairs the behavior of the editor files list with the one of the W3C
 example. This sort of makes sense since the role `none` is new in ARIA 1.1
 and maybe not yet fully supported. Would you mind double checking and see
 if that makes any difference for you when using Safari and VoiceOver?

 Will attach a few screenshots to better illustrate.

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