DSD-1830: updating zindex in the FeedbackBox component

EdwinGuzman commented 1 month ago

Fixes JIRA ticket DSD-1830

This PR does the following:

This issue was found in a Research Catalog page. In mobile, the MultiSelect components displayed above the FeedbackBox button and drawer components.

This updates the z-index of the button but also Chakra's Drawer component. Their component, unfortunately, does not accept a class name or style props so the z-index rule is added as a global rule. This still has the same effect.
This is difficult to test in Storybook because we don't have examples where we can easily add a FeedbackBox button on MultiSelects that makes sense. So perhaps a Turbine example is better.

How has this been tested?

Locally and in Research Catalog.

Issues fixed: Button Screenshot 2024-09-10 at 11 10 45 AM

Drawer

Accessibility concerns or updates

-

Accessibility Checklist

[x] Checked Storybook's "Accessibility" tab for color contrast and other issues.
[x] The feature works with keyboard inputs including tabbing back and forward and pressing space, enter, arrow, and esc keys.
[x] For hidden text or when aria-live is used, a screenreader was used to verify the text is read.
[x] For features that involve UI updates and focusing on DOM refs, focus management was reviewed.
[x] The feature works when the page is zoomed in to 200% and 400%.

Open Questions

-

Checklist:

[x] I have updated the Storybook documentation and changelog accordingly.
[x] I have added relevant accessibility documentation for this pull request.
[x] All new and existing tests passed.

Front End Review:

[ ] Review the Vercel preview deployment once it is ready.

vercel[bot] commented 1 month ago

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

Name	Status	Preview	Comments	Updated (UTC)
nypl-design-system	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 23, 2024 2:52pm