read more/read less button on new plugin directory labeling

[joedolson]

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.

[obenland]

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

[joedolson]

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.

[SergeyBiryukov]

2292.patch​ implements comment:3.

[ocean90]

In 5394:

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

Props SergeyBiryukov, joedolson.
Fixes #2292.