Skip to content

Commit c677ce5

Browse files
haschekhaschek
committed
use outlines for input elements to improve accessibility
1 parent 94ed684 commit c677ce5

6 files changed

Lines changed: 87 additions & 31 deletions

File tree

‎src/components/AutoSuggestion/AutoSuggestion.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,11 @@
3939
}
4040

4141
&:has(.cm-editor.cm-focused) {
42-
box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
42+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
43+
44+
@extend .focus-by-keyboard;
45+
46+
animation: none;
4347
}
4448

4549
.cm-editor {

‎src/components/Checkbox/checkbox.scss‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@ $switch-checked-background-color-disabled: eccgui-color-rgba(
4747
}
4848

4949
input:focus ~ .#{$ns}-control-indicator {
50-
outline-offset: 0;
50+
@extend .focus-by-keyboard;
51+
52+
animation: none;
5153
}
5254

5355
input:disabled ~ .#{$ns}-control-indicator,
@@ -72,6 +74,16 @@ $switch-checked-background-color-disabled: eccgui-color-rgba(
7274
background-image: url("~@carbon/icons/svg/32/checkbox--indeterminate.svg");
7375
}
7476
}
77+
78+
&.#{$ns}-switch {
79+
--#{$eccgui}-a11y-outline-offset: 1px;
80+
81+
input:focus ~ .#{$ns}-control-indicator {
82+
@extend .focus-by-keyboard;
83+
84+
animation: none;
85+
}
86+
}
7587
}
7688

7789
.#{$ns}-control-indicator + *,

‎src/components/MultiSuggestField/_multisuggestfield.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,23 @@
66
max-height: var(--eccgui-multisuggestfield-max-height, 45vh);
77
}
88
}
9+
10+
.#{$eccgui}-multisuggestfield {
11+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
12+
13+
&.#{$ns}-intent-success {
14+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-success-text};
15+
}
16+
&.#{$ns}-intent-warning {
17+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-warning-text};
18+
}
19+
&.#{$ns}-intent-danger {
20+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-danger-text};
21+
}
22+
23+
&:focus-within {
24+
@extend .focus-by-keyboard;
25+
26+
animation: none;
27+
}
28+
}

‎src/components/RadioButton/radiobutton.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
// Checkbox need to be imported before, we won't double it here currently
22

33
.#{$ns}-control {
4+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
5+
--#{$eccgui}-a11y-outline-width: 2px;
6+
--#{$eccgui}-a11y-outline-offset: 0;
7+
48
&.#{$ns}-radio {
59
input ~ .#{$ns}-control-indicator,
610
input:checked ~ .#{$ns}-control-indicator {
711
box-shadow: none;
812
}
913

1014
input:focus ~ .#{$ns}-control-indicator {
11-
outline-offset: 1px;
15+
@extend .focus-by-keyboard;
16+
17+
animation: none;
1218
}
1319

1420
input:disabled ~ .#{$ns}-control-indicator,

‎src/components/TextField/textfield.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@ $eccgui-map-intent-bgcolors: (
103103
}
104104

105105
.#{$ns}-input {
106+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
107+
106108
.#{$ns}-input-group[class*="#{$eccgui}-intent--"] & {
107109
animation-duration: 1s;
108110
animation-delay: 0.5s;
@@ -111,16 +113,23 @@ $eccgui-map-intent-bgcolors: (
111113
@each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
112114
.#{$ns}-input-group.#{$ns}-intent-#{$each-intent} & {
113115
background-color: eccgui-color-var("semantic", $each-intent, "100");
116+
117+
--#{$eccgui}-a11y-outline-color: eccgui-color-var("semantic", $each-intent, "900");
118+
114119
animation-name: intent-state-flash-#{$each-intent};
115120
}
116121
}
117122

118123
.#{$ns}-input-group.#{$eccgui}-intent--info & {
119124
@include pt-input-intent($eccgui-color-info-text);
125+
126+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text};
120127
}
121128

122129
.#{$ns}-input-group.#{$eccgui}-intent--accent & {
123130
@include pt-input-intent($eccgui-color-primary);
131+
132+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
124133
}
125134

126135
.#{$ns}-input-group.#{$eccgui}-intent--neutral & {
@@ -138,6 +147,12 @@ $eccgui-map-intent-bgcolors: (
138147

139148
text-decoration: line-through $eccgui-color-danger-text 2px;
140149
}
150+
151+
&:focus-visible {
152+
@extend .focus-by-keyboard;
153+
154+
animation: none;
155+
}
141156
}
142157

143158
.#{$eccgui}-textarea {
@@ -151,16 +166,23 @@ $eccgui-map-intent-bgcolors: (
151166
@each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
152167
&.#{$eccgui}-intent--#{$each-intent} {
153168
background-color: eccgui-color-var("semantic", $each-intent, "100");
169+
170+
--#{$eccgui}-a11y-outline-color: eccgui-color-var("semantic", $each-intent, "900");
171+
154172
animation-name: intent-state-flash-#{$each-intent};
155173
}
156174
}
157175

158176
&.#{$eccgui}-intent--info {
159177
@include pt-input-intent($eccgui-color-info-text);
178+
179+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text};
160180
}
161181

162182
&.#{$eccgui}-intent--accent {
163183
@include pt-input-intent($eccgui-color-primary);
184+
185+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
164186
}
165187

166188
&.#{$eccgui}-intent--neutral {

‎src/extensions/codemirror/_codemirror.scss‎

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
1919

2020
&__toolbar {
2121
position: absolute;
22-
z-index: 3;
23-
left: 1px;
24-
right: 1px;
2522
top: 1px;
26-
border-radius: $pt-border-radius $pt-border-radius 0 0;
27-
border-bottom: solid 1px $eccgui-color-codeeditor-separation;
23+
right: 1px;
24+
left: 1px;
25+
z-index: 3;
2826
background-color: $eccgui-color-codeeditor-background;
27+
border-bottom: solid 1px $eccgui-color-codeeditor-separation;
28+
border-radius: $pt-border-radius $pt-border-radius 0 0;
2929
}
3030

3131
&--has-toolbar {
@@ -37,9 +37,9 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
3737
&__preview {
3838
position: absolute;
3939
top: calc(#{$eccgui-size-codeeditor-toolbar-height} + 1px) !important;
40-
left: 1px;
4140
right: 1px;
4241
bottom: 1px;
42+
left: 1px;
4343
z-index: 2;
4444
padding: $button-padding;
4545
overflow-y: auto;
@@ -50,12 +50,12 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
5050
.cm-editor {
5151
width: 100%;
5252
height: $eccgui-size-codeeditor-height;
53-
clip-path: unset !important; // we may check later why they set inset(0) now
5453
background-color: $eccgui-color-codeeditor-background;
5554
border-radius: $pt-border-radius;
5655

5756
// get them a "border" like input boxes from blueprintjs
5857
box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;
58+
clip-path: unset !important; // we may check later why they set inset(0) now
5959

6060
&.#{eccgui}-disabled {
6161
@extend .#{$ns}-input, .#{$ns}-disabled;
@@ -89,15 +89,15 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
8989
}
9090

9191
&.#{eccgui}-intent--primary {
92-
@include pt-input-intent($eccgui-color-info-text);
92+
@include pt-input-intent($eccgui-color-primary);
9393
}
9494

9595
&.#{eccgui}-intent--info {
9696
@include pt-input-intent($eccgui-color-info-text);
9797
}
9898

9999
&.#{eccgui}-intent--accent {
100-
@include pt-input-intent($eccgui-color-primary);
100+
@include pt-input-intent($eccgui-color-accent);
101101
}
102102

103103
&.#{eccgui}-intent--neutral {
@@ -124,39 +124,31 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
124124
}
125125

126126
&.cm-focused {
127-
outline: none;
128-
box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
127+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
128+
--#{$eccgui}-a11y-outline-offset: 0;
129+
130+
@extend .focus-by-keyboard;
131+
132+
animation: none;
129133

130134
&.#{eccgui}-intent--warning {
131-
box-shadow: input-transition-shadow($eccgui-color-warning-text, true), $input-box-shadow-focus;
135+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-warning-text};
132136
}
133137

134138
&.#{eccgui}-intent--success {
135-
box-shadow: input-transition-shadow($eccgui-color-success-text, true), $input-box-shadow-focus;
139+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-success-text};
136140
}
137141

138142
&.#{eccgui}-intent--danger {
139-
box-shadow: input-transition-shadow($eccgui-color-danger-text, true), $input-box-shadow-focus;
143+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-danger-text};
140144
}
141145

142146
&.#{eccgui}-intent--primary {
143-
box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
147+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
144148
}
145149

146150
&.#{eccgui}-intent--info {
147-
box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
148-
}
149-
150-
&.#{eccgui}-intent--accent {
151-
box-shadow: input-transition-shadow($eccgui-color-warning-text, true), $input-box-shadow-focus;
152-
}
153-
154-
&.#{eccgui}-intent--neutral {
155-
box-shadow: input-transition-shadow($eccgui-color-workspace-text, true), $input-box-shadow-focus;
156-
}
157-
158-
&.#{eccgui}-intent--edited {
159-
box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
151+
--#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text};
160152
}
161153

162154
&.#{eccgui}-intent--removed {

0 commit comments

Comments
 (0)