Merge branch 'ajr-new-tabs-GM-561' of github.com:Codecademy/gamut into ajr-new-tabs-GM-561

Author: aresnik11

packages/gamut-kit/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.6.505](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-05-21)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
+### [0.6.504](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-05-16)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
 ### [0.6.503](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-05-01)
 
 **Note:** Version bump only for package @codecademy/gamut-kit

packages/gamut-kit/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-kit",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "0.6.503",
+  "version": "0.6.505",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
-    "@codecademy/gamut": "62.0.6",
+    "@codecademy/gamut": "63.0.0",
     "@codecademy/gamut-icons": "9.42.2",
     "@codecademy/gamut-illustrations": "0.54.3",
     "@codecademy/gamut-patterns": "0.10.9",

packages/gamut/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [63.0.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-05-21)
+
+### ⚠ BREAKING CHANGES
+
+- **ToolTip:** remove aria-describedby
+
+### Bug Fixes
+
+- **ToolTip:** remove aria-describedby ([1c676f5](https://github.com/Codecademy/gamut/commit/1c676f5b51896cd3703b802c77bff2e6c2d6347f))
+
+### [62.0.7](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-05-16)
+
+**Note:** Version bump only for package @codecademy/gamut
+
 ### [62.0.6](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-05-01)
 
 ### Bug Fixes

packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap

@@ -32,7 +32,6 @@ exports[`Gamut Exported Keys 1`] = `
   "DataList",
   "DataTable",
   "DelayedRenderWrapper",
-  "DeprecatedToolTip",
   "Dialog",
   "Disclosure",
   "Drawer",

packages/gamut/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "62.0.6",
+  "version": "63.0.0",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
     "@codecademy/gamut-icons": "9.42.2",

packages/gamut/src/Alert/Alert.tsx

@@ -142,7 +142,6 @@ export const Alert: React.FC<AlertProps> = ({
         info={buttonLabel}
         alignment="bottom-center"
         placement="floating"
-        hasRepetitiveLabel
       >
         <TextButton
           aria-controls={collapsibleContentId}

packages/gamut/src/Button/IconButton.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, forwardRef, useId } from 'react';
+import { ComponentProps, forwardRef } from 'react';
 
 import { ButtonBaseElements } from '../ButtonBase/ButtonBase';
 import { ToolTip, ToolTipProps } from '../Tip/ToolTip';
@@ -19,10 +19,7 @@ export type IconButtonProps = ComponentProps<typeof IconButtonBase> &
   IconComponentType & {
     'aria-label'?: string;
     tip: string;
-    tipProps?: Omit<
-      ToolTipProps,
-      'info' | 'id' | 'children' | 'hasRepetitiveLabel'
-    >;
+    tipProps?: Omit<ToolTipProps, 'info' | 'children'>;
   };
 
 export const IconButton = forwardRef<ButtonBaseElements, IconButtonProps>(
@@ -38,30 +35,15 @@ export const IconButton = forwardRef<ButtonBaseElements, IconButtonProps>(
     },
     ref
   ) => {
-    const tipId = useId();
-
-    const firstWord = tip?.split(' ')[0] ?? tip;
-
-    const hasRepetitiveLabel =
-      ariaLabel?.toLowerCase() === firstWord?.toLowerCase() || !ariaLabel;
-
-    const trueAriaLabel = ariaLabel ?? firstWord;
-
     const buttonSize = size || 'normal';
 
     const iconSize = iconSizeMapping[buttonSize];
 
     return (
-      <ToolTip
-        info={tip}
-        id={tipId}
-        hasRepetitiveLabel={hasRepetitiveLabel}
-        {...(tipProps as any)}
-      >
+      <ToolTip info={tip} {...(tipProps as any)}>
         <IconButtonBase
           {...props}
-          aria-describedby={tipId}
-          aria-label={trueAriaLabel}
+          aria-label={ariaLabel || tip}
           ref={ref}
           size={size}
           variant={variant}

packages/gamut/src/Button/__tests__/IconButton.test.tsx

@@ -6,10 +6,8 @@ import { setupRtl } from 'component-test-setup';
 import { IconButton } from '../IconButton';
 import { IconButtonFloatingMock } from './mocks';
 
-const label = 'Click';
+const label = 'Aria gonna click this button?';
 const tip = 'Click this button';
-const tipText = 'this button';
-const uniqueTip = 'I am not repetitive text';
 
 const onClick = jest.fn();
 const buttonProps = {
@@ -39,55 +37,37 @@ describe('IconButton', () => {
     view.getByRole('img', { hidden: true });
   });
 
-  // TO-DO: When we upgrade jest, we can use `description` in the tests below to make sure they are semantically connected to buttons.
-  it('renders a tip with repetition removed', async () => {
+  it('renders the tip text from the tip prop', async () => {
     const { view } = renderView({});
 
-    const button = view.getByRole('button', { name: label });
+    view.getByRole('button', { name: label });
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore: We need to update the rest of the testing suite to use the correct types (which are reliant on upgrading Node)
-    expect(button).toHaveAccessibleDescription(tipText);
-    expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(
-      tipText
-    );
+    expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(tip);
   });
 
-  it('renders a tip with both labels when they are not repetitive', async () => {
-    const { view } = renderView({ tip: uniqueTip });
+  it('sets the aria-label as the tip when only the tip prop is provided', async () => {
+    const { view } = renderView({ 'aria-label': '' });
 
-    view.getByRole('button', { name: label });
-    expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(
-      uniqueTip
-    );
+    view.getByRole('button', { name: tip });
+    expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(tip);
   });
 
-  it('renders a true aria-label based on tip when aria-label is not defined', async () => {
-    const { view } = renderView({ 'aria-label': undefined });
+  it('sets the aria-label text from the aria-label prop when both the tip and aria-label is provided', async () => {
+    const { view } = renderView({ 'aria-label': '' });
 
-    view.getByRole('button', { name: label });
-    expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(
-      tipText
-    );
+    view.getByRole('button', { name: tip });
+    expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(tip);
   });
 
   it('renders a floating tip', async () => {
     const { view } = renderFloatingView({});
 
-    expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(
-      tipText
-    );
-
-    expect(view.queryByText(tip)).toBeNull();
+    expect(view.queryAllByText(tip).length).toBe(1);
 
     const cta = view.getByRole('button', { name: label });
 
-    expect(view.queryByText('tooltip')).toBeNull();
-
     await userEvent.hover(cta);
 
-    await waitFor(() => {
-      view.getByText(tip);
-    });
+    await waitFor(() => expect(view.queryAllByText(tip).length).toBe(2));
   });
 });

packages/gamut/src/Menu/__tests__/Menu.test.tsx

@@ -1,6 +1,7 @@
 import { MultipleUsersIcon } from '@codecademy/gamut-icons';
 import { setupRtl } from '@codecademy/gamut-tests';
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Menu } from '../Menu';
 import { MenuItem } from '../MenuItem';
@@ -123,10 +124,12 @@ describe('Menu', () => {
       ),
     });
 
-    view.getByLabelText(label);
-    expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(
-      label
-    );
+    const menuItem = view.getByLabelText(label);
+    await userEvent.hover(menuItem);
+
+    await waitFor(() => {
+      view.getByText(label);
+    });
   });
 
   it('render an aria-label for non-interactive menu items with a label', async () => {

packages/gamut/src/ModalDeprecated/__tests__/Modal.test.tsx

@@ -33,13 +33,12 @@ describe('ModalDeprecated', () => {
       children: <button type="button">Click Me</button>,
     });
 
-    expect(screen.queryByLabelText('Close')).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Close modal')).not.toBeInTheDocument();
   });
 
   it('renders its close button if hideDefaultCloseButton is false', () => {
     renderModal();
-
-    expect(screen.queryByLabelText('Close')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Close modal')).toBeInTheDocument();
   });
 
   it('triggers onRequestClose callback when escape key is triggered', () => {