Description

Apply 80/20 principle to fix generic issues so team members can divide and conquer pages that have specific issues.

Problem

Table header text should not be empty

https://dequeuniversity.com/rules/axe/4.9/empty-table-header

<th tabindex="-1" class="pf-v5-c-table__th"></th>

Analysis

Thank you David for observing <Th screenReaderText="Row expansion" /> in PatternFly example code that renders:

https://www.patternfly.org/components/table#expandable

<th><span className="pf-v5-screen-reader">{screenReaderText}</span></th>

patternfly/patternfly-react#10152

Until upgrade to PatternFly 5.3 in which Th element has screenReaderText prop, temporary solution is to render the span element as a child:

Here are the most common situations:

• Row selection
• Row expansion
• Row actions

Solution

1. Update selectors in integration tests for access control.
2. Replace initial work-around Td in table head with Th element that has temporary child (pending future screenReaderText prop).
3. Replace attempted work-around aria-label in Th element with temporary child (pending future screenReaderText prop).
4. Add temporary child (pending future screenReaderText prop) to Th that does not have children, nor expand or select props (for which PatternFly renders children).
5. Find occurrences to fix and prevent future problems via project-specific lint rules.
6. Provide an easier pattern to follow for future accessibility rules.
   • Rename pluginAccessibility.js file more consistent with eslint-plugin-whatever package name and pluginWhatever name in eslint.config.js file.
   • Apply suggestion by Brad that recommended configuration removes need to change eslint.config.js file in the future.
   • Remove incorrect exceptions that prevented lint of pluginAccessibility.js file.
   • Remove jsx-a11y rules because its rules are based on HTML not PatternFly elements.

Residue

1. Replace more occurrences with ExpandRowTh element?
2. Remove eslint-plugin-jsx-a11y package from devDependencies after we replace yarn with npm.

User-facing documentation

• CHANGELOG update is not needed
• documentation PR is not needed

Testing and quality

• the change is production ready: the change is GA or otherwise the functionality is gated by a feature flag
• CI results are inspected

Automated testing

• added unit tests
• added e2e tests
• added regression tests
• added compatibility tests
• modified existing tests

How I validated my change

1. yarn lint in ui
2. yarn build in ui and then compute branch - master for the following
   • wc build/static/js/*.js
     main.js 0 = 4617863 - 4617863
     total 2114 = 11688528 - 11686414
   • ls -al build/static/js/*.js | wc
     files 0 = 174 - 174
3. yarn start in ui

Manual testing

1. Visit /main/listening-endpoints and see that expand prop of Th element renders a child.
   

2. Visit /main/integrations/imageIntegrations/docker

   • Before changes, see td element at the right of table head.
     

   • After changes, see th element at the right of table head.
     

3. Visit /main/access-control/permission-sets

   • Before changes, see th element with aria-label prop and presence of accessibility issue.
     

   • After changes, see th element with temporary span and absence of accessibility issue.
     

4. Visit /main/access-control/roles?action=create

   • Before changes, see empty th element and presence of accessibility issue.
     

   • After changes, see th element with temporary span and absence of accessibility issue.
     

Integration testing

• accessControl/accessControlAccessScopes.test.js
• accessControl/accessControlAuthProviders.test.js
• accessControl/accessControlOrigin.test.js
• accessControl/accessControlPermissionSets.test.js
• accessControl/accessControlRoles.test.js