Table Accessibility when table has horizontal scrolling - Ensure that scrollable region has keyboard access

[LukaszJaro]

Description

When inserting tables using the blocker editor, many of them will end up with horizontal scrolling, depending on width and amount of columns, which is fine and expected in the many themes I use.

The accessibility issue I am being flagged on is when there is no keyboard focus on the table which has horizontal scrolling, more info here https://dequeuniversity.com/rules/axe/4.3/scrollable-region-focusable and here https://www.w3.org/WAI/standards-guidelines/act/rules/scrollable-element-keyboard-accessible-0ssw9k/

I'm specifically referring to front-end of the site but it may be an issue on editor side as well. This is not specific to tables but tables happen to more commonly receive horizontal focus. Vertical scrolling would be an issue as well.

Bugs have been filed in chrome https://bugs.chromium.org/p/chromium/issues/detail?id=585413, but some arguments on if browser should really handle this like firefox does.

Craft CMS also dealt with this craftcms/cms#7236

May have some relation to #8401

Potential solution: https://marcus.io/blog/accessible-overflow

Step-by-step reproduction instructions

1. Insert block table
2. Add columns with content until horizontal scrolling appears. Table can be put in small column to enhance effect.
3. Publish and view on front-end
4. Tab with keyboard on chrome or edge and watch as table with horizontal scrolling is skipped

Alternative, follow above but on Firefox to see descried behavior.

Screenshots, screen recording, code snippet

Keyboard user can't focus on this table and scroll:

Environment info

• Any theme is impacted unless they are using custom solution like adding tabindex or focusable element inside the table.
• Impacts chrome and edge, firefox actually handles this and allows keyboard focus scrolling.
• I currently can't test on Safari.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[LukaszJaro]

Of course, we don't want to make the table container focusable unless its contents overflow. Otherwise we're adding a tab stop to the focus order which doesn't do anything. In my opinion, that would be a fail under 2.4.3 Focus Order. Giving keyboard users elements to focus which don't actually do anything is confusing and obstructive.

https://inclusive-components.design/data-tables/#goingresponsive
https://inclusive-components.design/data-tables/#onlyfocusablewherescrollable