WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#33757 closed defect (bug) (fixed)

#a11y-headings - the wp_comment_reply() h5 headings

Reported by: afercia Owned by: afercia
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.3
Component: Comments Keywords: has-patch commit
Focuses: ui, accessibility Cc:
PR Number:

Description (last modified by afercia)

These headings appear in several places: in the Comments screen, in the Edit post screen and in the Dashboard:

https://cldup.com/3JTLa8Ffcs.png

Depending on the screen, they should use a different heading level. By the way, wondering if they should be headings in the first place. Maybe we should simplify and just make them paragraphs. Thoughts?

#a11y-headings

Attachments (3)

33757.patch (1.6 KB) - added by joedolson 4 years ago.
Proposed patch using fieldset/legend
33757.2.patch (1.8 KB) - added by joedolson 4 years ago.
Also adds label to comment editor textarea
33757.3.patch (5.5 KB) - added by afercia 4 years ago.

Download all attachments as: .zip

Change History (21)

#1 @afercia
4 years ago

  • Description modified (diff)

#2 @afercia
4 years ago

  • Milestone changed from Awaiting Review to 4.4

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 years ago

#4 @joedolson
4 years ago

This seems like an appropriate place for a fieldset/legend, actually. What do you think?

@joedolson
4 years ago

Proposed patch using fieldset/legend

#5 @afercia
4 years ago

Agreed! Also, just noticed the textarea is missing a label.

#6 @joedolson
4 years ago

Good point - I'll address that, too.

@joedolson
4 years ago

Also adds label to comment editor textarea

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.


4 years ago

#8 follow-up: @wonderboymusic
4 years ago

  • Owner set to afercia
  • Status changed from new to assigned

why the style="display: none"?

#9 @wonderboymusic
4 years ago

  • Keywords has-patch added

#10 @joedolson
4 years ago

That was pre-existing; I didn't change it. It seems pretty inelegant, though - we certainly could change that now, while we're working in this area.

#11 in reply to: ↑ 8 ; follow-up: @afercia
4 years ago

Replying to wonderboymusic:

why the style="display: none"?

As far as I see, first added here: [9098] I guess the best person to ask is @azaozz :)

#12 in reply to: ↑ 11 @azaozz
4 years ago

Replying to afercia:

why the style="display: none"?

You mean for the initially hidden elements? That's from over 7 years ago... Guessing it's to match how jQuery hides/shows elements. Can be changed to add and remove class="hidden" if needed but frankly I'd like to rewrite all of it. It's been looong time :)

#13 @afercia
4 years ago

frankly I'd like to rewrite all of it. It's been looong time :)

Thanks @azaozz :) then let's keep it simple and focus just on the scope of this ticket.

#14 @afercia
4 years ago

  • Focuses ui added
  • Keywords dev-feedback added

Refreshing the patch after [34241] and noticed that having two legend inside a fieldset is invalid code. Reworking the patch but wondering if there's any reason there's no "title" for the Quick Edit form. I mean, there's a Reply to Comment text when replying, a Add new Comment text when adding a new comment but no Edit Comment when Quick Editing.
Looks like it would be simple to add something like in the screenshot below (compared with the other "titles"):

https://cldup.com/OPJInI1qmC.png

This ticket was mentioned in Slack in #design by afercia. View the logs.


4 years ago

@afercia
4 years ago

#16 @afercia
4 years ago

  • Keywords commit added; dev-feedback removed

As discussed on Slack the refreshed patch adds a "Edit Comment" legend before the Comments Quick Edit form to pair it with "Reply to Comment" and "Add new Comment" and also moves the Name, Email, and URL fields after the Comment textarea.

Maybe these forms would need some major CSS adjustments (alignments, more white space, etc.) but I've tried to keep the CSS changes to a bare minimum. Visual improvements should preferably go in a separate ticket.

Screenshots before and after:

https://cldup.com/_3O5EUyWis.png

https://cldup.com/4WtOBsz9fr.png

This ticket was mentioned in Slack in #core by afercia. View the logs.


4 years ago

#18 @afercia
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 34743:

In wp_comment_reply() change the H5 headings in fieldset legends for better accessibility.

Also, add a "Edit Comment" legend before the Quick Edit form to pair it with "Reply to Comment" and "Add new Comment" and move the Name, Email, and URL fields after the Comment textarea.

Props joedolson, afercia.

Fixes #33757.

Note: See TracTickets for help on using tickets.