mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
8b1230acab
Add a new component for controlling whether a field should be shown or hidden. This will be used in later PRs as a control for sensitive fields that are hidden by default. This component should be fully accessible. Both mouse and keyboard interactions have been tested, and `aria-label` attributes have been added to explain the two "eye" icons that don't have any corresponding text. Thorough unit tests have been written, testing all props except `className` (I don't know how to test that using Jest/`jsdom`).
35 lines
532 B
SCSS
35 lines
532 B
SCSS
.show-hide-toggle {
|
|
position: relative;
|
|
display: inline-flex;
|
|
|
|
&__input {
|
|
appearance: none;
|
|
|
|
+ .show-hide-toggle__label {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Focused when tabbing with keyboard */
|
|
&:focus,
|
|
&:focus-visible {
|
|
outline: none;
|
|
|
|
+ .show-hide-toggle__label {
|
|
outline: Highlight auto 1px;
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
+ label {
|
|
opacity: 0.5;
|
|
cursor: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
color: var(--color-icon-default);
|
|
}
|
|
}
|