Modal issues with bx--visually-hidden

Environment

Browser: Chrome (probably any) Automated testing tool and ruleset: N/A, but IBM DAP surfaces the issue through color contrast rules Assistive technology used to verify: None & JAWS

Detailed description

What version of the Carbon Design System are you using? See https://react.carbondesignsystem.com/iframe.html?id=modal--default

What’s the issue? Content within the modal marked as bx–visually-hidden is visible to ATs and copyable text, whether the modal is hidden or not.

Steps to reproduce the issue

1. Open https://react.carbondesignsystem.com/iframe.html?id=modal--default
2. Select all text
3. Copy it
4. Paste it into a text editor Note: JAWS sees the same thing, whereas VoiceOver does not handle visibility correctly, so it doesn’t announce it.

Result is:

Focus sentinel Label Modal heading

Please see ModalWrapper for more examples and demo of the functionality.

Secondary Button Primary Button Focus sentinel

The example doesn’t give you a way to hide the modal, but if you do hide the modal, and repeat the steps above, you see:

Focus sentinel Focus sentinel

Note: The focus sentinel doesn’t make a lot of sense to me either, but simply highlights the issue of any content marked with bx–visually-hidden

Additional information

There are somewhat two issues here:

1. What is the point of “Focus Sentinel”
2. The visibility of the content within the modal after the modal is close. The modal is hidden via CSS visibility: hidden and the bx–visually-hidden uses visibility: visible. For CSS visibility, a visible element within a hidden element is visible. (see https://jakearchibald.com/2014/visible-undoes-hidden/ for an example). display:none is better at hiding all children, but that might affect your animation? It’s the safest bet. However, even if you don’t go that route, for this particular situation you could do something to override the visibility: visible within a modal, like .modal-hidden .bx--visually-hidden { visibility: hidden } (you don’t currently have a .modal-hidden class as far as I can tell though.

[elizabethsjudd]

Thanks @asudoh. This looks to be resolved @tombrunet. I copied WH’s HTML in to the Netlify demo and ran DAP without any color contrast violations.

[asudoh]

Uh Netlify for vanilla has been killed… I got https://vanilla.carbondesignsystem.com/ back up and running with latest master.