Skip to content

Commit bff9977

Browse files
pedrottimarkpedrottimark
authored
ROX-33675: Use screenReaderText prop for empty Th elements (#19521)
1 parent b316326 commit bff9977

File tree

37 files changed

+87
-152
lines changed

37 files changed

+87
-152
lines changed

‎ui/apps/platform/cypress/integration/accessControl/accessControlAccessScopes.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ describe('Access Control Access scopes', () => {
3939
cy.get('th:contains("Origin")');
4040
cy.get('th:contains("Description")');
4141
cy.get('th:contains("Roles")');
42-
cy.get(`th:has('span.pf-v6-screen-reader:contains("Row actions")')`);
42+
cy.get(`th:has('span.pf-v6-u-screen-reader:contains("Row actions")')`);
4343
});
4444

4545
it('list has default names', () => {

‎ui/apps/platform/cypress/integration/accessControl/accessControlAuthProviders.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ describe('Access Control Auth providers', () => {
5959
cy.get('th:contains("Type")');
6060
cy.get('th:contains("Minimum access role")');
6161
cy.get('th:contains("Assigned rules")');
62-
cy.get(`th:has('span.pf-v6-screen-reader:contains("Row actions")')`);
62+
cy.get(`th:has('span.pf-v6-u-screen-reader:contains("Row actions")')`);
6363
});
6464

6565
it('add Auth0', () => {

‎ui/apps/platform/cypress/integration/accessControl/accessControlPermissionSets.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ describe('Access Control Permission sets', () => {
3939
cy.get('th:contains("Origin")');
4040
cy.get('th:contains("Description")');
4141
cy.get('th:contains("Roles")');
42-
cy.get(`th:has('span.pf-v6-screen-reader:contains("Row actions")')`);
42+
cy.get(`th:has('span.pf-v6-u-screen-reader:contains("Row actions")')`);
4343
});
4444

4545
it('list has default names', () => {

‎ui/apps/platform/cypress/integration/accessControl/accessControlRoles.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ describe('Access Control Roles', () => {
4141
cy.get('th:contains("Description")');
4242
cy.get('th:contains("Permission set")');
4343
cy.get('th:contains("Access scope")');
44-
cy.get(`th:has('span.pf-v6-screen-reader:contains("Row actions")')`);
44+
cy.get(`th:has('span.pf-v6-u-screen-reader:contains("Row actions")')`);
4545
});
4646

4747
it('list has default names', () => {

‎ui/apps/platform/eslint-plugins/pluginPatternFly.js‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -110,23 +110,11 @@ const rules = {
110110
);
111111

112112
// PatternFly adds screenReaderText prop of Th element.
113-
// const hasValueAsScreenReaderText = (arg) =>
114-
// arg?.openingElement?.attributes?.some(
115-
// (attribute) =>
116-
// attribute.name?.name === 'screenReaderText' &&
117-
// attribute.value?.value === dataLabel
118-
// );
119113
const hasValueAsScreenReaderText = (arg) =>
120-
arg?.children?.some(
121-
(child) =>
122-
child.openingElement?.name?.name === 'span' &&
123-
child.openingElement.attributes?.some(
124-
(attribute) =>
125-
attribute.name?.name === 'className' &&
126-
attribute.value?.value ===
127-
'pf-v6-screen-reader'
128-
) &&
129-
hasValueAsText(child)
114+
arg?.openingElement?.attributes?.some(
115+
(attribute) =>
116+
attribute.name?.name === 'screenReaderText' &&
117+
attribute.value?.value === dataLabel
130118
);
131119

132120
const hasValue = (arg) =>
@@ -439,6 +427,38 @@ const rules = {
439427
};
440428
},
441429
},
430+
'no-span-pf-v6-u-screen-reader': {
431+
// Prevent work-around before PatternFly 5.3 supported screenReaderText prop of Th element.
432+
meta: {
433+
type: 'problem',
434+
docs: {
435+
description:
436+
'Replace pf-v6-u-screen-reader as className of span with screenReaderText prop in Th element',
437+
},
438+
schema: [],
439+
},
440+
create(context) {
441+
return {
442+
JSXOpeningElement(node) {
443+
if (node.name?.name === 'span') {
444+
if (
445+
node.attributes.some(
446+
(attribute) =>
447+
attribute.name?.name === 'className' &&
448+
attribute.value?.value === 'pf-v6-u-screen-reader'
449+
)
450+
) {
451+
context.report({
452+
node,
453+
message:
454+
'Replace pf-v6-u-screen-reader as className of span with screenReaderText prop in Th element',
455+
});
456+
}
457+
}
458+
},
459+
};
460+
},
461+
},
442462
};
443463

444464
const pluginKey = 'patternfly'; // key of pluginPatternFly in eslint.config.js file

‎ui/apps/platform/src/Components/ExpandRowTh.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,12 @@ export default function ExpandRowTh(props: ThProps) {
99
return (
1010
<Th
1111
{...props}
12+
screenReaderText="Row expansion"
1213
style={{
1314
// Setting a defined width here prevents column shift when the table is in a loading state
1415
width: `calc(${expandButtonWidth} + ${expandButtonPaddingX} + ${firstTableCellPadding})`,
1516
...props.style,
1617
}}
17-
>
18-
<span className="pf-v6-screen-reader">Row expansion</span>
19-
</Th>
18+
/>
2019
);
2120
}

‎ui/apps/platform/src/Components/ReportJob/ReportJobsTable.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -60,17 +60,13 @@ function ReportJobsTable<T extends Snapshot>({
6060
<Table aria-label="Jobs table" variant="compact">
6161
<Thead>
6262
<Tr>
63-
<Th>
64-
<span className="pf-v6-screen-reader">Row expansion</span>
65-
</Th>
63+
<Th screenReaderText="Row expansion" />
6664
<Th width={25} sort={getSortParams('Compliance Report Completed Time')}>
6765
Completed
6866
</Th>
6967
<Th>Status</Th>
7068
<Th>Requester</Th>
71-
<Th>
72-
<span className="pf-v6-screen-reader">Row actions</span>
73-
</Th>
69+
<Th screenReaderText="Row actions" />
7470
</Tr>
7571
</Thead>
7672
<TbodyUnified

‎ui/apps/platform/src/Containers/AccessControl/AccessScopes/AccessScopesList.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,7 @@ function AccessScopesList({
7474
<Th width={15}>Origin</Th>
7575
<Th width={25}>Description</Th>
7676
<Th width={35}>Roles</Th>
77-
<Th width={10}>
78-
<span className="pf-v6-screen-reader">Row actions</span>
79-
</Th>
77+
<Th width={10} screenReaderText="Row actions" />
8078
</Tr>
8179
</Thead>
8280
<Tbody>

‎ui/apps/platform/src/Containers/AccessControl/AccessScopes/LabelSelectorCard.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -201,9 +201,7 @@ function LabelSelectorCard({
201201
<Thead>
202202
<Tr>
203203
<Th width={40}>Key</Th>
204-
<Th>
205-
<span className="pf-v6-screen-reader">Operator</span>
206-
</Th>
204+
<Th screenReaderText="Operator" />
207205
<Th width={40}>Values</Th>
208206
{isLabelSelectorActive && <Th modifier="fitContent">Action</Th>}
209207
</Tr>

‎ui/apps/platform/src/Containers/AccessControl/AuthProviders/AuthProvidersList.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,7 @@ function AuthProvidersList({ authProviders }: AuthProvidersListProps): ReactElem
6666
<Th width={15}>Type</Th>
6767
<Th width={20}>Minimum access role</Th>
6868
<Th width={25}>Assigned rules</Th>
69-
<Th width={10}>
70-
<span className="pf-v6-screen-reader">Row actions</span>
71-
</Th>
69+
<Th width={10} screenReaderText="Row actions" />
7270
</Tr>
7371
</Thead>
7472
<Tbody>

0 commit comments

Comments
 (0)