fix(button)!: remove shadow <button> (#2707)

* docs(button): fix demo

* fix(button)!: remove shadow <button>

Closes #2706

* fix(chip): use the new pf-button

* test(button): form submit

* fix(button): click event on space/enter

* test(chip): refactor tests

* test: update tests

* test(back-to-top): fix a11y assertion

* test(dropdown): skip aria attrs assertion

see dequelabs/axe-core#4259

Author: bennypowers

.changeset/curly-wings-cross.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": major
+---
+`<pf-button>`: improves accessibility of elements that use `<pf-button>` by giving the custom element itself the `button` role

elements/pf-back-to-top/test/pf-back-to-top.spec.ts

@@ -73,7 +73,7 @@ describe('<pf-back-to-top>', function() {
       });
 
       it('should be accessible', async function() {
-        await expect(element).to.be.accessible;
+        await expect(element).to.be.accessible();
       });
 
       describe('pressing the tab key', function() {
@@ -103,7 +103,7 @@ describe('<pf-back-to-top>', function() {
       });
 
       it('should be accessible', async function() {
-        await expect(element).to.be.accessible;
+        await expect(element).to.be.accessible();
       });
 
       describe('pressing the tab key', function() {
@@ -310,4 +310,3 @@ describe('<pf-back-to-top>', function() {
     });
   });
 });
-

elements/pf-button/demo/variants.html

@@ -11,7 +11,7 @@
   <h2>Disabled</h2>
   <pf-button disabled>Primary</pf-button>
   <pf-button disabled variant="secondary">Secondary</pf-button>
-  <pf-button disabled variant="secondary" danger>Danger Secondary
+  <pf-button disabled variant="secondary" danger>Danger Secondary</pf-button>
   <pf-button disabled variant="tertiary">Tertiary</pf-button>
   <pf-button disabled danger>Danger</pf-button>
   <pf-button disabled warning>Warning</pf-button>

elements/pf-button/pf-button-base.css

@@ -4,7 +4,7 @@
  *                            *
  ******************************/
 
-.pf-button.hasIcon {
+.hasIcon {
   gap: calc(2 * var(--pf-c-button__icon--m-start--MarginLeft,
     var(--pf-global--spacer--xs, 0.25rem)));
 }

elements/pf-button/pf-button-icon.css

@@ -167,4 +167,7 @@
 	--pf-c-button--disabled__c-badge--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
 	--pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);
 	--pf-c-button--m-primary__c-badge--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+
+  --_button-color: var(--pf-c-button--m-primary--Color);
+  --_button-background-color: var(--pf-c-button--m-primary--BackgroundColor);
 }