[Badge] Add customAccessibilityLabel prop (#4028)

* add customA11yLabel prop, update docs and tests * update unreleased * update prop name and description * update readme
Shopify · Mar 26, 2021 · c956719 · c956719
1 parent e1f79f9
commit c956719
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 5 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -6,6 +6,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
+- Added `statusAndProgressLabelOverride` prop to `Badge` ([#4028](https://github.com/Shopify/polaris-react/pull/4028))
+
 ### Bug fixes
 
 - `IndexTable` Remove parent resource name from bulk select action ([#4013](https://github.com/Shopify/polaris-react/pull/4013))

diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -23,6 +23,8 @@ export interface BadgeProps {
    * @default 'medium'
    */
   size?: Size;
+  /** Pass a custom accessibilityLabel */
+  statusAndProgressLabelOverride?: string;
 }
 
 const PROGRESS_LABELS: {[key in Progress]: Progress} = {
@@ -47,6 +49,7 @@ export function Badge({
   status,
   progress,
   size = DEFAULT_SIZE,
+  statusAndProgressLabelOverride,
 }: BadgeProps) {
   const i18n = useI18n();
   const withinFilter = useContext(WithinFilterContext);
@@ -98,12 +101,17 @@ export function Badge({
       break;
   }
 
-  const accessibilityLabel = i18n.translate('Polaris.Badge.progressAndStatus', {
-    progressLabel,
-    statusLabel,
-  });
+  const accessibilityLabel = statusAndProgressLabelOverride
+    ? statusAndProgressLabelOverride
+    : i18n.translate('Polaris.Badge.progressAndStatus', {
+        progressLabel,
+        statusLabel,
+      });
 
-  let accessibilityMarkup = (progressLabel || statusLabel) && (
+  const hasAccessibilityLabel =
+    progressLabel || statusLabel || statusAndProgressLabelOverride;
+
+  let accessibilityMarkup = hasAccessibilityLabel && (
     <VisuallyHidden>{accessibilityLabel}</VisuallyHidden>
   );
 

diff --git a/src/components/Badge/README.md b/src/components/Badge/README.md
@@ -251,6 +251,20 @@ Use to indicate when a given task has been completed. For example, when merchant
 <Badge progress="complete">Fulfilled</Badge>
 ```
 
+### Badge with statusAndProgressLabelOverride
+
+Use when the status and progress accessibilityLabels are not appropriate to a given context.
+
+```jsx
+<Badge
+  status="success"
+  progress="complete"
+  statusAndProgressLabelOverride="Status: Published. Your online store is visible."
+>
+  Published
+</Badge>
+```
+
 <!-- content-for: android -->
 
 ![Complete badge. Default badge with complete status](/public_images/components/Badge/android/complete@2x.png)

diff --git a/src/components/Badge/tests/Badge.test.tsx b/src/components/Badge/tests/Badge.test.tsx
@@ -47,4 +47,34 @@ describe('<Badge />', () => {
       className: 'Pip',
     });
   });
+
+  it('renders with a custom accessibilityLabel when a `statusAndProgressLabelOverride` is provided', () => {
+    const mockAccessibilityLabel = 'mock accessibilityLabel';
+    const badge = mountWithApp(
+      <Badge
+        status="attention"
+        progress="incomplete"
+        statusAndProgressLabelOverride={mockAccessibilityLabel}
+      />,
+    );
+
+    expect(badge).toContainReactComponent(VisuallyHidden, {
+      children: mockAccessibilityLabel,
+    });
+  });
+
+  it('does not render progress or status accessibility labels when a `statusAndProgressLabelOverride` is provided', () => {
+    const mockAccessibilityLabel = 'mock accessibilityLabel';
+    const badge = mountWithApp(
+      <Badge
+        status="attention"
+        progress="incomplete"
+        statusAndProgressLabelOverride={mockAccessibilityLabel}
+      />,
+    );
+
+    expect(badge).not.toContainReactComponent(VisuallyHidden, {
+      children: 'Attention Incomplete',
+    });
+  });
 });