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.

Sign up for GitHub

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

Jump to bottom

<Dropdown> is not accessible by keyboard #648

Closed
tulup-conner opened this issue Mar 4, 2023 · 0 comments · Fixed by #840
Closed

<Dropdown> is not accessible by keyboard #648

tulup-conner opened this issue Mar 4, 2023 · 0 comments · Fixed by #840
Labels
a11y Let's make things accessible. 🚀 enhancement New feature or request

Comments

@tulup-conner
Copy link
Collaborator

Describe the bug
<Dropdown>s should gain focus, so that the next Tab is the first element in the dropdown.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://flowbite-react.com/dropdown
  2. Tab to a Dropdown and hit Enter to expand
  3. Notice you cannot tab or use keyboard to navigate dropdown items
@tulup-conner tulup-conner added 🐛 bug Something isn't working confirmed This bug was confirmed a11y Let's make things accessible. 🚀 enhancement New feature or request help wanted Extra attention is needed and removed 🐛 bug Something isn't working confirmed This bug was confirmed labels Mar 4, 2023
@ChrisCoastal ChrisCoastal mentioned this issue Mar 18, 2023
Closed
@tulup-conner tulup-conner removed the help wanted Extra attention is needed label May 4, 2023
@nigellima nigellima mentioned this issue Jul 3, 2023
Closed
nigellima added a commit to gistia/flowbite-react that referenced this issue Jul 4, 2023
@nigellima
feat(dropdown.tsx): enabled Dropdown to be accessible by keyboard
9601d8d 
Now the Dropdownn component is accessible by keyboard. It also adds the support to disable the
trigger button. Also the dismiss on item click is fixed

fix themesberg#648. fix themesberg#793. fix themesberg#539

---------

Co-authored-by: Fatemeh Paghar <paghar.fatemeh@outlook.com>
nigellima added a commit to gistia/flowbite-react that referenced this issue Jul 4, 2023
@nigellima
feat(dropdown.tsx): enabled Dropdown to be accessible by keyboard
cad60c3 
Now the Dropdown component is accessible by keyboard. Also the dismiss on item click is fixed

fix themesberg#648. fix themesberg#793
@nigellima nigellima mentioned this issue Jul 4, 2023
Merged
12 tasks
nigellima added a commit to gistia/flowbite-react that referenced this issue Jul 6, 2023
@nigellima
feat(dropdown.tsx): enabled Dropdown to be accessible by keyboard
537fa0c 
Now the Dropdown component is accessible by keyboard. Also the dismiss on item click is fixed

fix themesberg#648. fix themesberg#793
rluders pushed a commit that referenced this issue Jul 6, 2023
@nigellima
feat(dropdown.tsx): Dropdown Accessibility (#840)
65b13e7 
* feat(button.tsx): created BaseButton component

This component is responsible to handle the logic of creating the button element based on the custom or default tag name

* feat(dropdown.tsx): enabled Dropdown to be accessible by keyboard

Now the Dropdown component is accessible by keyboard. Also the dismiss on item click is fixed

fix #648. fix #793

* feat(dropdown.tsx): removed div wrapper around trigger button

* feat(dropdown.tsx): moved renderTrigger function to Trigger

clone element resulted from renderTrigger and attach the ref and a11y props to it

* test(dropdown.tsx): updated and added more tests

Resolution for dependency nwsapi was added in order to fix an issue in the tababble package

* refact(floating.tsx): passed arrowRef to useBaseFloating custom hook

* fix(floating.tsx): readded focus interaction

* test(dropdown.tsx): added a delay in one of the test cases

* docs(dropdown.tsx): added stories and documentation section

* refact(dropdown.tsx): removed mergeWrapperClassName utility fn

* feat(dropdown.tsx): added theme customization support for menuitem
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a11y Let's make things accessible. 🚀 enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(dropdown.tsx): Dropdown Accessibility gistia/flowbite-react
1 participant
@tulup-conner