Modal: Focus close button on open. Fallback to wrapping container div if no close button

[jcjuett]

https://design-system-react-co-pr-2004.herokuapp.com/?selectedKind=SLDSModal&selectedStory=Modal%20with%20Custom%20Parent%20Node&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

Issue: Screen readers read all lines of text as "clickable", sometimes reading multiple "clickable" before reading the content

Potential cause: Most likely a click handler is higher in the DOM (maybe the close button?) and everything inside this becomes clickable as well.

Possible solutions: Is it possible to wrap the click event in a clickable event that is not the parent for the other child elements that are reading as clickable? Please see this (older) WebAIM thread that has a long discussion of this type of issue for other potential solutions (https://webaim.org/discussion/mail_thread?thread=7693)

[interactivellama]

Is this a side-effect of the initially focused element on Modal loading is the invisible container element that then reads all of the Modal contents?

[jcjuett]

It may be. I suspect the screen reader identifies the focus and then reads all of the content as interactive. What do you think?

[interactivellama]

All the content is grouped in a tabIndex=0 div.

[jcjuett]

Yep--that's the problem I think. How can we move the content out from this div? Or can we?

[interactivellama]

We could remove the tabIndex of the div and focus on the close button if the close button is present, but if it's not there, then we will have to fallback to this div hack. I think close buttons are present on most modals at our company, so I am not worried about the edge case.

[jcjuett]

Yes, our modals do have close buttons. I don't know of any that don't. So, could we move focus to the close button instead of the entire div contents?

[interactivellama]

Yes. I agree.