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

Improve accessibility #26

Merged
merged 7 commits into from Sep 15, 2021
Merged

Improve accessibility #26

merged 7 commits into from Sep 15, 2021

Conversation

dqn
Copy link
Contributor

@dqn dqn commented Aug 26, 2021

Just a proposal

  • Add WAI-ARIA attributes
  • Close modal when Esc key is pressed
  • Trap focus within a modal

src/useOverlay.tsx Outdated Show resolved Hide resolved
Comment on lines 60 to 66
document.getElementById(rootElementId)?.setAttribute('aria-hidden', 'true');
document.body.addEventListener('keydown', handleKeydown);

return () => {
document.getElementById(rootElementId)?.removeAttribute('aria-hidden');
document.body.removeEventListener('keydown', handleKeydown);
};
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
document.getElementById(rootElementId)?.setAttribute('aria-hidden', 'true');
document.body.addEventListener('keydown', handleKeydown);
return () => {
document.getElementById(rootElementId)?.removeAttribute('aria-hidden');
document.body.removeEventListener('keydown', handleKeydown);
};
document.body.addEventListener('keydown', handleKeydown);
return () => {
document.body.removeEventListener('keydown', handleKeydown);
};

Since aria-hidden="true" will be added to the entire root to be mounted, and the modal itself will be hidden, this description should not be used for accessibility reasons.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ok, I'll remove it and remove rootElementId from the arguments of this hook.

Copy link
Member

@shibe97 shibe97 left a comment

Choose a reason for hiding this comment

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

Looks nice!

@shibe97
Copy link
Member

shibe97 commented Sep 8, 2021

@dqn Could you resolve the conflict?

@dqn
Copy link
Contributor Author

dqn commented Sep 11, 2021

@shibe97 It's done!

Copy link
Member

@shibe97 shibe97 left a comment

Choose a reason for hiding this comment

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

Thanks.

@shibe97 shibe97 merged commit 5c7e3f9 into microcmsio:master Sep 15, 2021
@dqn dqn deleted the accessibility branch September 15, 2021 13:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants