A11y violation observed in smaller resolutions - scrollable region must have keyboard access

[SatyamSetia]

Describe the bug There are various code snippets in the app. These snippets become scrollable on smaller resolutions, if there is longer lines of code and since this code snippet is not focusable but scrollable will make it impossible for the keyboard user to perceive the content outside the visible scrollable region. Sharing a screenshot below for reference.

To Reproduce Steps to reproduce the behavior:

1. Go to https://accessibleweb.dev/images
2. Switch the device resolution where code snippets become scrollable (an example - 800x1040)

Expected behavior Since it is code snippet (text-like content), it can be broken into multiline text to avoid scrollable region.

Screenshots

[SatyamSetia]

Hey, @EmmaDawsonDev Just wanted to share my interest on working this bug fix. My proposal for the fix - Using css to break text in multi-line.

[EmmaDawsonDev]

Hi Satyam, the areas are programmed to become focusable when scrollable and this is how it behaves for me so I wonder if this is a false positive being picked up. I think sometimes if you resize the page to make the scroll appear/disappear it occasionally does this.

The code snippets are formatted this way for a reason. Adding css to break lines makes the code very difficult to read. It was like this previously and folks complained about the formatting.

[SatyamSetia]

@EmmaDawsonDev, you seems to be right. Code snippet is not focusable only when we change the resolution dynamically. Otherwise it seems to be working fine. Closing this issue since it is invalid.