fix(button): add check for workingLabel to GenericButton for aria-live (

#39) * fix(button): add check for workingLabel to GenericButton for aria-live * remove aria-polite from snapshot tests
cultureamp · Sep 27, 2023 · d1615e5 · d1615e5
1 parent 2e2acae
commit d1615e5
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 23 deletions.
diff --git a/.changeset/stale-crabs-protect.md b/.changeset/stale-crabs-protect.md
@@ -0,0 +1,7 @@
+---
+"@kaizen/button": patch
+---
+
+Fix aria-polite presence on buttons without working states.
+* The aria-live="polite" will only be added when a workingLabel is provided to the button.
+ * This will mean the content should only be read when inner content updates on buttons with working states
diff --git a/draft-packages/menu/KaizenDraft/Menu/__snapshots__/Menu.spec.tsx.snap b/draft-packages/menu/KaizenDraft/Menu/__snapshots__/Menu.spec.tsx.snap
@@ -6,7 +6,6 @@ exports[`Dropdown renders default view 1`] = `
     class="buttonWrapper"
   >
     <span
-      aria-live="polite"
       class="container"
     >
       <button

diff --git a/draft-packages/tile/KaizenDraft/Tile/__snapshots__/Tile.spec.tsx.snap b/draft-packages/tile/KaizenDraft/Tile/__snapshots__/Tile.spec.tsx.snap
@@ -190,7 +190,6 @@ exports[`<InformationTile /> snapshots renders InformationTile with information
         class="informationBtn"
       >
         <span
-          aria-live="polite"
           class="container"
         >
           <button
@@ -259,7 +258,6 @@ exports[`<InformationTile /> snapshots renders InformationTile with information
         class="informationBtn"
       >
         <span
-          aria-live="polite"
           class="container"
         >
           <button
@@ -305,7 +303,6 @@ exports[`<InformationTile /> snapshots renders InformationTile with information
             class="actions"
           >
             <span
-              aria-live="polite"
               class="container"
             >
               <button
@@ -543,7 +540,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile 1`] = `
           class="actions"
         >
           <span
-            aria-live="polite"
             class="container"
           >
             <a
@@ -610,7 +606,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile with assertive mo
             class="p-0 mr-0-point-5"
           >
             <span
-              aria-live="polite"
               class="container"
             >
               <a
@@ -631,7 +626,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile with assertive mo
             </span>
           </div>
           <span
-            aria-live="polite"
             class="container"
           >
             <a
@@ -698,7 +692,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile with cautionary m
             class="p-0 mr-0-point-5"
           >
             <span
-              aria-live="polite"
               class="container"
             >
               <a
@@ -719,7 +712,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile with cautionary m
             </span>
           </div>
           <span
-            aria-live="polite"
             class="container"
           >
             <a
@@ -786,7 +778,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile with informative
             class="p-0 mr-0-point-5"
           >
             <span
-              aria-live="polite"
               class="container"
             >
               <a
@@ -807,7 +798,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile with informative
             </span>
           </div>
           <span
-            aria-live="polite"
             class="container"
           >
             <a
@@ -874,7 +864,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile with negative moo
             class="p-0 mr-0-point-5"
           >
             <span
-              aria-live="polite"
               class="container"
             >
               <a
@@ -895,7 +884,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile with negative moo
             </span>
           </div>
           <span
-            aria-live="polite"
             class="container"
           >
             <a
@@ -962,7 +950,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile with positive moo
             class="p-0 mr-0-point-5"
           >
             <span
-              aria-live="polite"
               class="container"
             >
               <a
@@ -983,7 +970,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile with positive moo
             </span>
           </div>
           <span
-            aria-live="polite"
             class="container"
           >
             <a
@@ -1050,7 +1036,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile with prominent mo
             class="p-0 mr-0-point-5"
           >
             <span
-              aria-live="polite"
               class="container"
             >
               <a
@@ -1071,7 +1056,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile with prominent mo
             </span>
           </div>
           <span
-            aria-live="polite"
             class="container"
           >
             <a
@@ -1138,7 +1122,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile with secondary ac
             class="p-0 mr-0-point-5"
           >
             <span
-              aria-live="polite"
               class="container"
             >
               <a
@@ -1159,7 +1142,6 @@ exports[`<MultiActionTile /> snapshots renders MultiActionTile with secondary ac
             </span>
           </div>
           <span
-            aria-live="polite"
             class="container"
           >
             <a

diff --git a/packages/brand-moment/src/__snapshots__/BrandMoment.spec.tsx.snap b/packages/brand-moment/src/__snapshots__/BrandMoment.spec.tsx.snap
@@ -45,7 +45,6 @@ exports[`<BrandMoment /> matches the snapshot 1`] = `
                   />
                 </video>
                 <span
-                  aria-live="polite"
                   class="container"
                 >
                   <button
@@ -113,7 +112,6 @@ exports[`<BrandMoment /> matches the snapshot 1`] = `
                 class="actions"
               >
                 <span
-                  aria-live="polite"
                   class="container"
                 >
                   <a
@@ -136,7 +134,6 @@ exports[`<BrandMoment /> matches the snapshot 1`] = `
                   class="secondaryAction"
                 >
                   <span
-                    aria-live="polite"
                     class="container"
                   >
                     <a

diff --git a/packages/button/src/Button/components/GenericButton.spec.tsx b/packages/button/src/Button/components/GenericButton.spec.tsx
@@ -111,3 +111,72 @@ describe("<GenericButton /> with native HTML `form` attributes", () => {
     ).toHaveAttribute("form", buttonFormAttributes.form)
   })
 })
+
+describe("<GenericButton /> `working` accessible states", () => {
+  it("renders a button without aria-live by default", () => {
+    const { getByTestId } = render(
+      <GenericButton
+        data-testid="id--generic-test"
+        id="id--button"
+        label="button label"
+      />
+    )
+
+    const button = getByTestId("id--generic-test")
+    // The id is passed to the element not the container so we have to get its parent
+    const buttonContainer = button.parentElement
+
+    expect(buttonContainer).not.toHaveAttribute("aria-live", "")
+  })
+
+  it("renders a button with aria-live if working label if provided", () => {
+    const { getByTestId } = render(
+      <GenericButton
+        data-testid="id--generic-test"
+        id="id--button"
+        label="button label"
+        workingLabel="Loading"
+      />
+    )
+    const button = getByTestId("id--generic-test")
+    const buttonContainer = button.parentElement
+
+    expect(buttonContainer).toHaveAttribute("aria-live", "polite")
+  })
+
+  it("renders a link button with aria-live if working label if provided", () => {
+    const { getByTestId } = render(
+      <GenericButton
+        data-testid="id--generic-test"
+        id="id--button"
+        label="button label"
+        workingLabel="Loading"
+        href="/"
+      />
+    )
+    const button = getByTestId("id--generic-test")
+    const buttonContainer = button.parentElement
+
+    expect(buttonContainer).toHaveAttribute("aria-live", "polite")
+  })
+
+  it("renders a custom button with aria-live if working label if provided", () => {
+    const { getByTestId } = render(
+      <GenericButton
+        data-testid="id--generic-test"
+        id="id--button"
+        label="button label"
+        workingLabel="Loading"
+        component={props => (
+          <button type="button" {...props}>
+            Custom button
+          </button>
+        )}
+      />
+    )
+    const button = getByTestId("id--generic-test")
+    const buttonContainer = button.parentElement
+
+    expect(buttonContainer).toHaveAttribute("aria-live", "polite")
+  })
+})
diff --git a/packages/button/src/Button/components/GenericButton.tsx b/packages/button/src/Button/components/GenericButton.tsx
@@ -60,6 +60,7 @@ export type WorkingProps = {
 
 export type WorkingUndefinedProps = {
   working?: false
+  workingLabel?: string
 }
 
 type Props = ButtonProps & {
@@ -116,7 +117,7 @@ const GenericButton = forwardRef(
           styles.container,
           props.fullWidth && styles.fullWidth
         )}
-        aria-live="polite"
+        aria-live={props.workingLabel ? "polite" : undefined}
       >
         {determineButtonRenderer()}
       </span>