fix(table): fix table accessibility issue-2813

[atharv-g-kulkarni]

What I did

• Fixed issues mentioned in the issue.
• Improved accessibility score of pf-table (Table, Expandable Rows Compound, Sortable) from 91 to 100

Before:

After:

---

• Improved accessibility score of pf-table (Expandable Rows) improved from 81 to 90.

Before:

After:

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0136786

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

✅ Commitlint tests passed!

More Info

{
  "valid": true,
  "errors": [],
  "warnings": [],
  "input": "fix(table): fix table accessibility issue-2813"
}

[netlify]

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	1e2f9a1
🔍 Latest deploy log	https://app.netlify.com/sites/patternfly-elements/deploys/67530d561e7b5e00080c3f59
😎 Deploy Preview	https://deploy-preview-2885--patternfly-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[zeroedin]

We shouldn't need to set role here as this gets applied at element internals level if the variant is not set to link, aka role should just be automatically set by the pf-button component itself.

Suggested change

role="button"

[atharv-g-kulkarni]

Thank you for your suggestion.
I have removed role="button" and pushed the changes.

[zeroedin]

pf-button has an API for adding the accessible label. We'd use label here instead of using the aria-label on the host.

Suggested change

	aria-label="Expand Button"
	label="Expand Button"

[atharv-g-kulkarni]

Thank you for your suggestion.
I have changed aria-label to label and pushed the changes.

[zeroedin]

So enacting the requested changes myself locally I think I opened a broader issue here. Because we are using button as an expander, and using aria-expanded on it we equally need a aria-controls which isn't currently being applied. Also due to the fact the element being opened#expansion is across shadow dom roots I'm going to assume we are going to run into cross root aria issues with that.

@adamjohnson when you get the chance lets review this together.

[bennypowers]

can the button's aria-controls reference be to the row on

patternfly-elements/elements/pf-table/pf-tr.ts

Line 125 in 1e2f9a1

<div id="container" role="${ifDefined(this.expandable ? 'row' : undefined)}">

?