Carbon: AVT 2 - Modal React Component - keyboard navigation improvements

[snidersd]

Environment

macOS Mojave version 10.14.2
Chrome version 72.0.3626.96 (Official Build) (64-bit)
Carbon v10

Detailed Description

After the modal opens the default focus is not on the primary button.
A mouse click outside the modal closes the modal.

Steps to reproduce the issue

1. Click the button to open the modal. Focus is on the close button "X".
2. Click outside the modal and the modal closes.

Expected Result

1. Initial focus should be on the primary button.
2. Focus should remain in the modal until it is closed.

See ARIA Authoring Practices Guidelines Modal Design pattern.

[emyarod]

After the modal opens the default focus is not on the primary button

as a workaround this is configurable with the selectorPrimaryFocus prop, but I can modify the default behavior

Focus should remain in the modal until it is closed

for this point, I just want to double check with design about this UX change first

[dakahn]

@snidersd looking the authoring practices for Modal they suggest initial focus be placed on the _first focusable element_ unless you have a good reason not to. 🤔. Further can't there be issues with NVDA when the default first focusable element comes _after_ the dialogue's main content?

reference here at section "Overly verbose NVDA announcements".

[dakahn]

Also @emyarod I assigned this to you. Figured that's what you meant by "...I can modify the default behavior". If not, let me know and this can be delegated. 👍🏽

[emyarod]

1. Initial focus should be on the primary button.
2. Focus should remain in the modal until it is closed.

the first point is only a docs change if anything, since the component already support changing the default primary focus element. I'm leaning towards this being a non issue

the second point is not actionable until we have confirmation from design

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale[bot]]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[snidersd]

@dakahn This issue should remain open.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale[bot]]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[snidersd]

@dakahn This issue should remain open.

[emyarod]

Initial focus should be on the primary button.

so it seems this point is a non issue according to the modal dialog guidelines, and we added a prop for modifying the first focused element a year prior to this ticket

Focus should remain in the modal until it is closed.

to clarify, is this about focus trap behavior (which is already implemented) or is it explicitly about the default behavior of closing the modal upon clicking outside the dialog box?

[emyarod]

cc @snidersd @dakahn

[snidersd]

@emyarod @dakahn The WCAG 2.1 exampleand the ARIA example do not allow the user to close the modal by clicking outside the modal, but examples of a date picker dialog allows the modal to close when there is a mouse click outside the modal. IMO the handling of a mouse click to close the modal is based on the purpose of the modal, but going by the WCAG and ARIA examples, the default should be to keep the focus inside the modal and allow the content author to change the interaction if needed.

[emyarod]

just want to confirm with @carbon-design-system/design that this is a UX change we want to make (not closing modals by default when clicking outside of the modal). currently we close the modal by default but only in ComposedModals I believe. our default Modal component does not have this behavior

[aagonzales]

How a modal is closed depends on the modal type. We have it documented on the modal usage page. https://www.carbondesignsystem.com/components/modal/usage#passive-modal

Passive modals are the only modal type that should have the function to close by clicking outside the of modal window.

[emyarod]

thanks for the clarification @aagonzales! @snidersd @dakahn is that sufficient for WCAG 2.1 compliance? if so then I believe no further action is necessary for our current modal implementations

[dakahn]

Sounds like we're good here. 👍