feat(dropdown.tsx): Dropdown Accessibility #840

nigellima · 2023-07-04T03:55:24Z

Description

This PR enables the Dropdown.tsx component to be navigated by keyboard, improves the Dropdown.Item component to be rendered using as prop, and fixes the dismiss on click and disabled trigger issues.

Fixes #648. Fixes #793 . Fixes #539

The package resolution added in package.json was necessary due to some errors being thrown in the tests when using FloatingFocusManager component. See: focus-trap/focus-trap-react#986

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
This change contains documentation update - PENDING

How Has This Been Tested?

TBD

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
Any dependent changes have been merged and published in downstream modules
I have checked my code and corrected any misspellings

vercel · 2023-07-04T03:55:28Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 6, 2023 3:34pm

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

Now the Dropdown component is accessible by keyboard. Also the dismiss on item click is fixed fix themesberg#648. fix themesberg#793

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

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

codecov · 2023-07-06T05:51:14Z

Codecov Report

Patch coverage: 99.73% and project coverage change: -0.02 ⚠️

Comparison is base (7461173) 99.54% compared to head (6f4418b) 99.53%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #840      +/-   ##
==========================================
- Coverage   99.54%   99.53%   -0.02%     
==========================================
  Files         163      165       +2     
  Lines        6621     6823     +202     
  Branches      401      414      +13     
==========================================
+ Hits         6591     6791     +200     
- Misses         30       32       +2

Impacted Files	Coverage Δ
src/components/Dropdown/Dropdown.tsx	`99.22% <99.41%> (-0.78%)`	⬇️
src/components/Button/Button.tsx	`100.00% <100.00%> (ø)`
src/components/Button/ButtonBase.tsx	`100.00% <100.00%> (ø)`
src/components/Button/theme.ts	`100.00% <100.00%> (ø)`
src/components/Carousel/Carousel.tsx	`99.02% <100.00%> (+0.06%)`	⬆️
src/components/DarkThemeToggle/DarkThemeToggle.tsx	`100.00% <100.00%> (ø)`
src/components/Dropdown/DropdownItem.tsx	`100.00% <100.00%> (ø)`
src/components/Dropdown/theme.ts	`100.00% <100.00%> (ø)`
src/components/Floating/Floating.tsx	`100.00% <100.00%> (ø)`
src/components/Modal/theme.ts	`100.00% <100.00%> (ø)`
... and 6 more

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

rluders

Wow! Really nice, @nigellima. I added just a few comments, but in general, it looks great.

src/helpers/floating.ts

package.json

src/components/Dropdown/DropdownItem.tsx

src/components/Dropdown/Dropdown.tsx

+ theme.floating.base,
+ theme.floating.animation,
+ 'duration-100',
+ !open && theme.floating.hidden,


rluders

Thank you, @nigellima.

See themesberg/flowbite-react#840 for details. Signed-off-by: smnws <117300309+smnws@users.noreply.github.com>

tulup-conner · 2023-07-12T02:13:30Z

This is another fantastic PR, thank you very much!

maxlibin · 2023-07-26T07:57:15Z

In light of the changes made in this link: https://github.com/themesberg/flowbite-react/pull/840/files#diff-32fa9ddaf531f010c646834b9023bf97df1cd80d6de82762a56bc99514594f83R238, it appears that everything within the dropdown is now contained in an <ul> tag. Previously, I could incorporate a form complete with input fields inside the dropdown; however, that functionality no longer seems operational. Is this an intentional modification?

Additionally, I found some documentation here: https://github.com/themesberg/flowbite-react/pull/840/files#diff-d5c7e7428127c9af056fda02409bfef933507c13fa5dad102ee8dc33415b3c55R94. It suggests that I can use as="span". However, this suggestion raises a question for me: Are we now inserting a span element within the ul? To me, this implementation feels unusual.

Please provide clarification if my understanding of these changes is mistaken. I appreciate your guidance 🙏.

rluders · 2023-07-26T08:26:26Z

The Dropdown children will be always a Dropdown.Item, the component that you can "morph" is the Trigger, which is outside the ul and the Dropdown.Item's button that is inside the li. So... Unless I'm not seeing something here, I don't see any issue with this implementation. And yes, the ul > li structure was desired.

maxlibin · 2023-07-26T09:31:25Z

thanks for clarification

nigellima marked this pull request as draft July 4, 2023 03:55

nigellima changed the title ~~feat(dropdow.tsx): Dropdown Accessibility~~ feat(dropdown.tsx): Dropdown Accessibility Jul 4, 2023

vercel bot temporarily deployed to Preview July 4, 2023 03:56 Inactive

nigellima added 5 commits July 5, 2023 23:42

feat(button.tsx): created BaseButton component

1edb5ae

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

537fa0c

Now the Dropdown component is accessible by keyboard. Also the dismiss on item click is fixed fix themesberg#648. fix themesberg#793

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

4a6e7c0

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

af57dee

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

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

3210072

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

nigellima force-pushed the feat/dropdown-a11y branch from cad60c3 to 3210072 Compare July 6, 2023 04:48

vercel bot temporarily deployed to Preview July 6, 2023 04:51 Inactive

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

34da6de

vercel bot temporarily deployed to Preview July 6, 2023 05:01 Inactive

fix(floating.tsx): readded focus interaction

1c81fce

vercel bot temporarily deployed to Preview July 6, 2023 05:48 Inactive

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

dc9ed5f

vercel bot temporarily deployed to Preview July 6, 2023 06:01 Inactive

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

78958f1

nigellima marked this pull request as ready for review July 6, 2023 06:15

vercel bot temporarily deployed to Preview July 6, 2023 06:16 Inactive

rluders requested changes Jul 6, 2023

View reviewed changes

src/helpers/floating.ts Outdated Show resolved Hide resolved

package.json Show resolved Hide resolved

src/components/Dropdown/DropdownItem.tsx Outdated Show resolved Hide resolved

src/components/Dropdown/DropdownItem.tsx Show resolved Hide resolved

refact(dropdown.tsx): removed mergeWrapperClassName utility fn

68e06a1

nigellima requested a review from rluders July 6, 2023 14:00

vercel bot temporarily deployed to Preview July 6, 2023 14:00 Inactive

github-advanced-security bot found potential problems Jul 6, 2023

View reviewed changes

src/components/Dropdown/Dropdown.tsx

theme.floating.base,

theme.floating.animation,

'duration-100',

!open && theme.floating.hidden,

Check warning

Code scanning / CodeQL

Useless conditional Warning

This negation always evaluates to false.

feat(dropdown.tsx): added theme customization support for menuitem

6f4418b

vercel bot temporarily deployed to Preview July 6, 2023 15:34 Inactive

rluders approved these changes Jul 6, 2023

View reviewed changes

rluders merged commit 65b13e7 into themesberg:main Jul 6, 2023
6 checks passed

nigellima deleted the feat/dropdown-a11y branch July 6, 2023 16:30

This was referenced Jul 6, 2023

fix(dropdown): close dropdown onClickOutside #640

Closed

Dropdown Menu does not close after outside click #527

Closed

Disabled dropdown still opens the dropdown items list #844

Closed

Add support to Menu icon to Dropdown #554

Closed

smnws mentioned this pull request Jul 11, 2023

fix: bump flowbite-react version to 0.4.11 to fix dropdown menu bug amosproj/amos2023ss04-kubernetes-inventory-taker#209

Merged

This was referenced Jul 16, 2023

feat(dropdown): add disabled to dropdown #727

Closed

WIP: Update Dropdown and Floating components #683

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dropdown.tsx): Dropdown Accessibility #840

feat(dropdown.tsx): Dropdown Accessibility #840

nigellima commented Jul 4, 2023 •

edited

Loading

vercel bot commented Jul 4, 2023 •

edited

Loading

codecov bot commented Jul 6, 2023 •

edited

Loading

rluders left a comment

rluders left a comment

tulup-conner commented Jul 12, 2023

maxlibin commented Jul 26, 2023 •

edited

Loading

rluders commented Jul 26, 2023

maxlibin commented Jul 26, 2023

feat(dropdown.tsx): Dropdown Accessibility #840

feat(dropdown.tsx): Dropdown Accessibility #840

Conversation

nigellima commented Jul 4, 2023 • edited Loading

Description

Type of change

How Has This Been Tested?

Checklist:

vercel bot commented Jul 4, 2023 • edited Loading

codecov bot commented Jul 6, 2023 • edited Loading

Codecov Report

rluders left a comment

Choose a reason for hiding this comment

rluders left a comment

Choose a reason for hiding this comment

tulup-conner commented Jul 12, 2023

maxlibin commented Jul 26, 2023 • edited Loading

rluders commented Jul 26, 2023

maxlibin commented Jul 26, 2023

nigellima commented Jul 4, 2023 •

edited

Loading

vercel bot commented Jul 4, 2023 •

edited

Loading

codecov bot commented Jul 6, 2023 •

edited

Loading

maxlibin commented Jul 26, 2023 •

edited

Loading