Update deprecated a11y attributes in button component (#666)

* fix(button): update test to use a11y-pressed * fix(toggle-button): update to use a11y-pressed The pressed attribute is deprecated in favor of a11y-pressed. This updates the toggle button group to use the new attribute and stop console logging deprecation warnings when it is used. * fix(button): update label attribute to a11y-label Recently the label attribute was deprecated in favor of a11y-label. This updtes all the button uses internal to the library to use the new attribute. This prevents confusing warnings in the console for the end users. * chore: add changeset
ithaka · Jan 18, 2024 · 79229b2 · 79229b2
1 parent 0bea422
commit 79229b2
Show file tree

Hide file tree

Showing 37 changed files with 96 additions and 85 deletions.
diff --git a/.changeset/tasty-dryers-know.md b/.changeset/tasty-dryers-know.md
@@ -0,0 +1,6 @@
+---
+'@ithaka/pharos': patch
+'@ithaka/pharos-site': patch
+---
+
+Update internal button usage to use a11y-pressed and a11y-label attributes
diff --git a/packages/pharos-site/static/guidelines/input-group.docs.mdx b/packages/pharos-site/static/guidelines/input-group.docs.mdx
@@ -14,7 +14,12 @@ import BestPractices from '@components/statics/BestPractices.tsx';
 ```jsx live
 <PharosInputGroup name="my-input-group">
   <span slot="label">Search</span>
-  <PharosButton name="search-button" icon="search" variant="subtle" label="search"></PharosButton>
+  <PharosButton
+    name="search-button"
+    icon="search"
+    variant="subtle"
+    a11yLabel="search"
+  ></PharosButton>
 </PharosInputGroup>
 ```
 

diff --git a/packages/pharos/src/components/alert/pharos-alert.ts b/packages/pharos/src/components/alert/pharos-alert.ts
@@ -114,7 +114,7 @@ export class PharosAlert extends ScopedRegistryMixin(FocusMixin(PharosElement))
           variant="subtle"
           icon="close"
           icon-condensed
-          label="Close alert"
+          a11y-label="Close alert"
           class="alert__button"
           @click=${this.close}
         ></pharos-button>`

diff --git a/packages/pharos/src/components/button/PharosButton.react.stories.jsx b/packages/pharos/src/components/button/PharosButton.react.stories.jsx
@@ -45,7 +45,7 @@ export const Base = {
       fullWidth={args.fullWidth}
       href={args.href}
       hreflang={args.hreflang}
-      label={args.label}
+      a11yLabel={args.label}
       large={args.large}
       onBackground={args.onBackground}
       ping={args.ping}

diff --git a/packages/pharos/src/components/button/pharos-button.test.ts b/packages/pharos/src/components/button/pharos-button.test.ts
@@ -26,7 +26,7 @@ describe('pharos-button', () => {
 
     it('is accessible as an icon button', async () => {
       component.icon = 'download';
-      component.label = 'download';
+      component.a11yLabel = 'download';
       await component.updateComplete;
       await expect(component).to.be.accessible();
     });
@@ -113,7 +113,7 @@ describe('pharos-button', () => {
 
     it('is accessible when pressed', async () => {
       component = await fixture(
-        html`<test-pharos-button pressed="true">I am a pressed button</test-pharos-button>`
+        html`<test-pharos-button a11y-pressed="true">I am a pressed button</test-pharos-button>`
       );
       await expect(component).to.be.accessible();
     });

diff --git a/packages/pharos/src/components/button/pharos-button.wc.stories.jsx b/packages/pharos/src/components/button/pharos-button.wc.stories.jsx
@@ -30,7 +30,7 @@ export const Base = {
         ?full-width=${ifDefined(args.fullWidth)}
         href=${ifDefined(args.href)}
         hreflang=${ifDefined(args.hreflang)}
-        label=${ifDefined(args.label)}
+        a11y-label=${ifDefined(args.label)}
         ?large=${ifDefined(args.large)}
         ?on-background=${ifDefined(args.onBackground)}
         ping=${ifDefined(args.ping)}

diff --git a/packages/pharos/src/components/coach-mark/pharos-coach-mark.ts b/packages/pharos/src/components/coach-mark/pharos-coach-mark.ts
@@ -130,7 +130,7 @@ export class PharosCoachMark extends ScopedRegistryMixin(PharosElement) {
               type="button"
               variant="${this.variant === 'light' ? 'subtle' : 'overlay'}"
               icon="close"
-              label="Close"
+              a11y-label="Close"
               @click="${() => (this.hide = true)}"
             ></pharos-button>
             <pharos-heading

diff --git a/packages/pharos/src/components/combobox/pharos-combobox.ts b/packages/pharos/src/components/combobox/pharos-combobox.ts
@@ -259,7 +259,7 @@ export class PharosCombobox extends ScopedRegistryMixin(FormMixin(FormElement))
           variant="subtle"
           icon="close"
           ?disabled=${this.disabled}
-          label="Clear option"
+          a11y-label="Clear option"
           @click=${this._handleClearClick}
           @mousedown=${this._handleClearClick}
         >
@@ -278,7 +278,7 @@ export class PharosCombobox extends ScopedRegistryMixin(FormMixin(FormElement))
           type="button"
           variant="subtle"
           class="search__button"
-          label="Search"
+          a11y-label="Search"
           ?disabled=${this.disabled}
           @click=${this.onChange}
         ></pharos-button>

diff --git a/packages/pharos/src/components/header/PharosHeader.react.stories.jsx b/packages/pharos/src/components/header/PharosHeader.react.stories.jsx
@@ -88,7 +88,7 @@ export const Base = {
             name="search-button"
             icon="search"
             variant="subtle"
-            label="search"
+            a11yLabel="search"
           ></PharosButton>
         </PharosInputGroup>
       </div>

diff --git a/packages/pharos/src/components/header/pharos-header.wc.stories.jsx b/packages/pharos/src/components/header/pharos-header.wc.stories.jsx
@@ -97,7 +97,7 @@ export const Base = {
               name="search-button"
               icon="search"
               variant="subtle"
-              label="search"
+              a11y-label="search"
             ></storybook-pharos-button>
           </storybook-pharos-input-group>
         </div>

diff --git a/packages/pharos/src/components/image-card/pharos-image-card.ts b/packages/pharos/src/components/image-card/pharos-image-card.ts
@@ -367,7 +367,7 @@ export class PharosImageCard extends ScopedRegistryMixin(FocusMixin(PharosElemen
           icon="ellipses-vertical"
           variant="subtle"
           icon-condensed
-          label="More actions"
+          a11y-label="More actions"
           @click=${this._handleClick}
         ></pharos-button>`
       : html`<slot name="action-button"></slot>`;

diff --git a/packages/pharos/src/components/input-group/PharosInputGroup.react.stories.jsx b/packages/pharos/src/components/input-group/PharosInputGroup.react.stories.jsx
@@ -38,7 +38,7 @@ export const Base = {
           name="search-button"
           icon="search"
           variant="subtle"
-          label="search"
+          a11yLabel="search"
         ></PharosButton>
       </PharosInputGroup>
     </div>
@@ -60,7 +60,7 @@ export const Prominent = {
           name="search-button"
           icon="search"
           variant="subtle"
-          label="search"
+          a11yLabel="search"
         ></PharosButton>
       </PharosInputGroup>
     </div>
@@ -82,7 +82,7 @@ export const Validity = {
           name="search-button"
           icon="search"
           variant="subtle"
-          label="search"
+          a11yLabel="search"
         ></PharosButton>
       </PharosInputGroup>
       <PharosInputGroup validated value="[email protected]" name="my-input-group">
@@ -91,7 +91,7 @@ export const Validity = {
           name="search-button"
           icon="search"
           variant="subtle"
-          label="search"
+          a11yLabel="search"
         ></PharosButton>
       </PharosInputGroup>
     </div>
@@ -117,13 +117,13 @@ export const Composition = {
           name="close-button"
           icon="close"
           variant="subtle"
-          label="close"
+          a11yLabel="close"
         ></PharosButton>
         <PharosButton
           name="search-button"
           icon="search"
           variant="subtle"
-          label="search"
+          a11yLabel="search"
         ></PharosButton>
       </PharosInputGroup>
       <PharosInputGroup name="my-input-group-select">
@@ -137,7 +137,7 @@ export const Composition = {
           name="search-with-select-button"
           icon="search"
           variant="subtle"
-          label="search"
+          a11yLabel="search"
         ></PharosButton>
       </PharosInputGroup>
       <PharosInputGroup name="my-input-group-prepend">
@@ -146,7 +146,7 @@ export const Composition = {
           slot="prepend"
           icon="book"
           variant="subtle"
-          label="book"
+          a11yLabel="book"
         ></PharosButton>
         <span slot="label">Prepend</span>
       </PharosInputGroup>

diff --git a/packages/pharos/src/components/input-group/pharos-input-group.test.ts b/packages/pharos/src/components/input-group/pharos-input-group.test.ts
@@ -10,7 +10,7 @@ describe('pharos-input-group', () => {
     component = await fixture(html`
       <test-pharos-input-group>
         <span slot="label">Search</span>
-        <test-pharos-button icon="search" variant="subtle" label="search"></test-pharos-button>
+        <test-pharos-button icon="search" variant="subtle" a11y-label="search"></test-pharos-button>
       </test-pharos-input-group>
     `);
   });
@@ -38,7 +38,7 @@ describe('pharos-input-group', () => {
             slot="prepend"
             icon="search"
             variant="subtle"
-            label="search"
+            a11y-label="search"
           ></test-pharos-button>
         </test-pharos-input-group>
       `

diff --git a/packages/pharos/src/components/input-group/pharos-input-group.wc.stories.jsx b/packages/pharos/src/components/input-group/pharos-input-group.wc.stories.jsx
@@ -21,7 +21,7 @@ export const Base = {
             name="search-button"
             icon="search"
             variant="subtle"
-            label="search"
+            a11y-label="search"
           ></storybook-pharos-button>
         </storybook-pharos-input-group>
       </div>
@@ -38,7 +38,7 @@ export const Prominent = {
             name="search-button"
             icon="search"
             variant="subtle"
-            label="search"
+            a11y-label="search"
           ></storybook-pharos-button>
         </storybook-pharos-input-group>
         <storybook-pharos-input-group name="my-input-group" variant="prominent" invalidated>
@@ -47,7 +47,7 @@ export const Prominent = {
             name="search-button"
             icon="search"
             variant="subtle"
-            label="search"
+            a11y-label="search"
           ></storybook-pharos-button>
         </storybook-pharos-input-group>
         <storybook-pharos-input-group name="prominent-prepend" variant="prominent">
@@ -56,7 +56,7 @@ export const Prominent = {
             slot="prepend"
             icon="book"
             variant="subtle"
-            label="book"
+            a11y-label="book"
           ></storybook-pharos-button>
           <span slot="label">prominent Prepend</span>
         </storybook-pharos-input-group>
@@ -66,20 +66,20 @@ export const Prominent = {
             slot="prepend"
             icon="book"
             variant="subtle"
-            label="book"
+            a11y-label="book"
           ></storybook-pharos-button>
           <span slot="label">Multiple buttons</span>
           <storybook-pharos-button
             name="close-button"
             icon="close"
             variant="subtle"
-            label="close"
+            a11y-label="close"
           ></storybook-pharos-button>
           <storybook-pharos-button
             name="search-button"
             icon="search"
             variant="subtle"
-            label="search"
+            a11y-label="search"
           ></storybook-pharos-button>
         </storybook-pharos-input-group>
       </div>
@@ -96,7 +96,7 @@ export const Validity = {
             name="search-button"
             icon="search"
             variant="subtle"
-            label="search"
+            a11y-label="search"
           ></storybook-pharos-button>
         </storybook-pharos-input-group>
         <storybook-pharos-input-group validated value="[email protected]" name="my-input-group">
@@ -105,7 +105,7 @@ export const Validity = {
             name="search-button"
             icon="search"
             variant="subtle"
-            label="search"
+            a11y-label="search"
           ></storybook-pharos-button>
         </storybook-pharos-input-group>
       </div>
@@ -130,13 +130,13 @@ export const Composition = {
             name="close-button"
             icon="close"
             variant="subtle"
-            label="close"
+            a11y-label="close"
           ></storybook-pharos-button>
           <storybook-pharos-button
             name="search-button"
             icon="search"
             variant="subtle"
-            label="search"
+            a11y-label="search"
           ></storybook-pharos-button>
         </storybook-pharos-input-group>
         <storybook-pharos-input-group name="my-input-group-select">
@@ -150,7 +150,7 @@ export const Composition = {
             name="search-with-select-button"
             icon="search"
             variant="subtle"
-            label="search"
+            a11y-label="search"
           ></storybook-pharos-button>
         </storybook-pharos-input-group>
         <storybook-pharos-input-group name="my-input-group-prepend">
@@ -159,7 +159,7 @@ export const Composition = {
             slot="prepend"
             icon="book"
             variant="subtle"
-            label="book"
+            a11y-label="book"
           ></storybook-pharos-button>
           <span slot="label">Prepend</span>
         </storybook-pharos-input-group>

diff --git a/packages/pharos/src/components/modal/pharos-modal.ts b/packages/pharos/src/components/modal/pharos-modal.ts
@@ -275,7 +275,7 @@ export class PharosModal extends ScopedRegistryMixin(PharosElement) {
                   type="button"
                   variant="subtle"
                   icon="close"
-                  label="Close modal"
+                  a11y-label="Close modal"
                 ></pharos-button>
               </div>
               <div class="modal__body">

diff --git a/packages/pharos/src/components/sheet/pharos-sheet.ts b/packages/pharos/src/components/sheet/pharos-sheet.ts
@@ -366,7 +366,7 @@ export class PharosSheet extends ScopedRegistryMixin(PharosElement) {
             type="button"
             variant="subtle"
             icon="close"
-            label="Close sheet"
+            a11y-label="Close sheet"
           ></pharos-button>
         </div>`
       : nothing;

diff --git a/packages/pharos/src/components/sidenav/PharosSidenav.react.stories.jsx b/packages/pharos/src/components/sidenav/PharosSidenav.react.stories.jsx
@@ -55,7 +55,7 @@ export const Base = {
             name="search-button"
             icon="search"
             variant="subtle"
-            label="search"
+            a11yLabel="search"
             onBackground
           ></PharosButton>
         </PharosInputGroup>

diff --git a/packages/pharos/src/components/sidenav/pharos-sidenav-button.ts b/packages/pharos/src/components/sidenav/pharos-sidenav-button.ts
@@ -18,7 +18,7 @@ export class PharosSidenavButton extends PharosButton {
     super();
     this.icon = 'menu';
     this.variant = 'subtle';
-    this.label = 'Open menu';
+    this.a11yLabel = 'Open menu';
   }
 
   public static override get styles(): CSSResultArray {

diff --git a/packages/pharos/src/components/sidenav/pharos-sidenav.test.ts b/packages/pharos/src/components/sidenav/pharos-sidenav.test.ts
@@ -26,7 +26,7 @@ describe('pharos-sidenav', () => {
               name="search-button"
               icon="search"
               variant="subtle"
-              label="search"
+              a11y-label="search"
               on-background
             ></test-pharos-button>
           </test-pharos-input-group>

diff --git a/packages/pharos/src/components/sidenav/pharos-sidenav.ts b/packages/pharos/src/components/sidenav/pharos-sidenav.ts
@@ -102,7 +102,7 @@ export class PharosSidenav extends ScopedRegistryMixin(FocusMixin(SideElement))
             class="side-element__button"
             icon="close"
             variant="subtle"
-            label="Close menu"
+            a11y-label="Close menu"
             on-background
             icon-condensed
             @click=${this._handleClickClose}

diff --git a/packages/pharos/src/components/sidenav/pharos-sidenav.wc.stories.jsx b/packages/pharos/src/components/sidenav/pharos-sidenav.wc.stories.jsx
@@ -37,7 +37,7 @@ export const Base = {
             name="search-button"
             icon="search"
             variant="subtle"
-            label="search"
+            a11y-label="search"
             on-background
           ></storybook-pharos-button>
         </storybook-pharos-input-group>

diff --git a/packages/pharos/src/components/toast/pharos-toast-button.ts b/packages/pharos/src/components/toast/pharos-toast-button.ts
@@ -18,7 +18,7 @@ export class PharosToastButton extends PharosButton {
     super();
     this.icon = 'close';
     this.variant = 'subtle';
-    this.label = 'Dismiss';
+    this.a11yLabel = 'Dismiss';
     this.onBackground = true;
     this.iconCondensed = true;
   }