fix(clipboard)!: remove role attr and fix sr support

changed to use real button tag instead pf role button and tabindex 0 so that the copy functionality works with mobile screen readers.

fixed broken tests and adjusted test to account for a 5 sec custom copy duration, cleaned up readme.

Co-Authored-By: kelsS <[email protected]>

Author: kelsS

.changeset/breezy-bikes-smell.md

@@ -0,0 +1,37 @@
+---
+"@patternfly/pfe-clipboard": major
+---
+
+Update pfe-clipboard to function with mouse, keyboard, and screen reader and meet WCAG 2.1 A - AA Guidelines ✨♿
+
+BREAKING CHANGE:
+`role="button"` and `tabindex=0` attributes must *no longer* be applied to `<pfe-clipboard>`, make sure all instances 
+on your page are updated
+
+```diff
+- <pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
++ <pfe-clipboard></pfe-clipboard>
+```
+
+`pfe-clipboard.spec.ts`
+ - Updated tests based on a11y changes
+
+`README.md`
+ - Updated readme based on a11y updates
+
+`pfe-clipboard.ts`
+ - Added new state property for aria-disabled to added aria features
+ - Added comments for changes
+ - Updated the HTML in render() to add aria features
+ - Cleaned up some comment typos
+
+`pfe-clipboard.scss`
+ - Added sr-only class to utilize with pfe-clipboard to improve the success message output for screen readers
+ - Adjusted the padding and changes some ids to be classes to go with new HTML structure
+
+`pfe-clipboard.html`
+ - Removed role button and tabindex from pfe-clipboard tags because that is being set within the shadowDom now
+pfe-clipboard.js
+ - Removed role button and tabindex from pfe-clipboard tags because that is being set within the shadowDom now
+
+See [docs](https://patternflyelements.org/components/clipboard/) for more info

elements/pfe-clipboard/README.md

@@ -28,7 +28,7 @@ import '@patternfly/pfe-clipboard';
 
 ### Default
 ```html
-<pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
+<pfe-clipboard></pfe-clipboard>
 ```
 
 ### Copy text from an element on the page
@@ -38,51 +38,51 @@ Add a valid HTML selector to the target attribute, component will use `document.
 We recommend using ID's.
 
 ```html
-<pfe-clipboard role="button" tabindex="0" copy-from="#copy-me"></pfe-clipboard>
+<pfe-clipboard copy-from="#copy-me"></pfe-clipboard>
 <div id="copy-me">This text will get copied</div>
 
-<pfe-clipboard role="button" tabindex="0" copy-from="body .copy-me"></pfe-clipboard>
+<pfe-clipboard copy-from="body .copy-me"></pfe-clipboard>
 <div class="copy-me">This text will get copied</div>
 ```
 
 ### Copy arbitrary content
 Set the attribute `copy-from="property"` and set the property `contentToCopy` on the component with what should be copied.
 ```html
 <!-- Markup on the page -->
-<pfe-clipboard role="button" tabindex="0" copy-from="property" id="copyButton"></pfe-clipboard>
+<pfe-clipboard copy-from="property" id="copyButton"></pfe-clipboard>
 ```
 ```js
 document.getElementById('copyButton').contentToCopy('Wakka wakka!');
 ```
 
 ### Optionally hide the icon
 ```html
-<pfe-clipboard no-icon role="button" tabindex="0"></pfe-clipboard>
+<pfe-clipboard no-icon></pfe-clipboard>
 ```
 
 ### Override the link text
 ```html
-<pfe-clipboard role="button" tabindex="0">
+<pfe-clipboard>
   <span slot="label">hey you, copy this url!</span>
 </pfe-clipboard>
 ```
 
 ### Override the copied notification text
 ```html
-<pfe-clipboard role="button" tabindex="0">
+<pfe-clipboard>
     <span slot="success">URL Copied to clipboard</span>
 </pfe-clipboard>
 ```
 ### Override the icon
 ```html
-<pfe-clipboard role="button" tabindex="0">
+<pfe-clipboard>
     <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
 </pfe-clipboard>
 ```
 
 ## Override all slots
 ```html
-<pfe-clipboard role="button" tabindex="0">
+<pfe-clipboard>
   <span slot="label">Copy this article URL</span>
   <span slot="success">URL Copied to clipboard</span>
   <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
@@ -91,7 +91,7 @@ document.getElementById('copyButton').contentToCopy('Wakka wakka!');
 
 ## Specify the amount of seconds the copy success text should be visible
 ```html
-<pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
+<pfe-clipboard copied-duration="5"></pfe-clipboard>
 ```
 
 ### Accessibility

elements/pfe-clipboard/demo/pfe-clipboard.html

@@ -16,96 +16,104 @@
   <p>This element embeds a copy url button on your site.</p>
 
   <h2>Clipboard</h2>
-  <pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
+  <pfe-clipboard></pfe-clipboard>
 
   <h2>Clipboard with no icon</h2>
-  <pfe-clipboard no-icon role="button" tabindex="0"></pfe-clipboard>
+  <pfe-clipboard no-icon></pfe-clipboard>
 
   <h2>Clipboard: with custom icon</h2>
-  <pfe-clipboard role="button" tabindex="0">
+  <pfe-clipboard>
     <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
   </pfe-clipboard>
 
   <h2>Clipboard: with custom text & copying text from element</h2>
-  <pfe-clipboard role="button" tabindex="0" copy-from="#textToCopy">
+  <pfe-clipboard copy-from="#textToCopy">
     <span slot="label">This will copy the text in the text field below!</span>
     <span slot="success">Making some copies!</span>
   </pfe-clipboard>
-  <input type="text" id="textToCopy" aria-label="This text will be copied" value="This text will be copied!!11"></input>
+  <input type="text" id="textToCopy" aria-label="This text will be copied." value="This text will be copied!!"></input>
 
   <h2>Clipboard: Copying text from property</h2>
-  <pfe-clipboard role="button" tabindex="0" copy-from="property" id="propertyCopy">
+  <pfe-clipboard copy-from="property" id="propertyCopy">
   </pfe-clipboard>
 
   <h2>Clipboard: with custom success text duration.</h2>
-  <pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
+  <pfe-clipboard copied-duration="5"></pfe-clipboard>
+
+  <h2>Clipboard: with invalid success text duration.</h2>
+  <p>Defaults to 4 seconds.</p>
+  <pfe-clipboard copied-duration="-1"></pfe-clipboard>
+
+  <h2>Clipboard: with invalid success text duration, lower than 4 seconds</h2>
+  <p>Defaults to 4 seconds.</p>
+  <pfe-clipboard copied-duration="1"></pfe-clipboard>
 </pfe-band>
 
 <pfe-band color="darkest">
   <p>This element embeds a copy url button on your site.</p>
 
   <h2>Clipboard</h2>
-  <pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
+  <pfe-clipboard></pfe-clipboard>
 
   <h2>Clipboard with no icon</h2>
-  <pfe-clipboard no-icon role="button" tabindex="0"></pfe-clipboard>
+  <pfe-clipboard no-icon></pfe-clipboard>
 
   <h2>Clipboard: with custom icon</h2>
-  <pfe-clipboard role="button" tabindex="0">
+  <pfe-clipboard>
     <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
   </pfe-clipboard>
 
   <h2>Clipboard: with custom text</h2>
-  <pfe-clipboard role="button" tabindex="0">
+  <pfe-clipboard>
     <span slot="label">You can totally click to copy url</span>
     <span slot="success">Making some copies!</span>
   </pfe-clipboard>
 
   <h2>Clipboard: with custom success text duration.</h2>
-  <pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
+  <pfe-clipboard copied-duration="5"></pfe-clipboard>
 </pfe-band>
 
 <pfe-band color="accent">
   <p>This element embeds a copy url button on your site.</p>
 
   <h2>Clipboard</h2>
-  <pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
+  <pfe-clipboard></pfe-clipboard>
 
   <h2>Clipboard with no icon</h2>
-  <pfe-clipboard no-icon role="button" tabindex="0"></pfe-clipboard>
+  <pfe-clipboard no-icon></pfe-clipboard>
 
   <h2>Clipboard: with custom icon</h2>
-  <pfe-clipboard role="button" tabindex="0">
+  <pfe-clipboard>
     <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
   </pfe-clipboard>
 
   <h2>Clipboard: with custom text</h2>
-  <pfe-clipboard role="button" tabindex="0">
+  <pfe-clipboard>
     <span slot="label">You can totally click to copy url</span>
     <span slot="success">Making some copies!</span>
   </pfe-clipboard>
 
   <h2>Clipboard: with custom success text duration.</h2>
-  <pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
+  <pfe-clipboard copied-duration="5"></pfe-clipboard>
 </pfe-band>
 
 <pfe-band color="lightest">
   <h2>Error cases</h2>
 
   <h3>Set to copy "property", but Property doesn't exist</h3>
-  <pfe-clipboard role="button" tabindex="0" copy-from="property">
+  <pfe-clipboard copy-from="property">
     <span slot="label">Oops, I didn't set the property to be copied</span>
   </pfe-clipboard>
 
   <h3>Set to copy a non-existent selector</h3>
-  <pfe-clipboard role="button" tabindex="0" copy-from="#wakka-wakka">
+  <pfe-clipboard copy-from="#wakka-wakka">
     <span slot="label">Oops, I didn't set a valid selector to be copied</span>
   </pfe-clipboard>
 
 </pfe-band>
 
 <pfe-band color="darkest">
-  <pfe-clipboard role="button" tabindex="0" copy-from="property">
+  <pfe-clipboard copy-from="property">
     <span slot="label">Oops, I didn't set the property to be copied</span>
   </pfe-clipboard>
 </pfe-band>

elements/pfe-clipboard/demo/pfe-clipboard.js

@@ -6,9 +6,9 @@ const root = document.querySelector('[data-demo="pfe-clipboard"]')?.shadowRoot ?
 
 root.getElementById('propertyCopy').contentToCopy = `
   <h2>Clipboard: with custom text & copying text from element</h2>
-  <pfe-clipboard role="button" tabindex="0" copy-from="#textToCopy">
+  <pfe-clipboard copy-from="#textToCopy">
     <span slot="text">This will copy the text in the text field below!</span>
     <span slot="success">Making some copies!</span>
   </pfe-clipboard>
-  <input type="text" id="textToCopy" value="This text will be copied!!11"></input>
+  <input type="text" id="textToCopy" value="This text will be copied!!"></input>
 `;

elements/pfe-clipboard/docs/index.md

@@ -1,105 +1,105 @@
 {% renderOverview %}
-  <pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
+  <pfe-clipboard></pfe-clipboard>
 {% endrenderOverview %}
 
 {% band header="Usage" %}
   ### Default
-  <pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
+  <pfe-clipboard></pfe-clipboard>
   ```html
-  <pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
+  <pfe-clipboard></pfe-clipboard>
   ```
 
   ### Optionally hide the icon
-  <pfe-clipboard no-icon role="button" tabindex="0"></pfe-clipboard>
+  <pfe-clipboard no-icon></pfe-clipboard>
   ```html
-  <pfe-clipboard no-icon role="button" tabindex="0"></pfe-clipboard>
+  <pfe-clipboard no-icon></pfe-clipboard>
   ```
 
   ### Override the link text
-  <pfe-clipboard role="button" tabindex="0">
+  <pfe-clipboard>
     <span slot="label">You can copy this url</span>
   </pfe-clipboard>
 
   ```html
-  <pfe-clipboard role="button" tabindex="0">
+  <pfe-clipboard>
     <span slot="label">You can copy this url</span>
   </pfe-clipboard>
   ```
 
   ### Copying text from element with custom button text
-  <pfe-clipboard role="button" tabindex="0" copy-from="#textToCopy">
+  <pfe-clipboard copy-from="#textToCopy">
     <span slot="label">This will copy the text in the text field below!</span>
   </pfe-clipboard>
   <input type="text" id="textToCopy" value="This text will be copied!"></input>
 
   ```html
-  <pfe-clipboard role="button" tabindex="0" copy-from="#textToCopy">
+  <pfe-clipboard copy-from="#textToCopy">
     <span slot="label">This will copy the text in the text field below!</span>
   </pfe-clipboard>
   <input type="text" id="textToCopy" value="This text will be copied!"></input>
   ```
 
   ### Copying text from property
-  <pfe-clipboard role="button" tabindex="0" copy-from="property" id="propertyCopy">
+  <pfe-clipboard copy-from="property" id="propertyCopy">
   </pfe-clipboard>
   <script>
     window.addEventListener('load', function() {
-      document.getElementById('propertyCopy').contentToCopy = '    <h2>Clipboard: with custom text & copying text from element</h2>\n    <pfe-clipboard role="button" tabindex="0" copy-from="#textToCopy">\n      <span slot="label">This will copy the text in the text field below!</span>\n      <span slot="success">Making some copies!</span>\n    </pfe-clipboard>\n    <input type="text" id="textToCopy" value="This text will be copied!!11"></input>';
+      document.getElementById('propertyCopy').contentToCopy = '    <h2>Clipboard: with custom text & copying text from element</h2>\n    <pfe-clipboard copy-from="#textToCopy">\n      <span slot="label">This will copy the text in the text field below!</span>\n      <span slot="success">Making some copies!</span>\n    </pfe-clipboard>\n    <input type="text" id="textToCopy" value="This text will be copied!!"></input>';
     })
   </script>
 
   ```html
-  <pfe-clipboard role="button" tabindex="0" copy-from="property" id="propertyCopy">
+  <pfe-clipboard copy-from="property" id="propertyCopy">
   </pfe-clipboard>
   <script>
     window.addEventListener('load', function() {
-      document.getElementById('propertyCopy').contentToCopy = '    <h2>Clipboard: with custom text & copying text from element</h2>\n    <pfe-clipboard role="button" tabindex="0" copy-from="#textToCopy">\n      <span slot="label">This will copy the text in the text field below!</span>\n      <span slot="success">Making some copies!</span>\n    </pfe-clipboard>\n    <input type="text" id="textToCopy" value="This text will be copied!!11"></input>';
+      document.getElementById('propertyCopy').contentToCopy = '    <h2>Clipboard: with custom text & copying text from element</h2>\n    <pfe-clipboard copy-from="#textToCopy">\n      <span slot="label">This will copy the text in the text field below!</span>\n      <span slot="success">Making some copies!</span>\n    </pfe-clipboard>\n    <input type="text" id="textToCopy" value="This text will be copied!!"></input>';
     })
   </script>
   ```
 
   ### Override the copied notification text
-  <pfe-clipboard role="button" tabindex="0">
+  <pfe-clipboard>
     <span slot="success">URL Copied to clipboard</span>
   </pfe-clipboard>
 
   ```html
-  <pfe-clipboard role="button" tabindex="0">
+  <pfe-clipboard>
     <span slot="success">URL Copied to clipboard</span>
   </pfe-clipboard>
   ```
 
   ### Override the icon
-  <pfe-clipboard role="button" tabindex="0">
+  <pfe-clipboard>
     <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
   </pfe-clipboard>
 
   ```html
-  <pfe-clipboard role="button" tabindex="0">
+  <pfe-clipboard>
     <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
   </pfe-clipboard>
   ```
 
   ### Override all slots
-  <pfe-clipboard role="button" tabindex="0">
+  <pfe-clipboard>
     <span slot="label">Copy this article URL</span>
     <span slot="success">URL Copied to clipboard</span>
     <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
   </pfe-clipboard>
 
   ```html
-  <pfe-clipboard role="button" tabindex="0">
+  <pfe-clipboard>
     <span slot="label">Copy this article URL</span>
     <span slot="success">URL Copied to clipboard</span>
     <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
   </pfe-clipboard>
   ```
 
   ### Specify the amount of seconds the copy success text should be visible
-  <pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
+  <pfe-clipboard copied-duration="5"></pfe-clipboard>
 
   ```html
-  <pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
+  <pfe-clipboard copied-duration="5"></pfe-clipboard>
   ```
 {% endband %}