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

Focus root node if focusable #57

Merged
merged 4 commits into from Oct 2, 2019

Conversation

@einarlove
Copy link
Contributor

commented Oct 2, 2019

It might not be prettified or TSLinted correctly, but it looks correct.

einarlove added 3 commits Oct 2, 2019
If you don't want a child node to be initially focused, you can make your root node be focusable instead.
@thebuilder

This comment has been minimized.

Copy link
Contributor

commented Oct 2, 2019

Hey - Can you explain in a bit more detail what this solves? 🤔

@einarlove

This comment has been minimized.

Copy link
Contributor Author

commented Oct 2, 2019

Now, useFocusTrap will traverse and find the first tabable child and focus it. Fine if thats what you want, but In my case, I want to trap the focus only. Therefore I make the container focusable—not tabable—and focus that instead.

Take an example: You want a dropdown visible if you click a button. On button click the focus should be on the dropdown as a whole, not the first element using tabIndex="-1" aria-role="list-box" aria-label="Menu" etc. But if the user tabs, the first element is read/focused and so on.

@thebuilder

This comment has been minimized.

Copy link
Contributor

commented Oct 2, 2019

Makes sense - Do you think you can make an example of it in the storybook?
So if there isn't specified a focusSelector in options, but the root can take focus (with tabIndex), then focus is assigned to that instead?

@einarlove

This comment has been minimized.

Copy link
Contributor Author

commented Oct 2, 2019

Makes sense - Do you think you can make an example of it in the storybook?
So if there isn't specified a focusSelector in options, but the root can take focus (with tabIndex), then focus is assigned to that instead?

Correct! As long as root is focusable by being HTMLAnchorElement, tabIndex etc.

@einarlove

This comment has been minimized.

Copy link
Contributor Author

commented Oct 2, 2019

I've added a story

@thebuilder thebuilder merged commit c2facdb into charlie-tango:master Oct 2, 2019
4 of 7 checks passed
4 of 7 checks passed
Header rules No header rules processed
Details
Pages changed 7 new files uploaded
Details
Redirect rules No redirect rules processed
Details
Mixed content No mixed content detected
Details
Travis CI - Pull Request Build Passed
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
deploy/netlify Deploy preview ready!
Details
@thebuilder

This comment has been minimized.

Copy link
Contributor

commented Oct 2, 2019

I'll make a release with this tomorrow. Thanks for adding it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.