Improve accessibility on DevHub

[DrewAPicture]

The accessibility of DevHub is lacking in a lot of ways. Let's see if we can raise the bar a bit. Let's use this as a broad tracking ticket for various small changes. If there are more widespread needs, new tickets can be created.

• #1820 – Use a table to display changelog data

[drewapicture]

In 3657:

developer.wordpress.org: Add a skip link for screen reader users to skip to the content area.

The skip link is only initially displayed to screen readers but can be exposed when directly focused, making it available to all keyboard users.

See #1819.

[DrewAPicture]

Related: Opened #1820 to cover converting the changelog to a tabular data table.

[DrewAPicture]

Note, the stylesheet still needs to be bumped following [3657].

[keesiemeijer]

Add screen reader text to voting buttons

[keesiemeijer]

1819.patch​ adds basic screen reader texts to the voting buttons. These are empty elements that use the title attribute to describe the element.

It also adds a skip skip link to go directly to the vote content.

[drewapicture]

In 3663:

developer.wordpress.org: Revert the unnecessary global .screen-reader-text styles introduced in [3657].

They're already adequately covered under the .devhub-wrap parent.

See #1819.

[drewapicture]

In 3664:

developer.wordpress.org: Add a 'Skip to note content' link to each user contributed note for the benefit of screen reader and keyboard users.

Note: While skip links are displayed during hover, active, and focus states, they are all absolutely positioned in the top left of the document which can result in their visibility falling outside the current viewport depending on scroll position.

Props keesiemeijer.
See #1819.

[drewapicture]

In 3665:

developer.wordpress.org: Include descriptive text for the benefit of screen reader users when up- or down-vote arrows or vote totals are focused within individual user contributed notes.

Props keesiemeijer.
See #1819.

[keesiemeijer]

Display skip links inside the note during hover, active and focus states

[keesiemeijer]

Thanks for the note, I didn't think of that. I hope the above patch solves it. Another thing we could do is add alternative text to the avatar image.

[drewapicture]

In 3668:

developer.wordpress.org: Display changelog data in a table, ordered newest-to-oldest.

See #1819. See #1820.

[keesiemeijer]

Add a notification for screen readers after voting on a user contributed note

[obenland]

In 6400:

DevHub: Add a notification for screen readers after voting on a user contributed note

Props keesiemeijer.
Fixes #1819.