🚀 feat(Dialog): improve accessibility

[leonardo-gympass]

Description 📄

Add react-focus-lock library to @gympass/yoga package, with this library the following features were added to Dialog, BottomSheet and Drawer components:

• Create a focus trap inside the Dialog when it is opened, that way the user can't move the focus away from the Dialog.
• Focus on the last active element when the Dialog is closed.
• Focus on the first programmatic focusable element when the Dialog is opened.

Add props role="dialog" and aria-modal=true to Dialog component.
Add closeLabel prop to be used as the aria-label from close button.

Platforms 📲

• Web
• Mobile

Type of change 🔍

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested? 🧪

[Enter the tips to test this PR]

• Unit Test
• Snapshot Test

Checklist: 🔍

• My code follows the contribution guide of this project Contributing Guide
• Layout matches design prototype: FIGMA
• 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

Screenshots 📸

Default behavior

Screen.Recording.2024-11-18.at.16.42.58.mov

New screen reader behavior

Screen.Recording.2024-11-18.at.16.41.37.mov

Current screen reader behavior

Screen.Recording.2024-11-18.at.16.52.46.mov

[sonarqubecloud]

Quality Gate passed

Issues
424 New issues
9 Accepted issues

Measures
0 Security Hotspots
83.1% Coverage on New Code
1.8% Duplication on New Code

See analysis details on SonarQube Cloud

[flavia-moraes]

What is the use of className here? Can this allow style customization?

[leonardo-gympass]

The purpose was to maintain compatibility with the current API of the component to avoid any side effects. Currently all props are passed to the Dialog, I kept this behavior in the lockProps, but the className is not accepted in this prop, which is why I had to create this exception.

[flavia-moraes]

I understand, I think we can keep this prop for now for safety and in the future we make it more restricted, no problem.