Semantic-ui-react: Dropdown: accessibility problem (screen readers)

[Sole-Valero]

Description

If you use Dropdown passing the items using options, it is keyboard accessible but with a screen reader the options are not read aloud as you move through them.

Steps

Reach a dropdowns with keyboard, and uses arrows keys to move through options

Expected Result

When you move through options, options are read aloud

Actual Result

Options are not read aloud

Version

0.70.0

Testcase

e.g. https://react.semantic-ui.com/modules/dropdown#dropdown-example-inline

Contribution

I can contribute patching it modifying the Semantic-UI-React/src/modules/Dropdown/Dropdown.js, in function renderText = () => (line 1028),
adding the following aria labels to the redered div (when className='text'):
role='alert' aria-live='polite'

[layershifter]

@Sole-Valero PRs are welcome, will be glad to see your contributions :+1:

[layershifter]

Also please write why proposed behavior is correct, I'm not familiar with aria attributes

[Sole-Valero]

I'm on it (PR)

[Sole-Valero]

In the Dropdown element, you use a div area to display the text corresponding to the selected item. If you don't use role='alert', screen readers don't notice when the text changes, so it doesn't read it again to the users...and users don't know which option is selected...

[Sole-Valero]

An interesting article about accessibility and react:
https://facebook.github.io/react/docs/accessibility.html

[layershifter]

@Sole-Valero Thanks for clarification :+1:

[Sole-Valero]

@layershifter I can't check my changes...I run $npm run docs , but it gives me :

[12:46:29] Starting 'serve:docs'... [12:46:29] 'serve:docs' errored after 101 ms [12:46:29] Error: listen EADDRINUSE 127.0.0.1:8080 at Object.exports._errnoException (util.js:1026:11) at exports._exceptionWithHostPort (util.js:1049:20) at Server.setupListenHandle [as _listen2] (net.js:1305:14) at listenInCluster (net.js:1353:12) at doListen (net.js:1479:7) at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:84:16) at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:100:10) [12:46:29] 'docs' errored after 35 s

My node version is v8.0.0
My npm version is 5.04
It seems an error creating the port to listen....no?

[layershifter]

Seems that something has already listening your 8080 port.

[devarshipant]

@Sole-Valero -- we have a similar implementation with aria-live polite and role alert using 'semantic react,' but both screen readers (JAWS 18 and NVDA 2017) fail to speak the selected list item (see attached). Screen reader will only speak the label 'Search for cases by' because of the aria-labelledby reference, but not the selected item (Name, as shown in the screenshot).

Do you have any suggestions to make the widget accessible?

I am not sure using aria-live = polite and role = alert is an effective solution here.

A few things might fix it:

1. Use labelwith _for_ attribute.

2. Use inputwith appropriate type attribute with a matching _ID_.

3. Appropriate styles.

If ARIA must be used and the look and feel needs to be preserved, we can do the following:

1. Use aria-active-descendant and update its value to the ID of the focused listbox item.

2. Use buttonelement with aria-haspopup = listbox.

3. Use tabindex = -1 on the UL to allow arrow key navigation and register events onkeydown.

See a working example at https://codepen.io/devpant/pen/wpVPpL that works with screen readers.