clients icon indicating copy to clipboard operation
clients copied to clipboard

[PS-1224] Don't suppress outline for input[type="file"] controls

Open patrickhlauke opened this issue 1 year ago • 2 comments

Type of change

- [x] Bug fix
- [ ] New feature development
- [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
- [ ] Build/deploy pipeline (DevOps)
- [ ] Other

Objective

<input type="file"> controls (e.g. in the "Create Send" / "Create New Send" form) lack a visible focus indication. This PR excludes these types of inputs from having their outline:none set on :focus.

Closes https://github.com/bitwarden/clients/issues/3209

Code changes

  • ...popup/src/scss/box.scss and ...desktop/src/scss/box.scss: and an extra :not([type="file"]) clause to the selector to disable the outline.

Screenshots

Before

Animated gif for the popup/browser version, tabbing through the first few fields of the "Create New Send" form. bitwarden-focus-file-browser

Animated gif for the desktop version, tabbing through the first few fields of the "Create Send" form. bitwarden-focus-file-desktop

After

Animated gif for the popup/browser version, tabbing through the first few fields of the "Create New Send" form. bitwarden-focus-file-browser-after

Animated gif for the desktop version, tabbing through the first few fields of the "Create Send" form. bitwarden-focus-file-desktop-after

Before you submit

- [x] I have checked for **linting** errors (`npm run lint`) (required)
- [ ] I have added **unit tests** where it makes sense to do so (encouraged but not required)
- [ ] This change requires a **documentation update** (notify the documentation team)
- [ ] This change has particular **deployment requirements** (notify the DevOps team)

patrickhlauke avatar Jul 31 '22 13:07 patrickhlauke

Thank you for your contribution! We've added this to our internal Community PR board for review. ID: PS-1224

bitwarden-bot avatar Jul 31 '22 13:07 bitwarden-bot

Another example: the file input in the desktop "Add New Attachment" dialog image

patrickhlauke avatar Jul 31 '22 15:07 patrickhlauke