Skip to content

Commit 8abe3ae

Browse files
emyarodemyarod
authored
fix(TableToolbarSearch): allow screen reader navigation (#7986)
* refactor(data-table-action): specify background-color * fix(TableToolbarSearch): remove toolbar action class * refactor(data-table-action): use rem based calculation * fix(TableToolbarSearch): remove toolbar search container * chore: update snapshots * fix(data-table-action): update spacing token
1 parent 7a80e67 commit 8abe3ae

File tree

4 files changed

+286
-399
lines changed

4 files changed

+286
-399
lines changed

‎packages/components/src/components/data-table/_data-table-action.scss‎

Lines changed: 46 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
width: 100%;
2424
height: $spacing-09;
2525
overflow: hidden;
26-
background: $ui-01;
26+
background-color: $ui-01;
2727
}
2828

2929
.#{$prefix}--toolbar-content {
@@ -63,126 +63,82 @@
6363
width: $spacing-09;
6464
height: $spacing-09;
6565
box-shadow: none;
66-
transition: flex $transition--expansion $carbon--standard-easing;
66+
cursor: pointer;
67+
transition: width $transition--expansion $carbon--standard-easing,
68+
background-color $duration--fast-02 motion(entrance, productive);
69+
70+
&:hover {
71+
background-color: $hover-field;
72+
}
6773
}
6874

69-
.#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search {
70-
position: initial;
71-
width: $spacing-09;
75+
.#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input {
7276
height: 100%;
77+
padding: 0;
78+
cursor: pointer;
79+
opacity: 0;
7380
}
7481

7582
.#{$prefix}--toolbar-search-container-expandable
76-
.#{$prefix}--search
7783
.#{$prefix}--search-magnifier {
7884
left: 0;
7985
width: $spacing-09;
8086
height: $spacing-09;
8187
padding: $spacing-05;
82-
cursor: pointer;
83-
transition: background $duration--fast-02 motion(entrance, productive);
84-
pointer-events: all;
8588
}
8689

87-
.#{$prefix}--toolbar-search-container-expandable
88-
.#{$prefix}--search--disabled
90+
.#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
8991
.#{$prefix}--search-magnifier {
90-
background: $disabled-01;
92+
background-color: $disabled-01;
9193
cursor: not-allowed;
9294
transition: background-color none;
9395
}
9496

95-
.#{$prefix}--toolbar-search-container-expandable
96-
.#{$prefix}--search
97-
.#{$prefix}--search-magnifier:focus {
98-
@include focus-outline('outline');
99-
}
100-
101-
.#{$prefix}--toolbar-search-container-expandable
102-
.#{$prefix}--search
103-
.#{$prefix}--search-magnifier:hover {
104-
background: $hover-field;
105-
}
106-
107-
.#{$prefix}--toolbar-action.#{$prefix}--toolbar-search-container-disabled {
97+
.#{$prefix}--toolbar-search-container-disabled {
10898
cursor: not-allowed;
10999
}
110100

111-
.#{$prefix}--toolbar-search-container-expandable
112-
.#{$prefix}--search--disabled
113-
.#{$prefix}--search-magnifier:hover {
114-
background: $disabled-01;
115-
cursor: not-allowed;
116-
transition: background-color none;
117-
}
118-
119-
.#{$prefix}--toolbar-search-container-expandable
120-
.#{$prefix}--search
101+
.#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search
121102
.#{$prefix}--label {
122103
visibility: hidden;
123104
}
124105

125-
.#{$prefix}--toolbar-search-container-expandable
126-
.#{$prefix}--search
127-
.#{$prefix}--search-input {
128-
height: 100%;
129-
padding: 0;
130-
background-color: transparent;
131-
border: none;
132-
visibility: hidden;
133-
}
134-
135-
.#{$prefix}--toolbar-search-container-expandable
136-
.#{$prefix}--search
106+
.#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search
137107
.#{$prefix}--search-close {
138108
width: $spacing-09;
139109
height: $spacing-09;
140110

141111
&::before {
142-
top: 2px;
143-
height: calc(100% - 4px);
112+
top: rem(2px);
113+
height: calc(100% - #{rem(4px)});
144114
background-color: $hover-ui;
145115
}
146116
}
147117

148-
.#{$prefix}--toolbar-search-container-expandable
149-
.#{$prefix}--search
118+
.#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search
150119
.#{$prefix}--search-close:focus::before {
151120
background-color: $focus;
152121
}
153122

154123
//-------------------------------------------------
155124
//ACTIVE SEARCH - DEFAULT TOOLBAR
156125
//-------------------------------------------------
157-
.#{$prefix}--toolbar-search-container-active {
158-
flex: auto;
159-
transition: flex $duration--moderate-01 motion(standard, productive);
160-
}
161126

162-
.#{$prefix}--toolbar-search-container-active .#{$prefix}--search {
127+
.#{$prefix}--toolbar-search-container-active.#{$prefix}--search {
163128
width: 100%;
164129
}
165130

166-
.#{$prefix}--toolbar-search-container-active
167-
.#{$prefix}--search
168-
.#{$prefix}--label,
169-
.#{$prefix}--toolbar-search-container-active
170-
.#{$prefix}--search
171-
.#{$prefix}--search-input {
172-
padding: 0 $spacing-09;
173-
visibility: inherit;
131+
.#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input {
132+
opacity: 1;
174133
}
175134

176-
.#{$prefix}--toolbar-search-container-active
177-
.#{$prefix}--search
178-
.#{$prefix}--search-input:focus {
179-
@include focus-outline('outline');
180-
181-
box-shadow: inset 0 0 0 2px $focus;
135+
.#{$prefix}--toolbar-search-container-active .#{$prefix}--label,
136+
.#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input {
137+
padding: 0 $spacing-09;
138+
cursor: text;
182139
}
183140

184141
.#{$prefix}--toolbar-search-container-active
185-
.#{$prefix}--search
186142
.#{$prefix}--search-input:focus
187143
+ .#{$prefix}--search-close {
188144
border: none;
@@ -191,22 +147,18 @@
191147
}
192148

193149
.#{$prefix}--toolbar-search-container-active
194-
.#{$prefix}--search
195150
.#{$prefix}--search-input:not(:placeholder-shown) {
196-
background: $hover-field;
151+
background-color: $hover-field;
197152
border: none;
198153
}
199154

200155
.#{$prefix}--toolbar-search-container-active
201-
.#{$prefix}--search
202156
.#{$prefix}--search-magnifier:focus,
203157
.#{$prefix}--toolbar-search-container-active
204-
.#{$prefix}--search
205158
.#{$prefix}--search-magnifier:active,
206159
.#{$prefix}--toolbar-search-container-active
207-
.#{$prefix}--search
208160
.#{$prefix}--search-magnifier:hover {
209-
background: transparent;
161+
background-color: transparent;
210162
border: none;
211163
outline: none;
212164
}
@@ -217,12 +169,8 @@
217169
.#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close,
218170
.#{$prefix}--toolbar-search-container-persistent
219171
.#{$prefix}--search-close:hover,
220-
.#{$prefix}--toolbar-search-container-active
221-
.#{$prefix}--search
222-
.#{$prefix}--search-close,
223-
.#{$prefix}--toolbar-search-container-active
224-
.#{$prefix}--search
225-
.#{$prefix}--search-close:hover {
172+
.#{$prefix}--toolbar-search-container-active .#{$prefix}--search-close,
173+
.#{$prefix}--toolbar-search-container-active .#{$prefix}--search-close:hover {
226174
background-color: transparent;
227175
border: none;
228176
}
@@ -258,11 +206,11 @@
258206
}
259207

260208
.#{$prefix}--toolbar-action:hover:not([disabled]) {
261-
background: $hover-field;
209+
background-color: $hover-field;
262210
}
263211

264212
.#{$prefix}--toolbar-action:hover[aria-expanded='true'] {
265-
background: $ui-01;
213+
background-color: $ui-01;
266214
}
267215

268216
.#{$prefix}--toolbar-action[disabled] {
@@ -325,43 +273,34 @@
325273
}
326274

327275
.#{$prefix}--toolbar-search-container-persistent
328-
.#{$prefix}--search
329276
.#{$prefix}--search-magnifier {
330277
left: $spacing-05;
331278
}
332279

333-
.#{$prefix}--toolbar-search-container-persistent
334-
.#{$prefix}--search
335-
.#{$prefix}--search-input {
280+
.#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input {
336281
height: $spacing-09;
337282
padding: 0 $spacing-09;
338283
border: none;
339284
}
340285

341286
.#{$prefix}--toolbar-search-container-persistent
342-
.#{$prefix}--search
343287
.#{$prefix}--search-input:focus:not([disabled]) {
344288
@include focus-outline('outline');
345289
}
346290

347291
.#{$prefix}--toolbar-search-container-persistent
348-
.#{$prefix}--search
349292
.#{$prefix}--search-input:hover:not([disabled]) {
350-
background: $hover-field;
293+
background-color: $hover-field;
351294
}
352295

353296
.#{$prefix}--toolbar-search-container-persistent
354-
.#{$prefix}--search
355297
.#{$prefix}--search-input:active:not([disabled]),
356298
.#{$prefix}--toolbar-search-container-persistent
357-
.#{$prefix}--search
358299
.#{$prefix}--search-input:not(:placeholder-shown) {
359-
background: $hover-field;
300+
background-color: $hover-field;
360301
}
361302

362-
.#{$prefix}--toolbar-search-container-persistent
363-
.#{$prefix}--search
364-
.#{$prefix}--search-close {
303+
.#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close {
365304
width: $spacing-09;
366305
height: $spacing-09;
367306
}
@@ -514,30 +453,20 @@
514453
height: rem(32px);
515454
}
516455

517-
.#{$prefix}--toolbar-search-container-expandable
518-
.#{$prefix}--search
519-
.#{$prefix}--search-input,
520-
.#{$prefix}--toolbar-search-container-persistent
521-
.#{$prefix}--search
522-
.#{$prefix}--search-input {
456+
.#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input,
457+
.#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input {
523458
height: rem(32px);
524459
}
525460

526-
.#{$prefix}--toolbar-search-container-expandable
527-
.#{$prefix}--search
528-
.#{$prefix}--search-close,
529-
.#{$prefix}--toolbar-search-container-persistent
530-
.#{$prefix}--search
531-
.#{$prefix}--search-close {
461+
.#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-close,
462+
.#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close {
532463
width: rem(32px);
533464
height: rem(32px);
534465
}
535466

536467
.#{$prefix}--toolbar-search-container-expandable
537-
.#{$prefix}--search
538468
.#{$prefix}--search-magnifier,
539469
.#{$prefix}--toolbar-search-container-persistent
540-
.#{$prefix}--search
541470
.#{$prefix}--search-magnifier {
542471
width: rem(32px);
543472
height: rem(32px);
@@ -565,46 +494,38 @@
565494
transition: flex 175ms $carbon--standard-easing;
566495
}
567496

568-
.#{$prefix}--toolbar-search-container-active
569-
.#{$prefix}--search
570-
.#{$prefix}--search-input {
497+
.#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input {
571498
visibility: inherit;
572499
}
573500

574501
.#{$prefix}--toolbar-search-container-active
575-
.#{$prefix}--search
576502
.#{$prefix}--search-input:focus {
577503
@include focus-outline('outline');
578504

579-
background: $hover-field;
505+
background-color: $hover-field;
580506
}
581507

582508
.#{$prefix}--toolbar-search-container-active
583-
.#{$prefix}--search
584509
.#{$prefix}--search-input:active,
585510
.#{$prefix}--toolbar-search-container-active
586-
.#{$prefix}--search
587511
.#{$prefix}--search-input:not(:placeholder-shown) {
588-
background: $hover-field;
512+
background-color: $hover-field;
589513
}
590514

591515
.#{$prefix}--toolbar-search-container-active
592-
.#{$prefix}--search
593516
.#{$prefix}--search-magnifier:focus,
594517
.#{$prefix}--toolbar-search-container-active
595-
.#{$prefix}--search
596518
.#{$prefix}--search-magnifier:active,
597519
.#{$prefix}--toolbar-search-container-active
598-
.#{$prefix}--search
599520
.#{$prefix}--search-magnifier:hover {
600521
@include focus-outline('reset');
601522

602-
background: transparent;
523+
background-color: transparent;
603524
}
604525
}
605526

606527
.#{$prefix}--search--disabled .#{$prefix}--search-magnifier:hover {
607-
background: transparent;
528+
background-color: transparent;
608529
}
609530

610531
//-------------------------------------------------

0 commit comments

Comments
 (0)