DSD-1741: Fixing checkbox's positioning so it is visible when focused

[EdwinGuzman]

Fixes JIRA ticket DSD-1741

This PR does the following:

• When tabbing through checkboxes in a scrollable container (so with a fixed height), a focused checkbox does not go into view. The suggested approach was to use the useScrollTabIntoView hook but when attempted, it did not make sense to introduce state to keep track of the focused element. Also, this meant we'd have to check track of user key presses for the tab press and check if a checkbox was focused. This seemed like overengineering a solution.
• After searching online, I saw this https://codepen.io/devadmin/pen/MZMjYx and natively without javascript, the expected behavior works.
• This is not a MultiSelect or Accordion issue but rather an issue with how the Checkbox is positioned. Adding position: "relative" fixed the root of the issue.

How has this been tested?

Review MultiSelect, Accordion (last few stories), and CheckboxGroup to verify that visually and functionally, everything is working as expected.

Accessibility concerns or updates

• This is an accessibility fix.

Checklist:

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

Front End Review:

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

[vercel[bot]]

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	May 16, 2024 2:39pm