fix: accessibility issue in tabs #1184

shrilakshmishastry · 2024-08-23T03:05:51Z

Issue:

FileTabs has given the role tab, but the tab accessibility pattern is not taken care.

Issues noticed:

Not highlighting the tab when the file name is focused
Not highlighting the focus state of the editor
cross icon or close button not keyboard accessible

Fixed:

basic tab accessibility pattern :
1. on the tab click to focus on the first tab item initially and on the previously focused tab in case it's accessed earlier
2. Managing Focus Within Components Using a Roving tabindex
3. highlighting the focus on the tab and editor by default outline of the browser when focused
on the focus of the tab, close CTA is visible and is keyboard accessible

Screen recording

Tab pattern implementation
https://github.com/user-attachments/assets/6221d6dd-1050-486c-adb6-9e2e6b1420f2

Editor accessibility
https://github.com/user-attachments/assets/7049baa6-762d-4015-85b6-21fd20a20f41

What kind of change does this pull request introduce?

Accessibility fix

Checklist

Documentation; N/A
Storybook (if applicable);
Tests;
Ready to be merged;

This fix partially #1173

codesandbox · 2024-08-23T03:05:54Z

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

vercel · 2024-08-23T03:05:56Z

@shrilakshmishastry is attempting to deploy a commit to the CodeSandbox Team on Vercel.

A member of the Team first needs to authorize it.

codesandbox-ci · 2024-08-23T03:06:33Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

…ver js

vercel · 2024-08-26T08:16:26Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sandpack-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 4, 2024 7:54am

sandpack-react/package.json

danilowoz · 2024-08-26T08:21:15Z

sandpack-react/src/components/CodeEditor/index.tsx

+        <div
+          aria-labelledby={`${activeFile}-tab`}
+          className={classNames("code-editor", [editorClassName])}
+          id={`${activeFile}-tab-panel`}


Considering that a page can contain multiple Sandpack instances with similar content, this ID will not be unique to the page. Is there any reason why you need an ID here? There is an alternative to generate unique identifier inside Sandpack

yes, this ID is used inside the FileTabs component, to add the aria-controls attribute.

sandpack/sandpack-react/src/components/FileTabs/index.tsx

Line 205 in e571870

aria-controls={`${filePath}-tab-panel`}

is there a way I can get a unique ID and pass it between FileTabs and CodeEditor?

One way I am thinking is to add a unique id with activeFile , what's your opinion ?

I just introduced a new hook (useSandpackId) to your branch and I think you could use it to generate ids

sandpack-react/src/components/FileTabs/index.tsx

shrilakshmishastry · 2024-08-27T13:24:54Z

Hey @danilowoz 👋 Thanks for reviewing !! Did you get a chance to try it out ?
I am not satisfied with how I handled the outline when the tab and code editor are focused , using the default browser outline. Please suggest how to improve this.

danilowoz · 2024-08-28T09:14:43Z

I'm a bit hesitant about adding a ring focus over the code editor, giving the following reasons:

There is already a visual focus indication in the component (active line), and I just improved to remove the style when there is no focus;
It might disturb the layout once the editor wasn't designed to contain borders except for the border that wrap everything
If your project really needs a more prominent focus indication, you can always implement it on your side by overwriting the default styles.

Let me know what you think :)

shrilakshmishastry · 2024-08-31T04:08:20Z

I'm a bit hesitant about adding a ring focus over the code editor, giving the following reasons:

There is already a visual focus indication in the component (active line), and I just improved to remove the style when there is no focus;

It might disturb the layout once the editor wasn't designed to contain borders except for the border that wrap everything

If your project really needs a more prominent focus indication, you can always implement it on your side by overwriting the default styles.

Let me know what you think :)

Hey 👋 ,

I tried focusing the editor using a tab but could not see the focus highlight on both dark and light modes.
focusing is outline right, it's not going to affect any layout , correct me here please
can you please explain to me the last point a bit more?

shrilakshmishastry · 2024-09-01T15:34:38Z

feat: add unique id to each tab and tab panel for aria-* attributes

I used useSandpackId() in this commit to generate unique values for the aria-labelledby and aria-controls attributes.
added back outline to the editor on focus

sandpack/sandpack-react/src/components/CodeEditor/styles.ts

Line 31 in a127706

outline: "$colors$accent auto 1px",

danilowoz · 2024-09-02T15:05:05Z

sandpack-react/src/components/CodeEditor/styles.ts

@@ -27,6  27,9 @@ export const editorClassName = css({
  [`.${placeholderClassName}`]: {
    padding: "$space$4 0",
  },
+  "&:focus-within": {
+    outline: "$colors$accent auto 1px",


@shrilakshmishastry, this can be implemented on your end, meaning inside the application that implements Sandpack, instead of adding a default style that might not be wanted by everyone. For a basic and generic experience, the editor already provides the necessary hint when it's focused, so I don't think adding such an opinionated style will be a good idea now.

For example, this can be added to your application:

.sp-code-editor:focus-within { outline: 1px auto red; }

hmm, got it 👍 make sense, I will revert this

reverted chore: remove focus-within added in codeEditor/styles

danilowoz · 2024-09-03T09:02:26Z

It looks good to me! But could you please check the Typescript job and fix the issues?

shrilakshmishastry · 2024-09-03T15:26:49Z

In the refactor: make activeFileUniqueId as optional paramater in FileTabs commit,

I have made activeFileUniqueId as optional. So it doesn't break the existing consumption
fixed the ts type issue, it was due to not passing this prop in codeviewer component
moved aria-* to div level in FIleTab, this is done as voice-over was not considering tab as in a series of tabs when it was added to button.

@danilowoz can you please re-review ?

fix: accessibility issue in tabs

4aec9cb

shrilakshmishastry added 2 commits August 23, 2024 09:07

refactor: use css to give outline to the tab when button is focused o…

e4ddc48

…ver js

chore: remove console.log

e571870

vercel bot deployed to Preview – sandpack-docs August 26, 2024 08:18 View deployment

danilowoz reviewed Aug 26, 2024

View reviewed changes

chore: remove unwanted color from FileTab

5109737

shrilakshmishastry requested a review from danilowoz August 28, 2024 04:46

danilowoz added 2 commits August 28, 2024 09:46

add sandpack id

3c88b04

tweak focus

435e26a

shrilakshmishastry mentioned this pull request Aug 31, 2024

feat: add playground AccessibleForAll/AccessibleWebDev#404

Closed

4 tasks

shrilakshmishastry added 2 commits September 1, 2024 20:55

feat: add unique id to each tab and tab panel for aria-* attributes

a127706

chore: revert back code editor stories changes

e2dbfbd

vercel bot deployed to Preview – sandpack-docs September 2, 2024 10:25 View deployment

danilowoz reviewed Sep 2, 2024

View reviewed changes

chore: remove focus-within added in codeEditor/styles

e26006e

shrilakshmishastry requested a review from danilowoz September 2, 2024 15:23

danilowoz previously approved these changes Sep 3, 2024

View reviewed changes

refactor: make activeFileUniqueId as optional paramater in FileTabs

b63d307

shrilakshmishastry dismissed danilowoz’s stale review via b63d307 September 3, 2024 15:21

danilowoz approved these changes Sep 4, 2024

View reviewed changes

vercel bot deployed to Preview – sandpack-docs September 4, 2024 07:54 View deployment

danilowoz merged commit 98af978 into codesandbox:main Sep 4, 2024
8 of 11 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: accessibility issue in tabs #1184

fix: accessibility issue in tabs #1184

shrilakshmishastry commented Aug 23, 2024

codesandbox bot commented Aug 23, 2024

vercel bot commented Aug 23, 2024

codesandbox-ci bot commented Aug 23, 2024 •

edited

Loading

vercel bot commented Aug 26, 2024 •

edited

Loading

danilowoz Aug 26, 2024

shrilakshmishastry Aug 27, 2024

danilowoz Aug 28, 2024

shrilakshmishastry commented Aug 27, 2024

danilowoz commented Aug 28, 2024

shrilakshmishastry commented Aug 31, 2024

shrilakshmishastry commented Sep 1, 2024

danilowoz Sep 2, 2024

shrilakshmishastry Sep 2, 2024

shrilakshmishastry Sep 2, 2024

shrilakshmishastry Sep 2, 2024

danilowoz commented Sep 3, 2024

shrilakshmishastry commented Sep 3, 2024

fix: accessibility issue in tabs #1184

fix: accessibility issue in tabs #1184

Conversation

shrilakshmishastry commented Aug 23, 2024

Issue:

Screen recording

What kind of change does this pull request introduce?

Checklist

codesandbox bot commented Aug 23, 2024

Review or Edit in CodeSandbox

vercel bot commented Aug 23, 2024

codesandbox-ci bot commented Aug 23, 2024 • edited Loading

vercel bot commented Aug 26, 2024 • edited Loading

danilowoz Aug 26, 2024

Choose a reason for hiding this comment

shrilakshmishastry Aug 27, 2024

Choose a reason for hiding this comment

danilowoz Aug 28, 2024

Choose a reason for hiding this comment

shrilakshmishastry commented Aug 27, 2024

danilowoz commented Aug 28, 2024

shrilakshmishastry commented Aug 31, 2024

shrilakshmishastry commented Sep 1, 2024

danilowoz Sep 2, 2024

Choose a reason for hiding this comment

shrilakshmishastry Sep 2, 2024

Choose a reason for hiding this comment

shrilakshmishastry Sep 2, 2024

Choose a reason for hiding this comment

shrilakshmishastry Sep 2, 2024

Choose a reason for hiding this comment

danilowoz commented Sep 3, 2024

shrilakshmishastry commented Sep 3, 2024

codesandbox-ci bot commented Aug 23, 2024 •

edited

Loading

vercel bot commented Aug 26, 2024 •

edited

Loading