RocketCommunicationsInc / astro

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.
https://astrouxds.com
Other
108 stars 25 forks source link

Fix caret navigation inside rux-input #1341

Closed kiley-mitti closed 2 days ago

kiley-mitti commented 3 days ago

Brief Description

When the accessibility option for Caret Navigation is turned on in a browser, the text navigation falls inside the rux-inut spans but outside the actual input box, making it appear as though the user can type into the input when they cannot.

This is a simple fix which turns off that navigation for the exterior div of the input and then reenables it in the input itself. I've tested this against normal inputs and have found that they now work similarly. You must still tab into an input to type into it, but the caret navigation no longer navigates to visually inside rux-input.

JIRA Link

DIW-135

Related Issue

General Notes

Motivation and Context

This issue was brought to our attention this morning. #1340 This is meant to fix that oddity.

Issues and Limitations

Full disclosure, this is the first time I've ever used caret nav. I've tested up against standard browser inputs and did some research on how it is supposed to function so I'm reasonably confident that this is the fix.

Types of changes

Checklist

changeset-bot[bot] commented 3 days ago

🦋 Changeset detected

Latest commit: ce73efc2ae30eef03154732a3b8382d6c66b90fd

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

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[bot] commented 3 days ago

Deploy Preview for astro-preview ready!

Name Link
Latest commit ce73efc2ae30eef03154732a3b8382d6c66b90fd
Latest deploy log https://app.netlify.com/sites/astro-preview/deploys/66e9dc2ffac0a700080c546a
Deploy Preview https://deploy-preview-1341--astro-preview.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.

netlify[bot] commented 3 days ago

Deploy Preview for astro-stencil ready!

Name Link
Latest commit ce73efc2ae30eef03154732a3b8382d6c66b90fd
Latest deploy log https://app.netlify.com/sites/astro-stencil/deploys/66e9dc2fac0c0200086be17e
Deploy Preview https://deploy-preview-1341--astro-stencil.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.

kiley-mitti commented 2 days ago

Thanks Micah :)