SPARK-8: Fix Modal Focus Issue when using Keyboard #1963

mukunku · 2025-08-05T17:16:19Z

Summary

This is for SPARK-8.

This is an issue with Firefox. If the modal doesn't have tabindex set, when anything not tabbable within the modal is selected/focused, like raw text, and a key is pressed the event target will always be the body of the page. This causes a bug with the keepFocusWithinModal event handler where no matter what key you press the first tabbable element gets focused within the modal if you're not already focused on a tabbable element, deselecting any text you may have highlighted.

Solution

The easiest solution is to only handle Tab key presses in this handler; not sure if there's a reason to handle any other kind of key presses. This addresses the original reported issue.

Additionally, while unlikely, I also added code to handle the case where the modal has no tabbable items; including the close button in the top-right. Without this additional code, if you have a modal with no buttons and press Tab focus will go through elements in the main page, behind the modal. With the code, the Tab keypress becomes a no-op if there's nothing to switch focus to.

How to Test

To re-create the issue:

Launch the following codepen in firefox: https://codepen.io/KyleMit/pen/myemPmE?editors=1010
Open the modal and highlight some text
Hit any key on your keyboard and notice the text selection get cleared as focus is moved to the link in the modal.
https://deploy-preview-1963--stacks.netlify.app/product/components/modals/#examples

To test the fix:

Launch the PR env for this branch in Firefox: https://deploy-preview-1963--stacks.netlify.app/product/components/modals/#examples
Open a modal and select some text
Hit any key on your keyboard besides Tab and notice nothing changes
Only Tab key presses will mess with focus changes now.

changeset-bot · 2025-08-05T17:16:22Z

🦋 Changeset detected

Latest commit: bc2c361

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@stackoverflow/stacks	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2025-08-05T17:16:28Z

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	`bc2c361`
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/6893b2f9d56cb2000853ae22
😎 Deploy Preview	https://deploy-preview-1963--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

dancormier

The fix is straightforward and refined, the tests are thorough, and after testing it in Firefox I can report that it works as expected.

Great work here @mukunku! Happy to see this merged in when you're feeling ready.

dancormier · 2025-08-06T20:30:09Z

webpack.config.js

                test: /\.less$/,
                use: [
-                    MiniCssExtractPlugin.loader,
+                    isProd ? MiniCssExtractPlugin.loader : "",


I noticed the commit message for this was to "fix webpack.config.js for windows". I'm curious what was happening initially (for the record, this looks good. I'm just personally curious).

When loading the design site locally none of the css would load with the following error:

Refused to apply style from 'http://localhost:8080/xxxxxx' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Giamir gave me the solution to disable the css plugin locally as he encountered the same issue when assisting Tavian.

I believe it may be related to this as the root cause: webpack/webpack-dev-server#3168 (comment)

* SPARK-8: Fix Modal Focus Issue when using Keyboard (#1963) * fix reported focus issue * Also handle case where modal has no tabbable elements * fix webpack.config.js for windows * move if check up * Create loud-suits-stare.md * fix whitespace * revert html changes * revert harder * add tests * lint * chore(new-release) (#1964) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * [SPARK-6] - update the notice border color for dark mode and high contrast dark mode (#1965) * Correct readme * Don't run minicssextractplugin when running locally * Revert changes * update border colour for dark mode and high contrast dark mode * Create tasty-masks-pump.md * Minor notice border style refactor * Update visual regression test images --------- Co-authored-by: Dan Cormier <[email protected]> * chore(new-release) (#1966) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * build(deps-dev): bump webpack from 5.99.9 to 5.101.2 (#1967) Bumps [webpack](https://github.com/webpack/webpack) from 5.99.9 to 5.101.2. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](webpack/webpack@v5.99.9...v5.101.2) --- updated-dependencies: - dependency-name: webpack dependency-version: 5.101.2 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * SPARK-12: Move to monorepo setup by splitting Stacks Docs and Classic into NPM workspaces (#1969) * mention why we are doing this as part of project SHINE * move folders * update paths * fix docs site and visual tests script * fix a11y and unit test scripts and tweak visual regression threshold * fix workflow tests * revert ci import paths to fix tests * try older image * fix visual ci tests? * mark stacks-docs not publishable * adjust adr based on pr feedback * adjust names * address PR feedback * add missing workspace param * switch back to old script * fix netlify and a11y * fix path * try fix workflows * fix harder * PR feedback * pr feedback round 2 * move some more packages around * Create eighty-pillows-relate.md * chore(screenshots): adjust gitignore patterns excluding failed images (#1972) * chore(monorepo): follow-up tweaks post monorepo changes (#1974) * chore(git-lfs): ensure visual test baseline images are tracked by git lfs (#1978) * Fix aria-current attribute placement in sidebar widget navigation examples (#1970) * chore(new-release) (#1979) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * build(deps-dev): bump vite from 7.1.3 to 7.1.5 (#1980) Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 7.1.3 to 7.1.5. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v7.1.5/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-version: 7.1.5 dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: svc_tooling <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Tavian Taylor <[email protected]> Co-authored-by: Dan Cormier <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Giamir Buoncristiani <[email protected]> Co-authored-by: qheaden-stack <[email protected]>

* SPARK-8: Fix Modal Focus Issue when using Keyboard (#1963) * fix reported focus issue * Also handle case where modal has no tabbable elements * fix webpack.config.js for windows * move if check up * Create loud-suits-stare.md * fix whitespace * revert html changes * revert harder * add tests * lint * chore(new-release) (#1964) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * [SPARK-6] - update the notice border color for dark mode and high contrast dark mode (#1965) * Correct readme * Don't run minicssextractplugin when running locally * Revert changes * update border colour for dark mode and high contrast dark mode * Create tasty-masks-pump.md * Minor notice border style refactor * Update visual regression test images --------- Co-authored-by: Dan Cormier <[email protected]> * chore(new-release) (#1966) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * build(deps-dev): bump webpack from 5.99.9 to 5.101.2 (#1967) Bumps [webpack](https://github.com/webpack/webpack) from 5.99.9 to 5.101.2. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](webpack/webpack@v5.99.9...v5.101.2) --- updated-dependencies: - dependency-name: webpack dependency-version: 5.101.2 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * SPARK-12: Move to monorepo setup by splitting Stacks Docs and Classic into NPM workspaces (#1969) * mention why we are doing this as part of project SHINE * move folders * update paths * fix docs site and visual tests script * fix a11y and unit test scripts and tweak visual regression threshold * fix workflow tests * revert ci import paths to fix tests * try older image * fix visual ci tests? * mark stacks-docs not publishable * adjust adr based on pr feedback * adjust names * address PR feedback * add missing workspace param * switch back to old script * fix netlify and a11y * fix path * try fix workflows * fix harder * PR feedback * pr feedback round 2 * move some more packages around * Create eighty-pillows-relate.md * chore(screenshots): adjust gitignore patterns excluding failed images (#1972) * chore(monorepo): follow-up tweaks post monorepo changes (#1974) * chore(git-lfs): ensure visual test baseline images are tracked by git lfs (#1978) * Fix aria-current attribute placement in sidebar widget navigation examples (#1970) * chore(new-release) (#1979) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * build(deps-dev): bump vite from 7.1.3 to 7.1.5 (#1980) Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 7.1.3 to 7.1.5. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v7.1.5/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-version: 7.1.5 dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(docs): add readme for each workspace (#1982) * add readme's for each package * Create six-buckets-grab.md * adjust stacks classic readme a bit * don't publish changeset for private package stacks-docs (#1983) * chore(new-release) (#1985) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: svc_tooling <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Tavian Taylor <[email protected]> Co-authored-by: Dan Cormier <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Giamir Buoncristiani <[email protected]> Co-authored-by: qheaden-stack <[email protected]>

mukunku added 3 commits August 5, 2025 12:54

fix reported focus issue

56b2c74

Also handle case where modal has no tabbable elements

8178a42

fix webpack.config.js for windows

57dace2

mukunku added 3 commits August 5, 2025 13:21

move if check up

1dd8e19

Create loud-suits-stare.md

ff39cad

fix whitespace

9269abc

mukunku requested review from dancormier and giamir August 5, 2025 19:16

mukunku added 4 commits August 5, 2025 15:19

revert html changes

36214f9

revert harder

5da691f

add tests

76ec5f7

lint

bc2c361

dancormier approved these changes Aug 6, 2025

View reviewed changes

mukunku marked this pull request as ready for review August 7, 2025 11:54

mukunku merged commit 9c08388 into develop Aug 7, 2025
11 checks passed

mukunku deleted the sal/SPARK-8 branch August 7, 2025 12:06

stacks-tooling mentioned this pull request Aug 7, 2025

chore(new-release) #1964

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

SPARK-8: Fix Modal Focus Issue when using Keyboard #1963

SPARK-8: Fix Modal Focus Issue when using Keyboard #1963

Uh oh!

mukunku commented Aug 5, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Aug 5, 2025 •

edited

Loading

Uh oh!

netlify bot commented Aug 5, 2025 •

edited

Loading

Uh oh!

dancormier left a comment

Uh oh!

dancormier Aug 6, 2025

Uh oh!

mukunku Aug 7, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

SPARK-8: Fix Modal Focus Issue when using Keyboard #1963

SPARK-8: Fix Modal Focus Issue when using Keyboard #1963

Uh oh!

Conversation

mukunku commented Aug 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Solution

How to Test

Uh oh!

changeset-bot bot commented Aug 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify bot commented Aug 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for stacks ready!

Uh oh!

dancormier left a comment

Choose a reason for hiding this comment

Uh oh!

dancormier Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

mukunku Aug 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mukunku commented Aug 5, 2025 •

edited

Loading

changeset-bot bot commented Aug 5, 2025 •

edited

Loading

netlify bot commented Aug 5, 2025 •

edited

Loading