We need to be able to set the role attribute on pf-button

[kelsS]

Description of the issue

Devs need to be able to set the role attribute on pf-button. For example, I am using pf-button as a tab control and I need to set the role=tab directly on pf-button in order to follow the proper design pattern for the carousel slider I am working on.

Please see the following link for more info about the carousel design pattern

• https://www.w3.org/WAI/ARIA/apg/patterns/carousel/

Impacted component(s)

• pf-button
• https://github.com/patternfly/patternfly-elements/tree/main/elements/pf-button

Steps to reproduce

1. Open a Codepen in Chrome
2. Import pf-button into a pen
3. Try to add role="tab" to the pf-button
4. Inspect the devtools and observe that the role does not get added

Expected behavior

The role attribute is added to the button in the shadow root with whatever the user needs the role to be, in my case "tab".

This is a sev-2 issue at least because this is causing a very inaccessible experience for cp-slider

[kelsS]

This issue is blocking a CP Ticket for high priority a11y fixes

[bennypowers]

patternfly-elements/elements/pf-button/pf-button.ts

Line 205 in f3f68c9

#internals = InternalsController.of(this, { role: 'button' });

Button uses ElementInternals to set the role, which should not override user role attr. Perhaps theres an issue with the controller

[bennypowers]

Please see #2806

[kelsS]

This issue was resolved with @bennypowers PR. Further discussion is needed for how to handle tabs buttons within a carousel slider.