Modal, Vanilla: AVT 2 issue: Keyboard users can't scroll static content when it overflows

Environment

Operating system

Mac

Browser

All

Automated testing tool and ruleset

n/a

Assistive technology used to verify

Keyboard

Detailed description

What version of the Carbon Design System are you using?

v10.3.2

What did you expect to happen?

I would be able to focus the content container so that I could use my arrow keys to scroll the content

What happened instead?

I was not able to focus the container that had overflowing content so I was not able to read it

What WCAG 2.1 checkpoint does the issue violate?

https://www.ibm.com/able/guidelines/ci162/keyboard.html

Steps to reproduce the issue

Using only a keyboard

1. navigate within a modal that has overflowing content
2. notice you can never focus the content, making it so you can’t scroll it unless you are using a mouse

Please create a reduced test case in CodeSandbox

Includes the HTML fix: https://codesandbox.io/embed/modal-overflow-content-srskh

Additional information

• Need to add tabindex=0 to the content container so that it is focusable. This should be done only when the content overflows for the best experiences (dynamically via JS).
• Need input from @carbon-design-system/design around what the focus style for the content container should be

[elizabethsjudd]

@dakahn this is the styling (which were just merged in to master) that was approved for design: https://github.com/carbon-design-system/carbon/issues/3261#issuecomment-507864039 and having it always on just means that if you are tabbing within a modal, you will always be able to highlight the content even if it’s not scrollable.

[elizabethsjudd]

@carbon-design-system/developers if you want to assign this to me I can take a look at it in the next couple of weeks