more

pinterest · Dec 2, 2024 · 5eae9bf · 5eae9bf
1 parent 1354eef
commit 5eae9bf
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 59 deletions.
diff --git a/packages/gestalt/src/Tabs.tsx b/packages/gestalt/src/Tabs.tsx
@@ -1,4 +1,4 @@
-import { type LegacyRef, ReactNode } from 'react';
+import { LegacyRef, ReactNode } from 'react';
 import Flex from './Flex';
 import Tab from './Tabs/Tab';
 import useInExperiment from './useInExperiment';
@@ -28,7 +28,7 @@ type Props = {
    * The array of tabs to be displayed. The active tab (as indicated by `activeTabIndex`) will be underlined. Use the optional `indicator` field to show a notification of new items on the tab — see the [indicator variant](https://gestalt.pinterest.systems/web/tabs#Indicator) to learn more. Though `text` currently accepts a React.Node, this is deprecated and will be replaced by a simple `string` type soon.
    */
   tabs: ReadonlyArray<{
-    indicatorAccessibilityLabel?: string;
+    notificationAccessibilityLabel?: string;
     href: string;
     id?: string;
     indicator?: 'dot' | number;

diff --git a/packages/gestalt/src/Tabs/Tab.tsx b/packages/gestalt/src/Tabs/Tab.tsx
@@ -21,7 +21,7 @@ import useInExperiment from '../useInExperiment';
 import useInteractiveStates from '../utils/useInteractiveStates';
 
 type TabType = {
-  indicatorAccessibilityLabel?: string;
+  notificationAccessibilityLabel?: string;
   href: string;
   id?: string;
   indicator?: 'dot' | number;
@@ -55,7 +55,7 @@ const COLORS = Object.freeze({
 
 const TabWithForwardRef = forwardRef<HTMLDivElement, TabProps>(function Tab(
   {
-    indicatorAccessibilityLabel,
+    notificationAccessibilityLabel,
     bgColor,
     href,
     indicator,
@@ -80,17 +80,14 @@ const TabWithForwardRef = forwardRef<HTMLDivElement, TabProps>(function Tab(
     isActive: isPressed,
   } = useInteractiveStates();
 
-
   const { isFocusVisible } = useFocusVisible();
 
   const isInVRExperiment = useInExperiment({
     webExperimentName: 'web_gestalt_visualRefresh',
     mwebExperimentName: 'web_gestalt_visualRefresh',
   });
 
-    const { indicator: defaultIndicatorAccessibilityLabel } =
-    useDefaultLabelContext('Tabs');
-
+  const { accessibilityNotificationLabel } = useDefaultLabelContext('Tabs');
 
   const isRtl = typeof document === 'undefined' ? false : document?.dir === 'rtl';
 
@@ -155,12 +152,18 @@ const TabWithForwardRef = forwardRef<HTMLDivElement, TabProps>(function Tab(
               </TextUI>
 
               {indicator === 'dot' && (
-                <Indicator accessibilityLabel={defaultIndicatorAccessibilityLabel ?? 'temproary'} />
+                <Indicator
+                  accessibilityLabel={
+                    notificationAccessibilityLabel ?? accessibilityNotificationLabel
+                  }
+                />
               )}
               {/* Number.isFinite will return false for a string or undefined */}
               {typeof indicator === 'number' && Number.isFinite(indicator) && (
                 <Indicator
-                  accessibilityLabel={defaultIndicatorAccessibilityLabel ?? 'temproary'}
+                  accessibilityLabel={
+                    notificationAccessibilityLabel ?? accessibilityNotificationLabel
+                  }
                   count={indicator}
                 />
               )}

diff --git a/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap b/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap
@@ -491,14 +491,8 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                                   </div>
                                   <div
                                     aria-label="You have new messages"
-                                    className="box circle primary"
+                                    className="notification"
                                     role="status"
-                                    style={
-                                      Object {
-                                        "height": 8,
-                                        "width": 8,
-                                      }
-                                    }
                                   />
                                 </div>
                               </span>

diff --git a/packages/gestalt/src/__snapshots__/Tabs.test.tsx.snap b/packages/gestalt/src/__snapshots__/Tabs.test.tsx.snap
@@ -213,14 +213,9 @@ exports[`<Tabs /> matches snapshot with dot indicators 1`] = `
                 className="FlexItem"
               >
                 <div
-                  className="box circle primary"
-                  style={
-                    Object {
-                      "height": 6,
-                      "marginTop": "1px",
-                      "width": 6,
-                    }
-                  }
+                  aria-label="This tab is displaying a notification indicator"
+                  className="notification"
+                  role="status"
                 />
               </div>
             </div>
@@ -309,14 +304,9 @@ exports[`<Tabs /> matches snapshot with dot indicators 1`] = `
                 className="FlexItem"
               >
                 <div
-                  className="box circle primary"
-                  style={
-                    Object {
-                      "height": 6,
-                      "marginTop": "1px",
-                      "width": 6,
-                    }
-                  }
+                  aria-label="This tab is displaying a notification indicator"
+                  className="notification"
+                  role="status"
                 />
               </div>
             </div>

diff --git a/packages/gestalt/src/contexts/DefaultLabelProvider.jsdom.test.tsx b/packages/gestalt/src/contexts/DefaultLabelProvider.jsdom.test.tsx
@@ -120,7 +120,7 @@ describe('useDefaultLabelContext', () => {
             tooltipMessage: 'Click to learn more',
           },
           Tabs: {
-            indicator: 'This tab is displaying a notification indicator',
+            accessibilityNotificationLabel: 'This tab is displaying a notification indicator',
           },
           Toast: {
             accessibilityDismissButtonLabel: 'Dismiss message',

diff --git a/packages/gestalt/src/contexts/DefaultLabelProvider.tsx b/packages/gestalt/src/contexts/DefaultLabelProvider.tsx
@@ -100,7 +100,7 @@ export type DefaultLabelContextType = {
     accessibilityLabel: string;
   };
   Tabs: {
-    indicator: string,
+    accessibilityNotificationLabel: string,
   },
   TableOfContents: {
     accessibilityLabel: string;
@@ -248,7 +248,7 @@ export const fallbackLabels: DefaultLabelContextType = {
     tooltipMessage: 'Click to learn more',
   },
   Tabs: {
-    indicator: 'This tab is displaying a notification indicator',
+    accessibilityNotificationLabel: 'This tab is displaying a notification indicator',
   },
   Toast: {
     accessibilityDismissButtonLabel: 'Dismiss message',

diff --git a/packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap b/packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap
@@ -278,7 +278,6 @@ exports[`ColorSchemeProvider renders styling for dark mode when specified 1`] =
   --color-background-iconbutton-semitransparentdark-default: rgba(255, 255, 255, 0.8);
   --color-background-iconbutton-semitransparentdark-hover: #f0f0f0;
   --color-background-iconbutton-semitransparentdark-active: #e0e0e0;
-  --color-background-indicator: #e60023;
   --color-background-mask-wash: rgba(0, 0, 0, 0.04);
   --color-background-overlay: #2b2b2b;
   --color-background-popover-primary: #2b2b2b;
@@ -377,7 +376,6 @@ exports[`ColorSchemeProvider renders styling for dark mode when specified 1`] =
   --color-border-formfield-error-default: #f47171;
   --color-border-formfield-error-hover: #cf001f;
   --color-border-formfield-disabled: #404040;
-  --color-border-indicator: #000000;
   --color-border-popover-primary: #212121;
   --color-border-popover-secondary: #efefef;
   --color-border-popover-education: #75bfff;
@@ -788,7 +786,6 @@ exports[`ColorSchemeProvider renders styling for light mode when no color scheme
   --color-background-iconbutton-semitransparentdark-active: #1f1f1f;
   --color-background-iconbutton-semitransparentdark-disabled-default: #e9e9e9;
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e9e9e9;
-  --color-background-indicator: #e60023;
   --color-background-mask-wash: rgba(0, 0, 0, 0.04);
   --color-background-overlay: #ffffff;
   --color-background-popover-primary: #ffffff;
@@ -896,7 +893,6 @@ exports[`ColorSchemeProvider renders styling for light mode when no color scheme
   --color-border-formfield-error-default: #cc0000;
   --color-border-formfield-error-hover: #ad081b;
   --color-border-formfield-disabled: #efefef;
-  --color-border-indicator: #ffffff;
   --color-border-popover-primary: #ffffff;
   --color-border-popover-secondary: #111111;
   --color-border-popover-education: #0074e8;
@@ -1312,7 +1308,6 @@ exports[`ColorSchemeProvider renders styling for light mode when specified 1`] =
   --color-background-iconbutton-semitransparentdark-active: #1f1f1f;
   --color-background-iconbutton-semitransparentdark-disabled-default: #e9e9e9;
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e9e9e9;
-  --color-background-indicator: #e60023;
   --color-background-mask-wash: rgba(0, 0, 0, 0.04);
   --color-background-overlay: #ffffff;
   --color-background-popover-primary: #ffffff;
@@ -1420,7 +1415,6 @@ exports[`ColorSchemeProvider renders styling for light mode when specified 1`] =
   --color-border-formfield-error-default: #cc0000;
   --color-border-formfield-error-hover: #ad081b;
   --color-border-formfield-disabled: #efefef;
-  --color-border-indicator: #ffffff;
   --color-border-popover-primary: #ffffff;
   --color-border-popover-secondary: #111111;
   --color-border-popover-education: #0074e8;
@@ -1836,7 +1830,6 @@ exports[`ColorSchemeProvider renders styling with a custom class if has an id 1`
   --color-background-iconbutton-semitransparentdark-active: #1f1f1f;
   --color-background-iconbutton-semitransparentdark-disabled-default: #e9e9e9;
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e9e9e9;
-  --color-background-indicator: #e60023;
   --color-background-mask-wash: rgba(0, 0, 0, 0.04);
   --color-background-overlay: #ffffff;
   --color-background-popover-primary: #ffffff;
@@ -1944,7 +1937,6 @@ exports[`ColorSchemeProvider renders styling with a custom class if has an id 1`
   --color-border-formfield-error-default: #cc0000;
   --color-border-formfield-error-hover: #ad081b;
   --color-border-formfield-disabled: #efefef;
-  --color-border-indicator: #ffffff;
   --color-border-popover-primary: #ffffff;
   --color-border-popover-secondary: #111111;
   --color-border-popover-education: #0074e8;
@@ -2344,7 +2336,6 @@ exports[`ColorSchemeProvider renders styling with media query when userPreferenc
   --color-background-iconbutton-semitransparentdark-default: rgba(255, 255, 255, 0.8);
   --color-background-iconbutton-semitransparentdark-hover: #f0f0f0;
   --color-background-iconbutton-semitransparentdark-active: #e0e0e0;
-  --color-background-indicator: #e60023;
   --color-background-mask-wash: rgba(0, 0, 0, 0.04);
   --color-background-overlay: #2b2b2b;
   --color-background-popover-primary: #2b2b2b;
@@ -2443,7 +2434,6 @@ exports[`ColorSchemeProvider renders styling with media query when userPreferenc
   --color-border-formfield-error-default: #f47171;
   --color-border-formfield-error-hover: #cf001f;
   --color-border-formfield-disabled: #404040;
-  --color-border-indicator: #000000;
   --color-border-popover-primary: #212121;
   --color-border-popover-secondary: #efefef;
   --color-border-popover-education: #75bfff;
@@ -3476,7 +3466,6 @@ exports[`visual refresh tokens uses visual refresh dark mode theme when specifie
   --color-border-checkbox-unchecked-default: #c7c6c1;
   --color-border-checkbox-unchecked-error: #ff9494;
   --color-border-checkbox-unchecked-hover: #b2b0ae;
-  --color-border-indicator: #000000;
   --color-border-switch-focus-inner: #000000;
   --color-border-switch-focus-outer: #c5eaf7;
   --elevation-floating: 0px 4px 16px 0px rgba(0,0,0,0.2), 0px 1px 4px 0px rgba(0,0,0,0.2);
@@ -4420,7 +4409,6 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
   --color-background-iconbutton-semitransparentdark-active: rgba(57, 57, 55, 0.9);
   --color-background-iconbutton-semitransparentdark-disabled-default: rgba(0, 0, 0, 0.39);
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e8e7e1;
-  --color-background-indicator: #e60023;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -4480,7 +4468,6 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
   --color-border-checkbox-unchecked-default: #757570;
   --color-border-checkbox-unchecked-error: #b2001a;
   --color-border-checkbox-unchecked-hover: #626260;
-  --color-border-indicator: #ffffff;
   --color-border-switch-default-unselected: #757570;
   --color-border-switch-focus-inner: #ffffff;
   --color-border-switch-focus-outer: #007db8;
@@ -5425,7 +5412,6 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
   --color-background-iconbutton-semitransparentdark-active: rgba(57, 57, 55, 0.9);
   --color-background-iconbutton-semitransparentdark-disabled-default: rgba(0, 0, 0, 0.39);
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e8e7e1;
-  --color-background-indicator: #e60023;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -5485,7 +5471,6 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
   --color-border-checkbox-unchecked-default: #757570;
   --color-border-checkbox-unchecked-error: #b2001a;
   --color-border-checkbox-unchecked-hover: #626260;
-  --color-border-indicator: #ffffff;
   --color-border-switch-default-unselected: #757570;
   --color-border-switch-focus-inner: #ffffff;
   --color-border-switch-focus-outer: #007db8;
@@ -6430,7 +6415,6 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
   --color-background-iconbutton-semitransparentdark-active: rgba(57, 57, 55, 0.9);
   --color-background-iconbutton-semitransparentdark-disabled-default: rgba(0, 0, 0, 0.39);
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e8e7e1;
-  --color-background-indicator: #e60023;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -6490,7 +6474,6 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
   --color-border-checkbox-unchecked-default: #757570;
   --color-border-checkbox-unchecked-error: #b2001a;
   --color-border-checkbox-unchecked-hover: #626260;
-  --color-border-indicator: #ffffff;
   --color-border-switch-default-unselected: #757570;
   --color-border-switch-focus-inner: #ffffff;
   --color-border-switch-focus-outer: #007db8;
@@ -7435,7 +7418,6 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
   --color-background-iconbutton-semitransparentdark-active: rgba(57, 57, 55, 0.9);
   --color-background-iconbutton-semitransparentdark-disabled-default: rgba(0, 0, 0, 0.39);
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e8e7e1;
-  --color-background-indicator: #e60023;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -7495,7 +7477,6 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
   --color-border-checkbox-unchecked-default: #757570;
   --color-border-checkbox-unchecked-error: #b2001a;
   --color-border-checkbox-unchecked-hover: #626260;
-  --color-border-indicator: #ffffff;
   --color-border-switch-default-unselected: #757570;
   --color-border-switch-focus-inner: #ffffff;
   --color-border-switch-focus-outer: #007db8;
@@ -8440,7 +8421,6 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
   --color-background-iconbutton-semitransparentdark-active: rgba(57, 57, 55, 0.9);
   --color-background-iconbutton-semitransparentdark-disabled-default: rgba(0, 0, 0, 0.39);
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e8e7e1;
-  --color-background-indicator: #e60023;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -8500,7 +8480,6 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
   --color-border-checkbox-unchecked-default: #757570;
   --color-border-checkbox-unchecked-error: #b2001a;
   --color-border-checkbox-unchecked-hover: #626260;
-  --color-border-indicator: #ffffff;
   --color-border-switch-default-unselected: #757570;
   --color-border-switch-focus-inner: #ffffff;
   --color-border-switch-focus-outer: #007db8;
@@ -9445,7 +9424,6 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
   --color-background-iconbutton-semitransparentdark-active: rgba(57, 57, 55, 0.9);
   --color-background-iconbutton-semitransparentdark-disabled-default: rgba(0, 0, 0, 0.39);
   --color-background-iconbutton-semitransparentdark-disabled-selected: #e8e7e1;
-  --color-background-indicator: #e60023;
   --color-background-switch-default-unselected: #ffffff;
   --color-background-switch-default-selected: #000000;
   --color-background-switch-disabled-unselected: #ffffff;
@@ -9505,7 +9483,6 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
   --color-border-checkbox-unchecked-default: #757570;
   --color-border-checkbox-unchecked-error: #b2001a;
   --color-border-checkbox-unchecked-hover: #626260;
-  --color-border-indicator: #ffffff;
   --color-border-switch-default-unselected: #757570;
   --color-border-switch-focus-inner: #ffffff;
   --color-border-switch-focus-outer: #007db8;