Skip to content

[Bug]: (Accessibility) Swaps Input Field Lacks Focus State Outline #26662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
georgewrmarshall opened this issue Aug 26, 2024 · 1 comment · Fixed by #29252
Closed

[Bug]: (Accessibility) Swaps Input Field Lacks Focus State Outline #26662

georgewrmarshall opened this issue Aug 26, 2024 · 1 comment · Fixed by #29252
Assignees
@georgewrmarshall
Labels
accessibility Issues related to improving the usability of MetaMask by more groups of people. area-design Design bug (previously known as papercuts - ask Hilary for more detail) release-12.11.0 Issue or pull request that will be included in release 12.11.0 Sev3-low Low severity; minimal to no impact upon users team-swaps DEPRECATED: Use team-swaps-and-bridge type-bug Something isn't working

Comments

@georgewrmarshall
Copy link
Contributor

georgewrmarshall commented Aug 26, 2024 •
edited by desi
Loading

Describe the bug

The Swaps input field on the MetaMask extension does not display an outline when it is in focus. This lack of a focus state outline affects keyboard navigation users and does not meet accessibility guidelines.

Expected behavior

The Swaps input field should have a visible outline or similar indicator when it is focused to provide visual feedback to users, especially for those using keyboard navigation.

Screenshots/Recordings

no.focus720.mov
Screenshot 2024-08-30 at 9 04 23 AM

Steps to reproduce

  1. Open the MetaMask extension in the browser.
  2. Navigate to the Swaps feature.
  3. Use the keyboard to tab to the input field.
  4. Observe that the input field does not show any outline or focus state.

Error messages or log output

No response

Detection stage

development (default)

Version

12.4.0

Build type

Other (please specify exactly where you obtained this build in "Additional Context" section)

Browser

Brave

Operating system

MacOS

Hardware wallet

No response

Additional context

No response

Severity

No response
@georgewrmarshall georgewrmarshall added the type-bug Something isn't working label Aug 26, 2024
@github-project-automation github-project-automation bot moved this to To be fixed in Bugs by severity Aug 26, 2024
@github-project-automation github-project-automation bot moved this to To be fixed in Bugs by team Aug 26, 2024
@metamaskbot metamaskbot added the regression-prod-12.5.0 Regression bug that was found in production in release 12.5.0 label Aug 26, 2024
@georgewrmarshall georgewrmarshall added accessibility Issues related to improving the usability of MetaMask by more groups of people. and removed regression-prod-12.5.0 Regression bug that was found in production in release 12.5.0 labels Aug 26, 2024
@georgewrmarshall georgewrmarshall changed the title [Bug]: [Bug]: (Accessibility) Swaps Input Field Lacks Focus State Outline Aug 26, 2024
@georgewrmarshall georgewrmarshall self-assigned this Aug 26, 2024
@gauthierpetetin gauthierpetetin added team-swaps DEPRECATED: Use team-swaps-and-bridge Sev3-low Low severity; minimal to no impact upon users labels Aug 29, 2024
@georgewrmarshall georgewrmarshall added the area-design Design bug (previously known as papercuts - ask Hilary for more detail) label Sep 3, 2024
@georgewrmarshall georgewrmarshall mentioned this issue Dec 16, 2024
Merged
7 tasks
github-merge-queue bot pushed a commit that referenced this issue Dec 17, 2024
@georgewrmarshall
fix: add focus state to swaps input for improved accessibility (#29252)
fe80943 
## **Description**

The current swaps input implementation hides the focus indicator, making
it inaccessible for users with vision impairments and those relying on
keyboard navigation. This creates barriers for:
- Users with low vision who need clear visual indicators
- Users with motor impairments who navigate via keyboard
- Users of screen magnification tools who need to track their position

This PR improves accessibility by:
1. Removing 'outline: none' from the swaps input to restore focus
visibility
2. Adjusting padding (from 0 to 4px) and margins to maintain visual
consistency
3. Adding proper focus visibility for keyboard navigation

These changes ensure compliance with [WCAG 2.1 Success Criterion 2.4.7
(Focus
Visible)](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html),
which requires that keyboard focus indicators be visible and
distinguishable.

## **Related issues**

Fixes: #26662

## **Manual testing steps**

1. Navigate to the swaps page
2. Use Tab key to move focus to the input field
3. Verify that a visible focus indicator appears around the input
4. Ensure the text alignment and spacing remain consistent
5. Test that the input remains right-aligned with the new padding

## **Screenshots/Recordings**

### **Before**
Input field shows no focus indicator when navigating with keyboard



https://github.com/user-attachments/assets/961ea815-2014-47e3-b4f2-514197fae9dd


### **After**
Input field shows clear focus indicator when navigating with keyboard,
with padding-right: 4px


https://github.com/user-attachments/assets/27a27dd5-51f3-473a-ad5b-bbde22caa7e2

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md)
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed)
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots
@github-project-automation github-project-automation bot moved this from To be fixed to Fixed in Bugs by severity Dec 17, 2024
@github-project-automation github-project-automation bot moved this from To be fixed to Fixed in Bugs by team Dec 17, 2024
@metamaskbot metamaskbot added the release-12.11.0 Issue or pull request that will be included in release 12.11.0 label Dec 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@georgewrmarshall georgewrmarshall

Labels
accessibility Issues related to improving the usability of MetaMask by more groups of people. area-design Design bug (previously known as papercuts - ask Hilary for more detail) release-12.11.0 Issue or pull request that will be included in release 12.11.0 Sev3-low Low severity; minimal to no impact upon users team-swaps DEPRECATED: Use team-swaps-and-bridge type-bug Something isn't working
Projects
Bugs by severity
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: add focus state to swaps input for improved accessibility MetaMask/metamask-extension
5 participants
@gauthierpetetin @georgewrmarshall @metamaskbot and others