search

naumch1k / one-fall

Landing page for ONE FALL, Salem-based melodic punk and hardcore quartet has rapidly made a mark in New England
https://develop--one-fall.netlify.app/
0 stars 0 forks source link

FEAT: Implement Focus Trapping in Modal Component #13

Closed naumch1k closed 1 month ago

naumch1k commented 1 month ago

Description

This PR adds focus trapping feature to Modal component improving accessibility while navigating with a keyboard

Changes Made

Screenshots, GIFs, or videos

Per MDN when we are dealing with modals only the content in the dialog can be interacted with.

When the dialog appears on the screen, keyboard focus (whose control depends upon the dialog's purpose) should be moved to the default focusable control inside the dialog ... and it's not possible to interact with any page content outside the dialog.

Whenever we are using keyboard navigation to navigate modal windows what we get if not explicitly taking care of focus behavior that our that a tab focus moves on to other elements of the page or a screen.

https://github.com/naumch1k/one-fall/assets/76534205/f2ee89d9-f9ef-4ab8-b6b0-e2fc8b456583

https://github.com/naumch1k/one-fall/assets/76534205/805b94d4-f6f1-4912-966d-4cba298fcb90

On the other hand, by applying focus trapping we trap keyboard focus inside the context of our modal until modal is dismissed.

https://github.com/naumch1k/one-fall/assets/76534205/54ba35e0-7a6e-4435-a0e8-d67afd068445

https://github.com/naumch1k/one-fall/assets/76534205/6c880759-2d06-4935-8de8-8129361b1850

Usage

To align with our updated dependency management strategy using Yarn, follow these steps if you still have an existing package.json:

1. Install Yarn. If Yarn isn't installed globally on your system yet, you can do so using npm:

npm install -g yarn

2. Migrate to Yarn. Update your dependencies using Yarn by cleaning up existing lock files and installing dependencies:

# Remove existing npm lock files
rm -rf node_modules package-lock.json

# Install dependencies with Yarn
yarn install

3. Verify Installation. Ensure that Yarn has installed all dependencies correctly. You can check this by running:

yarn list

This command will display the list of all installed dependencies managed by Yarn.

To start a local development server and run the application, you can now use yarn dev command.

netlify[bot] commented 1 month ago

Deploy Preview for one-fall ready!

Name Link
Latest commit 37f2a9e0f03a14c27f36ac2545f06470703c0fdb
Latest deploy log https://app.netlify.com/sites/one-fall/deploys/667f5cb13c5be20008f55563
Deploy Preview https://deploy-preview-13--one-fall.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

naumch1k commented 1 month ago

Hey @Yura33-dev 👋

While reviewing my changes, could you please check out this branch using gh pr checkout 13 and try out the commands in the Usage section of the PR description to see if everything works on your machine as this PR switches us from NPM to Yarn.

Why? There was a high-severity vulnerability in some braces dependencies used by multiple packages. While NPM didn't have enough support to handle it, Yarn provides a more controlled and secure way to deal with it, ensuring our project's stability and safety.

The changes for us should be minimal once we set it up. We'll use slightly different commands, such as:

Thanks!

Yura33-dev commented 1 month ago

Hello, @naumch1k! Yes, everything works at my machine. I have installed and launched yarn successfully. 🎉