Skip to content

Commit 41a7ddc

Browse files
dakahnandreancardonajoshblack
authored
feat(StructuredList): Accessibility refactor (#8172)
* fix(StructuredList): refactor instanceId * fix(StructuredList): convert to radio interaction, add focus state * fix(StructuredList): hide radio input * fix(StructuredList): remove label and tabIndex props on input * test(StructuredList): update tests, remove label tests * fix(StructuredList): style changes, add deprecation warning * fix(StructuredList): add context for row click handler * test(StructuredList): add specificity to classname testing * fix(StructuredList): add clearer deprecation warning for defaultChecked * fix(structuredList): updated style * fix(structuredList): updated style again * Update packages/react/src/components/StructuredList/StructuredList.js Co-authored-by: Josh Black <josh@josh.black> * fix(StructuredList): update render return to be in carbon style * fix(StructuredList): move new work to /next * fix(StructuredList): put changes behind feature flag * test(StructuredList): add old version tests * fix(StructuredList): update to Carbon naming convention * test(StructuredList): update snapshots Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com> Co-authored-by: Josh Black <josh@josh.black>
1 parent 1643429 commit 41a7ddc

File tree

7 files changed

+637
-157
lines changed

7 files changed

+637
-157
lines changed

‎packages/components/src/components/structured-list/_structured-list.scss‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,14 @@
1717
.#{$prefix}--structured-list--selection .#{$prefix}--structured-list-th {
1818
@include padding--data-structured-list;
1919
}
20-
21-
.#{$prefix}--structured-list-input {
22-
display: none;
20+
@if feature-flag-enabled('enable-2021-release') {
21+
.#{$prefix}--structured-list-row--focused-within {
22+
@include focus-outline('outline');
23+
}
24+
} @else {
25+
.#{$prefix}--structured-list-input {
26+
display: none;
27+
}
2328
}
2429

2530
.#{$prefix}--structured-list {
@@ -62,10 +67,11 @@
6267
cursor: inherit;
6368
}
6469

65-
.#{$prefix}--structured-list-row:focus:not(.#{$prefix}--structured-list-row--header-row) {
66-
@include focus-outline('outline');
70+
@if not feature-flag-enabled('enable-2021-release') {
71+
.#{$prefix}--structured-list-row:focus:not(.#{$prefix}--structured-list-row--header-row) {
72+
@include focus-outline('outline');
73+
}
6774
}
68-
6975
.#{$prefix}--structured-list--selection
7076
.#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
7177
> .#{$prefix}--structured-list-td,
@@ -77,7 +83,11 @@
7783
.#{$prefix}--structured-list--selection
7884
.#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
7985
> .#{$prefix}--structured-list-td {
80-
border-top: 1px solid $ui-01;
86+
@if feature-flag-enable('enabled-2021-release') {
87+
border-top: 1px solid $ui-03;
88+
} @else {
89+
border-top: 1px solid $ui-01;
90+
}
8191
}
8292

8393
.#{$prefix}--structured-list-thead {
@@ -113,6 +123,10 @@
113123
display: table-cell;
114124
max-width: 36rem;
115125
color: $text-02;
126+
@if feature-flag-enabled('enable-2021-release') {
127+
border-top: 1px solid $ui-03;
128+
}
129+
116130
transition: color $duration--fast-02 motion(standard, productive);
117131
}
118132

‎packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap‎

Lines changed: 6 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -5059,145 +5059,12 @@ Map {
50595059
},
50605060
},
50615061
},
5062-
"StructuredListWrapper" => Object {
5063-
"defaultProps": Object {
5064-
"ariaLabel": "Structured list section",
5065-
"selection": false,
5066-
},
5067-
"propTypes": Object {
5068-
"ariaLabel": Object {
5069-
"type": "string",
5070-
},
5071-
"border": [Function],
5072-
"children": Object {
5073-
"type": "node",
5074-
},
5075-
"className": Object {
5076-
"type": "string",
5077-
},
5078-
"selection": Object {
5079-
"type": "bool",
5080-
},
5081-
},
5082-
},
5083-
"StructuredListHead" => Object {
5084-
"propTypes": Object {
5085-
"children": Object {
5086-
"type": "node",
5087-
},
5088-
"className": Object {
5089-
"type": "string",
5090-
},
5091-
},
5092-
},
5093-
"StructuredListBody" => Object {
5094-
"defaultProps": Object {
5095-
"onKeyDown": [Function],
5096-
},
5097-
"propTypes": Object {
5098-
"children": Object {
5099-
"type": "node",
5100-
},
5101-
"className": Object {
5102-
"type": "string",
5103-
},
5104-
"head": Object {
5105-
"type": "bool",
5106-
},
5107-
"onKeyDown": Object {
5108-
"type": "func",
5109-
},
5110-
},
5111-
},
5112-
"StructuredListRow" => Object {
5113-
"defaultProps": Object {
5114-
"head": false,
5115-
"label": false,
5116-
"onKeyDown": [Function],
5117-
"tabIndex": 0,
5118-
},
5119-
"propTypes": Object {
5120-
"children": Object {
5121-
"type": "node",
5122-
},
5123-
"className": Object {
5124-
"type": "string",
5125-
},
5126-
"head": Object {
5127-
"type": "bool",
5128-
},
5129-
"label": Object {
5130-
"type": "bool",
5131-
},
5132-
"onKeyDown": Object {
5133-
"type": "func",
5134-
},
5135-
"tabIndex": Object {
5136-
"type": "number",
5137-
},
5138-
},
5139-
},
5140-
"StructuredListInput" => Object {
5141-
"defaultProps": Object {
5142-
"onChange": [Function],
5143-
"title": "title",
5144-
"value": "value",
5145-
},
5146-
"propTypes": Object {
5147-
"className": Object {
5148-
"type": "string",
5149-
},
5150-
"defaultChecked": Object {
5151-
"type": "bool",
5152-
},
5153-
"id": Object {
5154-
"type": "string",
5155-
},
5156-
"name": Object {
5157-
"type": "string",
5158-
},
5159-
"onChange": Object {
5160-
"type": "func",
5161-
},
5162-
"title": Object {
5163-
"type": "string",
5164-
},
5165-
"value": Object {
5166-
"args": Array [
5167-
Array [
5168-
Object {
5169-
"type": "string",
5170-
},
5171-
Object {
5172-
"type": "number",
5173-
},
5174-
],
5175-
],
5176-
"isRequired": true,
5177-
"type": "oneOfType",
5178-
},
5179-
},
5180-
},
5181-
"StructuredListCell" => Object {
5182-
"defaultProps": Object {
5183-
"head": false,
5184-
"noWrap": false,
5185-
},
5186-
"propTypes": Object {
5187-
"children": Object {
5188-
"type": "node",
5189-
},
5190-
"className": Object {
5191-
"type": "string",
5192-
},
5193-
"head": Object {
5194-
"type": "bool",
5195-
},
5196-
"noWrap": Object {
5197-
"type": "bool",
5198-
},
5199-
},
5200-
},
5062+
"StructuredListWrapper" => Object {},
5063+
"StructuredListHead" => Object {},
5064+
"StructuredListBody" => Object {},
5065+
"StructuredListRow" => Object {},
5066+
"StructuredListInput" => Object {},
5067+
"StructuredListCell" => Object {},
52015068
"Tab" => Object {
52025069
"defaultProps": Object {
52035070
"label": "provide a label",

‎packages/react/src/components/StructuredList/StructuredList-test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
StructuredListBody,
1414
StructuredListRow,
1515
StructuredListCell,
16-
} from '../StructuredList';
16+
} from './StructuredList';
1717
import { mount, shallow } from 'enzyme';
1818
import { settings } from 'carbon-components';
1919

‎packages/react/src/components/StructuredList/StructuredList.js‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -300,12 +300,3 @@ StructuredListCell.defaultProps = {
300300
head: false,
301301
noWrap: false,
302302
};
303-
304-
export default {
305-
StructuredListWrapper,
306-
StructuredListHead,
307-
StructuredListBody,
308-
StructuredListRow,
309-
StructuredListInput,
310-
StructuredListCell,
311-
};

‎packages/react/src/components/StructuredList/index.js‎

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,70 @@
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
66
*/
7+
import React from 'react';
8+
import {
9+
StructuredListWrapper as StructuredListWrapperNext,
10+
StructuredListHead as StructuredListHeadNext,
11+
StructuredListInput as StructuredListInputNext,
12+
StructuredListBody as StructuredListBodyNext,
13+
StructuredListRow as StructuredListRowNext,
14+
StructuredListCell as StructuredListCellNext,
15+
} from './next/StructuredList';
16+
import {
17+
StructuredListWrapper as StructuredListWrapperClassic,
18+
StructuredListHead as StructuredListHeadClassic,
19+
StructuredListInput as StructuredListInputClassic,
20+
StructuredListBody as StructuredListBodyClassic,
21+
StructuredListRow as StructuredListRowClassic,
22+
StructuredListCell as StructuredListCellClassic,
23+
} from './StructuredList';
24+
import { useFeatureFlag } from '../FeatureFlags';
25+
26+
export function StructuredListWrapper(props) {
27+
const enabled = useFeatureFlag('enable-2021-release');
28+
if (enabled) {
29+
return <StructuredListWrapperNext {...props} />;
30+
}
31+
return <StructuredListWrapperClassic {...props} />;
32+
}
33+
34+
export function StructuredListHead(props) {
35+
const enabled = useFeatureFlag('enable-2021-release');
36+
if (enabled) {
37+
return <StructuredListHeadNext {...props} />;
38+
}
39+
return <StructuredListHeadClassic {...props} />;
40+
}
41+
export function StructuredListInput(props) {
42+
const enabled = useFeatureFlag('enable-2021-release');
43+
if (enabled) {
44+
return <StructuredListInputNext {...props} />;
45+
}
46+
return <StructuredListInputClassic {...props} />;
47+
}
48+
49+
export function StructuredListBody(props) {
50+
const enabled = useFeatureFlag('enable-2021-release');
51+
if (enabled) {
52+
return <StructuredListBodyNext {...props} />;
53+
}
54+
return <StructuredListBodyClassic {...props} />;
55+
}
56+
57+
export function StructuredListRow(props) {
58+
const enabled = useFeatureFlag('enable-2021-release');
59+
if (enabled) {
60+
return <StructuredListRowNext {...props} />;
61+
}
62+
return <StructuredListRowClassic {...props} />;
63+
}
64+
65+
export function StructuredListCell(props) {
66+
const enabled = useFeatureFlag('enable-2021-release');
67+
if (enabled) {
68+
return <StructuredListCellNext {...props} />;
69+
}
70+
return <StructuredListCellClassic {...props} />;
71+
}
772

873
export * from './StructuredList.Skeleton';
9-
export * from './StructuredList';

0 commit comments

Comments
 (0)