EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4458 design: Fix focus on error accordion

main
Pau Ferrer Ocaña 2024-03-20 12:56:29 +01:00
parent fa1ed71fb6
commit 319c6d8115
3 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/theme/components/error-accordion.scss
View File

@ -9,7 +9,6 @@
--state-color-hover: rgb(40 40 40, 4%); // --gray-900 4% --state-color-hover: rgb(40 40 40, 4%); // --gray-900 4%
--state-color-pressed: rgb(40 40 40, 12%); // --gray-900 12% --state-color-pressed: rgb(40 40 40, 12%); // --gray-900 12%
--state-color-focused: rgb(40 40 40, 12%); // --gray-900 12% --state-color-focused: rgb(40 40 40, 12%); // --gray-900 12%
--state-color-keyboard-focus: var(--a11y-focus-color);
background: var(--background-color); background: var(--background-color);
border-radius: var(--mdl-shape-borderRadius-xs); border-radius: var(--mdl-shape-borderRadius-xs);
@ -89,8 +88,7 @@
} }
&:focus-visible { &:focus-visible {
box-shadow: none; @include core-focus-style();
outline: 2px solid var(--state-color-keyboard-focus);
} }
&:active { &:active {

5
src/theme/helpers/custom.mixins.scss
View File

@ -69,8 +69,9 @@
@mixin core-focus() { @mixin core-focus() {
outline: none; outline: none;
position: relative; position: relative;
&::after { &::after {
@include position(0, 0, 0, 0); @include position(0px, 0px, 0px, 0px);
position: absolute; position: absolute;
content: ""; content: "";
opacity: 1; opacity: 1;
@ -83,7 +84,7 @@
box-shadow: var(--a11y-shadow-focus-boxShadow); box-shadow: var(--a11y-shadow-focus-boxShadow);
border-radius: var(--border-radius); border-radius: var(--border-radius);
// Thicker option: // Thicker option:
// border: var(--a11y-shadow-focus-boxShadowSpread) solid var(--a11y-shadow-focus-boxShadowColor); // outline: var(--a11y-shadow-focus-outline);
} }
@mixin core-transition($properties: all, $duration: 500ms, $timing-function: ease-in-out) { @mixin core-transition($properties: all, $duration: 500ms, $timing-function: ease-in-out) {

5
src/theme/theme.design-system.scss
View File

@ -142,8 +142,9 @@ html {
// ***** ACCESSIBILITY ***** // // ***** ACCESSIBILITY ***** //
--a11y-sizing-minTargetSize: 44px; --a11y-sizing-minTargetSize: 44px;
--a11y-shadow-focus-boxShadowSpread: 2px; --a11y-shadow-focus-borderWidth: 2px;
--a11y-shadow-focus-boxShadow: inset 0 0 var(--a11y-shadow-focus-boxShadowSpread) 1px var(--a11y-focus-color); --a11y-shadow-focus-boxShadow: inset 0 0 var(--a11y-shadow-focus-borderWidth) 1px var(--a11y-focus-color);
--a11y-shadow-focus-outline: var(--a11y-shadow-focus-borderWidth) solid var(--a11y-focus-color);
// @TODO ***** VARIABLES TO BE REVIEWED, RENAMED AND TIDIED ***** // // @TODO ***** VARIABLES TO BE REVIEWED, RENAMED AND TIDIED ***** //
--text-size: var(--mdl-typography-body-fontSize-md); --text-size: var(--mdl-typography-body-fontSize-md);