Screen Recording (Ubuntu, Chrome):

Also tested in Firefox (Ubuntu), Safari (MacOS)

Finally fixed the issue on MacOS+Chrome

I'm ok with the idea behind the fix but when the new div gets focused the outline looks weird.

I would say we fix this as well before we merge this.

I'm ok with the idea behind the fix but when the new div gets focused the outline looks weird.

I would say we fix this as well before we merge this.

I made a few experiments, but none of them seems to be nice enough.

1. We could hide the outline - but then the user would be confused where did the focus go.
2. We could apply display: block; width: 100%;, but then the outline will be a black wide line, which is also weird, isn't it?

We cannot put the code contents into the div with tabindex, this will cause MacOS' Chrome read the code three times (as it will consider it a "group" - not sure why)

I'm ok with the idea behind the fix but when the new div gets focused the outline looks weird.
I would say we fix this as well before we merge this.

I made a few experiments, but none of them seems to be nice enough.

1. We could hide the outline - but then the user would be confused where did the focus go.
2. We could apply display: block; width: 100%;, but then the outline will be a black wide line, which is also weird, isn't it?

We cannot put the code contents into the div with tabindex, this will cause MacOS' Chrome read the code three times (as it will consider it a "group" - not sure why)

@anurbol visibility: hidden should fix the focus issue.

Unfortunately no, it prevents it from getting focus at all.

Can we try to make this new div have the width and height as the parent container and make use of z-index to move it behind the text elements.
Basically if somehow we can make the focus outline appear to be visible for the entire box will make it better.

Can we try to make this new div have the width and height as the parent container and make use of z-index to move it behind the text elements

I think this can't be done with CSS alone, but with the help of javascript. So it probably starts looking like an overkill.
Anyway, I'll try

@arisacoba a fix is made to make a text box with horizontal scrollbar to be able to scroll while using keyboard. When the element is focused it looks as below, is it ok to proceed with?

@amit-avit Done here. Tried to make it as simple as possible... still doesn't look very nice

@anurbol @amit-avit best to cross-post this concern with #accessibility-design on Slack if we haven't yet. They have the best knowledge of how this can be implemented properly

@anurbol @amit-avit best to cross-post this concern with #accessibility-design on Slack if we haven't yet. They have the best knowledge of how this can be implemented properly

Fair enough, created a thread https://github.slack.com/archives/C03RM57QL64/p1668668686952059
(I hope though we won't have to redo this stuff 🥲 )

Hi! Trying to review this using the instructions in the README but npm run develop errors out -- do you know if there's an updated way to view this locally, or a staging URL I can review? Thanks!

Hi! Trying to review this using the instructions in the README but npm run develop errors out -- do you know if there's an updated way to view this locally, or a staging URL I can review? Thanks!

@lindseywild You can make use of this preview URL : https://npm-f9a17b3f5d-15913497.drafts.github.io/, it has the changes that are made in this PR

Thank you for this! It's a lot better than what is currently there, which doesn't work at all, so I like it! I realize that this isn't entirely elegant due to the constraints of the third-party code. I was able to test this on Chrome with a keyboard, Safari with a keyboard + VoiceOver, and NVDA + Chrome. NVDA reads "blank" when tabbing to the code example, but I'm not sure if that can be easily fixed... It doesn't prevent the user from doing anything, it's just a little odd. To cover our bases, if you could open an issue in the third-party library stating that keyboard functionality doesn't work for scrollable boxes, that'd be great -- that will allow us to close the audit issue even with a few quirks. Thanks!

Awesome thank you