[wp-trac] [WordPress Trac] #33361: "Edit Comment" metabox header styling is inconsistent with others

[WordPress Trac]

#33361: "Edit Comment" metabox header styling is inconsistent with others
--------------------------+------------------------------------------------
 Reporter:                |       Owner:  rachelbaker
  johnjamesjacoby         |      Status:  accepted
     Type:  defect (bug)  |   Milestone:  4.4
 Priority:  normal        |     Version:
Component:  Comments      |  Resolution:
 Severity:  minor         |     Focuses:  ui, accessibility, administration
 Keywords:  has-patch     |
--------------------------+------------------------------------------------

Comment (by afercia):

 @johnjamesjacoby thanks for your in-depth analysis. That made me notice
 additional issues and inconsistencies :) For example, wondering why the
 first thing in the content is the "Author" box (maybe just for the initial
 focus?) while in all the other admin screens the Editor box is the first
 one, followed by additional meta boxes like Author, Publish, etc. By the
 way this issue is out of the scope of this ticket, should go in a separate
 one, but maybe we should look at the structure of this screen as a whole
 and see how the users flow can be improved.

 > My (vetoed) suggestion of adding the `screen-reader-text` class to the
 `legend` tag is not unheard of. It's used no less than 40 times in `wp-
 admin` already for settings (though not paired with header tags, they are
 paired with `th`'s)

 I think there's some consensus the Settings screens should be reviewed,
 they're not the best example in terms of semantics and accessibility.

 > Can you explain a bit about why this does not negatively impact other
 hidden fieldset legends in the same way, or why those are acceptable and
 this is not?

 It does impact other screens too :) We discussed this a bit on Slack a
 while ago, haven't made a plan though. Consider for example the screenshot
 below, with all styles disabled it's very evident all the duplicated and
 redundant information there. These are the legends paired with `th`'s you
 mentioned:

 [[Image(https://cldup.com/HdPirfFNql.png)]]

 Screen readers read out all this redundant stuff:

 [[Image(https://cldup.com/xnQoDKSPIx.png)]]

 The same redundancy happens when `<label>`'s are used inside table
 headers. Screen readers read them twice: 1. because of the th > td
 relationship 2. because of the label > form field association.

 I've applied your patch .02 and "Author" will be read out twice. I agree
 it's a minor thing but since we're on it why should we intentionally
 double this info and add noise for users? :)

 About the CSS part, I don't get what `class="hnld"` is meant for but maybe
 I'm missing something. Also, maybe we could remove the `<span>`'s?
 Finally, since now the main heading is a  `h1`, the Status heading should
 be a `h2`. See all the ongoing work related to the #a11y-headings tickets.

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