Skip to content

Conversation

ken-blanchard
Copy link
Contributor

@ken-blanchard ken-blanchard commented Apr 2, 2025

Summary

React 19.1.0 changed how useId is generated with quotes instead of colons. This causes characters to be encoded when used in href. facebook/react#32001

When using errorSummary with fields using the default useId() hook to generate the id, the quoted id is encoded and cannot find the element without first being decoded.

input-text-field-«Rhmlj5»-input
input-text-field-%C2%ABRhmlj5%C2%BB-input

Opted to simply use the anchorElementId to scroll and focus instead of including a decodeURIComponent in the existing function.

Types of changes

What types of changes does this PR introduce?
(check all that apply by placing an x in the relevant boxes)

  • 🛠️ refactoring -- non-breaking change that improves code readability or structure
  • 🐛 bugfix -- non-breaking change that fixes an issue
  • new feature -- non-breaking change that adds functionality
  • 💥 breaking change -- change that causes existing functionality to no longer work as expected
  • 📚 documentation -- changes to documentation only
  • ⚙️ build or tooling -- ex: CI/CD, dependency upgrades

Checklist

Before submitting this PR, ensure that you have completed the following. You can fill these out now, or after creating the PR.
(check all that apply by placing an x in the relevant boxes)

  • code has been linted and formatted locally
  • added or updated tests to verify the changes
  • added adequate logging for new or updated functionality
  • ensured metrics and/or tracing are in place for monitoring and debugging
  • documentation has been updated to reflect the changes (if applicable)
  • linked this PR to a related issue (if applicable)
Linting and formatting
npm run lint:check
npm run format:check
Unit and e2e tests
npm run test
npm run test:e2e

Additional Notes

If this PR introduces significant changes, explain your reasoning and provide any necessary context here. Feel free to include diagrams, screenshots, or alternative approaches you considered.

Screenshots (if applicable)

Provide screenshots or screen-recordings to help reviewers understand the visual impact of your changes, if relevant.

@ken-blanchard ken-blanchard changed the title Ken/skip link click fix(frontend) Anchor link scroll focus to element Apr 2, 2025
@ken-blanchard ken-blanchard enabled auto-merge (squash) April 2, 2025 14:02
@ken-blanchard ken-blanchard merged commit 0fd8cff into main Apr 2, 2025
3 checks passed
@ken-blanchard ken-blanchard deleted the ken/skip-link-click branch April 2, 2025 14:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants