Make Topics dropdown accessible for screenreaders

[lizzycederberg]

On the Topics page (and potentially others) the user is unable to tab to the select dropdown. Upon further investigation it just seems that the user can tab to it, but there is no visual indication or screen reader indication they are there, so using the arrow keys to navigate the collapsed listbox is not intuitive. Users should be able to select items from the dropdowns and maintain focus while on the page.

This is in reference to the main "Select a Topic" dropdown in the header

[lfrancis]

How it looks on Safari/Catalina with VoiceOver on, but when VoiceOver is off, then the select does indeed lack a focus indication on webkit browsers:

This is an important distinction, because mobility-challenged users may not need/want VoiceOver enabled. As to the asserted unintuitive aspect of keyboard control over the select, seems to me that following the example of Apple's Accessibility approach is likely the best way to go, which is what we are doing.

[matbrady]

@lizzycederberg @lfrancis the focus state should be addressed in #256.

Test Page

https://bia.test.drupalme.net/research/native-americans/bia/photos/topics

[lizzycederberg]

@lfrancis can you please validate these?

[lfrancis]

Hey @matbrady, we also need focus on the tooltip -- works in Chrome but not in Safari/FFX:

[lizzycederberg]

Looks good to me -- @lfrancis can you please confirm?

[lfrancis]

Technically the tooltip has a focus state but it sure is hard to see -- I overlooked it the first couple times. Can we change the outline color like we are doing with the select? This would make it both more obvious and consistent visually.

[lfrancis]

Looks like we slipped in a little something that affects the size of the select when it is focused:

[matbrady]

@lfrancis ah yep, this will be fixed with the latest commit related to #255

[lfrancis]

Confirmed addressed