Merge branch 'main' into menu-max-height

cultureamp · Sep 27, 2023 · e0a17df · e0a17df
2 parents 56506d2 + d1615e5
commit e0a17df
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 26 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/README.md b/README.md
@@ -1,15 +1,32 @@
 # Kaizen Legacy
 
-**WARNING: Do NOT use for new projects.** These components are **not maintained**.
-
-Please use the main supported [kaizen-design-system](https://github.com/cultureamp/kaizen-design-system/) repo.
+This repo serves as a holding ground for all our existing packages that support the legacy versions of React 16/17.
 
+We are currently in the process of migrating all components available in this repo to our new architecture.
 
 ## Why this repository exists
 To help projects continue to use components that are tested in React 16 and 17 while they transition to React 18.
 
 See [Solution Preview](https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3215819020/Solution+Preview+Ending+support+for+React+16+17+in+Kaizen) for more detail.
 
+
+## Is it safe to use these "legacy" components?
+
+**TL;DR yes.**
+
+These components support the legacy versions of React 16 & 17.
+If your project is not running React 18 yet, then these are the components you should use.
+
+## Are these components going to be replaced by newer ones?
+
+**TL;DR no.**
+
+We are currently in the process of migrating all non-deprecated components within this repo to our new architecture, where they will continue to be made available.
+
+## Do I need to wait for the new version?
+
+No. Our goal is to modify as little as possible when moving the components from this repo to our new architecture. **Any changes made here will be migrated over.**
+
 ## Contribution
 Please consider upgrading to use components in the [kaizen-design-system](https://github.com/cultureamp/kaizen-design-system/) repo **before** making any pull requests to this repo.
 

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>