clients
clients copied to clipboard
[PS-1224] Don't suppress outline for input[type="file"] controls
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.
Animated gif for the desktop version, tabbing through the first few fields of the "Create Send" form.
After
Animated gif for the popup/browser version, tabbing through the first few fields of the "Create New Send" form.
Animated gif for the desktop version, tabbing through the first few fields of the "Create Send" form.
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)
Thank you for your contribution! We've added this to our internal Community PR board for review. ID: PS-1224
Another example: the file input in the desktop "Add New Attachment" dialog