Example of Body Content Overflow cannot be scrolled with the keyboard

[williamjstanton]

🐛 Bug Report

A clear and concise description of what the bug is.

In the example of Body Content Overflow on the Canvas Kit design site, the overflow text cannot be scrolled with the keyboard only. This will prevent sighted users from accessing all of the overflow content.

To Reproduce

Steps to reproduce the behavior:

1. Navigate to the Canvas Kit Design Site => Components => Popups => Modal => Body Content Overflow
2. Active the "Open License" button
3. Observe: Keyboard focus is set to the 'X' close icon at the top of the modal,
4. Use the Tab key to focus the elements in the modal
5. Issue: the overflow text cannot be scrolled with the arrow keys.

Expected Behavior

A clear and concise description of what you expected to happen.

Users should be able to focus the overflow content and scroll it using the up and down arrow keys. This is for sighted users that want to only use a keyboard.

Actual Results

A clear and concise description of what actually happens

Overflow content in the modal dialog cannot be scrolled using the keyboard. Users are required to scroll with a mouse or trackpad to access content visually.

Browser (if applicable)

If this was a visual bug, what browser did you spot it on?

All of them.

Link to repl or repo (highly encouraged)

Please provide a reference to a repo or branch to help us reproduce this bug.

https://canvas.workdaydesign.com/components/popups/modal/#tab=web&heading=body-content-overflow

Include a screenshot of a visual bug

[williamjstanton]

Should be very straightforward to fix by adding tabIndex="0" on the <Modal.Body> component.