WordPress.org

Making WordPress.org

Opened 13 months ago

Closed 8 months ago

#2292 closed defect (fixed)

read more/read less button on new plugin directory labeling

Reported by: joedolson Owned by: ocean90
Milestone: Plugin Directory v3.0 Priority: normal
Component: Plugin Directory Keywords: has-patch commit
Cc:

Description

Read more and read less buttons in the plugin directory don't provide sufficient context governing what you're opening or closing. They use the aria-controls attribute to indicate what they control, but support for this is extremely limited by assistive technology.

I recommend using either aria-label or aria-describedby to provide context for the button.

Attachments (1)

2292.patch (3.5 KB) - added by SergeyBiryukov 8 months ago.

Download all attachments as: .zip

Change History (6)

#1 @joedolson
13 months ago

  • Component changed from General to Plugin Directory
  • Keywords needs-patch added

#2 @obenland
13 months ago

Sounds good! Could help me with a more concrete example of what it should look like?

#3 @joedolson
13 months ago

For example,

<button
	type="button"
	class="button-link section-toggle"
	aria-controls="description"
	aria-expanded="false"
	data-show-less="Show less"
	data-read-more="Read more"
        aria-describedby="description-header"
>Read more</button>

along with

<div
	id="description"
			class="section read-more"
	>
	<h2 id="description-header">Description</h2>

That would be the DRY solution, since it doesn't require additional strings.

#4 @SergeyBiryukov
8 months ago

  • Keywords has-patch commit added; needs-patch removed
  • Milestone set to Plugin Directory v3.0

2292.patch implements comment:3.

#5 @ocean90
8 months ago

  • Owner set to ocean90
  • Resolution set to fixed
  • Status changed from new to closed

In 5394:

Plugin Directory: Provide more context for "Read more" and "Show less" buttons to improve accessibility.

Props SergeyBiryukov, joedolson.
Fixes #2292.

Note: See TracTickets for help on using tickets.