Improve Screen Reader support for BottomSheet component

[etoledom]

• There is no simple way to close the Bottom Sheet.
• Bonus: implement de z gesture to close the modal. (PR: Accessibility: Handle the iOS z-gesture to exit modals and block selection #926)
• Cells could be more friendly. (Reading better the content). (PR: Improve screen reader support on BottomSheet's cells. #935)
• Switch on cell should be activated from the cell itself. (PR: Improve screen reader support on BottomSheet's cells. #935)

[etoledom]

About There is no simple way to close the Bottom Sheet:

We were talking a few weeks ago about improving the Bottom Sheet experience regarding saving, canceling the action.

Currently the BottomSheets used for settings (Links and Images so far), can be dismissed by tapping outside of it or scroll it down. Both actions will automatically save the changes. This has some problems:

• There is no way to cancel and not apply the changes made.
• There is no easily visible way to save/close the bottom sheet.
• There is not Close element that a Screen Reader can scan and give the proper feedback to the user that it can close/save/cancel any changes.

I hope to open the discussion on how to improve this.

cc @iamthomasbishop @SergioEstevao @hypest @koke

[iamthomasbishop]

This has some problems:

In terms of an explicit "Close" button, I was on the fence about this, and decided to not include it unless absolutely necessary. However, in terms of screen readers, we should absolutely supply a mechanism to allow easy closing.

For some background, early iterations of the Sheets included a more "traditional" navigation bar at the top with actions, but after doing some competitive analysis and investigation, I decided against it for a couple reasons (tl;dr: consistency and guidelines):

• We're essentially following the Material guidelines for Bottom Sheets (also inline with our in-progress Design System), which are defined as "a supplementary surface that provides quick access to content that complements the screen’s primary content", and typically do not include save/cancel actions. If you look at examples on iOS (Pages/Numbers/Keynote, Maps, Google Docs, etc), this same thing applies. Also Gutenberg core's Advanced Block Settings inspector works this way :)

• We do supply a helpful "clear all settings" button, which isn't exactly a "cancel" but does allow an escape hatch of sorts

I'm open to suggestions and discussion, but this is some of the rationale. Personally, the thing I can most understand the case for is a "cancel" button of sorts, but I would advise against a save button on Sheets.

[etoledom]

I did an investigation on those apps, and how their bottom sheets perform with VoiceOver.

This is what I found:

The Google Docs case was super interesting, it has a hidden "dismiss menu" element at the left of the first visible element. A VoiceOver user can access to it via swiping left. It also support Z gesture to dismiss. But it's not accessible via exploring the UI with the finger.

This is the only one of the bottom sheets that implement a dismissal option in this way, so I believe it's not a standard. I can't say what is the most preferred way of VoiceOver users to explore (swiping or exploring with the finger).

This is a video that shows this more clearly.

I hope this can help to guide us 👍

[iamthomasbishop]

Thanks for the examples! I've always been a fan of Maps on iOS, but I do think their bottom sheets are a bit more advanced (and the logic that comes with it) than what we need. Up to this point (not saying we have to stick to it), my approach has been closest to the Google Docs example above, so I think that is our best starting point.

[designsimply]

Currently the BottomSheets used for settings (Links and Images so far), can be dismissed by tapping outside of it or scroll it down. Both actions will automatically save the changes. This has some problems:

This also came up in 13.5 beta testing and I am noting the feedback to add to the discussion:

Adding link to image block- The popup does not have an ‘OK’ or a ‘Cancel’ button, instead a ‘Clear all settings’ button. I had to press the Back button after adding the link, fearing that the changes would be lost.

^{cc @iamthomasbishop @ahmadbaig1, ref: p5T066-135-p2#comment-3726}

[SergioEstevao]

@iamthomasbishop @etoledom circling back to this issue did we got to any agreement for how to making the closing of the bottom sheet more accessible?

[etoledom]

I don't think we got an agreement. We did implement the Z gesture to close it with VoiceOver, but that's probably not enough. There's also the close without applying changes case that is not implemented, nor considered.