Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storybook sidebar navigation: aria-expanded should be on button, not parent #18346

Closed
micahgodbolt opened this issue May 27, 2022 · 9 comments
Closed

Comments

@micahgodbolt
Copy link
Contributor

aria-expanded is meant to be used with button, or some other role. It is currently be added to the parent div with no role making the attribute ineffective.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded#associated_roles

Moving the aria-expanded to the button that does the expanding will provide better accessibility to those using screen readers.

image

@micahgodbolt
Copy link
Contributor Author

Looks like this is usually a button in the case of stories

image

@micahgodbolt
Copy link
Contributor Author

micahgodbolt commented May 27, 2022

Looks like the problem is right here

<RootNode
key={id}
id={id}
className="sidebar-subheading"
data-ref-id={refId}
data-item-id={item.id}
data-nodetype="root"
aria-expanded={isExpanded}
>
<CollapseButton
type="button"
data-action="collapse-root"
onClick={(event) => {
event.preventDefault();
setExpanded({ ids: [item.id], value: !isExpanded });

Line 155 should be moved down to the CollapseButton

@Daraphista
Copy link
Contributor

Hi, I can help out. Could you assign this issue to me?

@ajukadavid
Copy link

can i be assigned this issue?

@ghost
Copy link

ghost commented Jun 4, 2022

hahah im not competent but for what its w0rthl haha, it might help me personally

@yndue736

This comment was marked as abuse.

@shilman
Copy link
Member

shilman commented Jun 29, 2022

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.7 containing PR #18354 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

@shilman shilman closed this as completed Jun 29, 2022
@shilman
Copy link
Member

shilman commented Jul 26, 2022

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.10-alpha.0 containing PR #18354 that references this issue. Upgrade today to the @prerelease NPM tag to try it out!

npx sb upgrade --prerelease

@shilman
Copy link
Member

shilman commented Aug 4, 2022

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.10 containing PR #18354 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants