In narrow window sizes, New Topic button has no ARIA description

Bug
1

Resize your browser window to be slightly less than 850px wide. The “+ New Topic” button will collapse to a + button.

Using a screen reader like macOS VoiceOver, select the button. (I’ve also reproduced this in JAWS on Windows with Firefox.)

Expected: The collapsed button should have an ARIA description, explaining that this is a New Topic button

Actual: The collapsed button has no description. The screen reader just says, “button.”

50%20PM
Screen Shot 2019-02-04 at 7.45.50 PM.jpg3840×2400 1.75 MB

7 Likes
2

Note that this does not impact iOS VoiceOver, because on iOS, the New Topic button doesn’t collapse; the navigation collapses into a drop-down menu instead.

3 Likes
3

@dan can you add this to your list?

5 Likes
4

We’ve been mapping the title attribute to aria-label and it looks like macOS’s VoiceOver ignores it.

What I’ve done is to map the label attribute (which is the visible text) to the aria-label attribute. A quick search shows up that 268 d-buttons have labels and only 69 have a titles, so other parts of the interface will also be improved. :blush:

https://github.com/discourse/discourse/commit/31ffcf989ce63e451baaed7deb61bf3e3126f197

8 Likes