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

fix(SideNav): add screen size check for aria-hidden value #10087

Merged
merged 17 commits into from
Jan 27, 2022

Conversation

dakahn
Copy link
Contributor

@dakahn dakahn commented Nov 11, 2021

Closes #9895

The sidenav on screens greater than 1056px default to open (with the menu button hidden). The default expanded state is bugged (potentially in HeaderContainer which seems to expect isSideNavExpanded as a prop?). This adds a check that basically account for a screen width of larger than 1056 where the side nav is opened and not aria-hidden.

I consider this a stopgap while functional component refactors are happening to the UIShell and it's components. 🏄🏾

🎆 🎆 🎆 NOW FEATURING A USEMATCHMEDIA HOOK 🎆🎆 🎆

Testing / Reviewing

check that the aria hidden value on the

element inside header is properly set to false when sidenav is visible and true when it isn't 👍🏾

image

@dakahn dakahn requested a review from a team as a code owner November 11, 2021 02:43
@netlify
Copy link

netlify bot commented Nov 11, 2021

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: dff5dce

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/61f21a7397420b00075df9e6

😎 Browse the preview: https://deploy-preview-10087--carbon-react-next.netlify.app/

@netlify
Copy link

netlify bot commented Nov 11, 2021

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: dff5dce

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/61f21a735623c2000750fb69

😎 Browse the preview: https://deploy-preview-10087--carbon-elements.netlify.app

@netlify
Copy link

netlify bot commented Nov 11, 2021

✔️ Deploy Preview for carbon-components-react ready!

🔨 Explore the source changes: dff5dce

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/61f21a73c20bd8000861fcc1

😎 Browse the preview: https://deploy-preview-10087--carbon-components-react.netlify.app/

packages/react/src/components/UIShell/SideNav.js Outdated Show resolved Hide resolved
packages/react/src/components/UIShell/SideNav.js Outdated Show resolved Hide resolved
packages/react/src/internal/useMatchMedia.js Outdated Show resolved Hide resolved
packages/react/src/internal/useMatchMedia.js Outdated Show resolved Hide resolved
packages/react/src/internal/useMatchMedia.js Outdated Show resolved Hide resolved
packages/react/src/internal/useMatchMedia.js Show resolved Hide resolved
@jnm2377
Copy link
Contributor

jnm2377 commented Dec 6, 2021

@dakahn lmk when this is ready for review :)

dakahn and others added 3 commits January 7, 2022 17:44
Co-authored-by: Josh Black <josh@josh.black>
Co-authored-by: Josh Black <josh@josh.black>
Co-authored-by: Josh Black <josh@josh.black>
@dakahn
Copy link
Contributor Author

dakahn commented Jan 12, 2022

@joshblack pushed up some tests for that hook. I'm at a total loss for your second testing comment. Wouldn't testing the state is in sync be testing the onChange was calling properly for the hook?

also it seems like eslint jest have renamed some rules in a recent update. I'm getting this error when I commit
image

Which corresponds with this rule -- that it doesn't seem like i'm breaking, but I could just be missing something.

@joshblack
Copy link
Contributor

joshblack commented Jan 12, 2022

@dakahn let me know if you need help with the tests! Totally free this afternoon

@dakahn dakahn requested a review from jnm2377 January 12, 2022 23:23
Copy link
Contributor

@abbeyhrt abbeyhrt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! Just a small commented out console left :)

@kodiakhq kodiakhq bot merged commit 7c6a465 into carbon-design-system:main Jan 27, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[a11y]: Aria-hidden incorrectly set on sidebar
4 participants