fix(Notification): remove tabindex on close buttons (#17852)

* fix(Notification): remove tabindex on close button * chore: update snapshots * fix(Notification): remove aria-hidden on close buttons * chore: update snapshots
carbon-design-system · Oct 25, 2024 · 0810fa1 · 0810fa1
1 parent d73bd2c
commit 0810fa1
Show file tree

Hide file tree

Showing 3 changed files with 0 additions and 29 deletions.
diff --git a/packages/react/src/components/Notification/Notification.tsx b/packages/react/src/components/Notification/Notification.tsx
@@ -493,9 +493,7 @@ export function ToastNotification({
         <NotificationButton
           notificationType="toast"
           onClick={handleCloseButtonClick}
-          aria-hidden="true"
           aria-label={deprecatedAriaLabel || ariaLabel}
-          tabIndex={-1}
         />
       )}
     </div>
@@ -739,9 +737,7 @@ export function InlineNotification({
         <NotificationButton
           notificationType="inline"
           onClick={handleCloseButtonClick}
-          aria-hidden="true"
           aria-label={ariaLabel}
-          tabIndex={-1}
         />
       )}
     </div>

diff --git a/packages/react/src/components/Notification/__tests__/Notification-test.js b/packages/react/src/components/Notification/__tests__/Notification-test.js
@@ -124,17 +124,6 @@ describe('ToastNotification', () => {
     spy.mockRestore();
   });
 
-  it('close button is rendered by default and includes aria-hidden=true', () => {
-    render(<ToastNotification title="Notification title" />);
-
-    const closeButton = screen.queryByRole('button', {
-      hidden: true,
-    });
-
-    expect(closeButton).toBeInTheDocument();
-    expect(closeButton).toHaveAttribute('aria-hidden', 'true');
-  });
-
   it('does not render close button when `hideCloseButton` is provided', () => {
     render(<ToastNotification title="Notification title" hideCloseButton />);
     const closeButton = screen.queryByRole('button', {
@@ -255,16 +244,6 @@ describe('InlineNotification', () => {
     spy.mockRestore();
   });
 
-  it('close button is rendered by default and includes aria-hidden=true', () => {
-    render(<InlineNotification title="Notification title" />);
-
-    const closeButton = screen.queryByRole('button', {
-      hidden: true,
-    });
-    expect(closeButton).toBeInTheDocument();
-    expect(closeButton).toHaveAttribute('aria-hidden', 'true');
-  });
-
   it('does not render close button when `hideCloseButton` is provided', () => {
     render(<InlineNotification title="Notification title" hideCloseButton />);
     const closeButton = screen.queryByRole('button', {

diff --git a/packages/react/src/components/Notification/__tests__/__snapshots__/Notification-test.js.snap b/packages/react/src/components/Notification/__tests__/__snapshots__/Notification-test.js.snap
@@ -135,10 +135,8 @@ exports[`InlineNotification should render 1`] = `
       </div>
     </div>
     <button
-      aria-hidden="true"
       aria-label="close notification"
       class="cds--inline-notification__close-button"
-      tabindex="-1"
       title="close notification"
       type="button"
     >
@@ -202,10 +200,8 @@ exports[`ToastNotification should render 1`] = `
       </div>
     </div>
     <button
-      aria-hidden="true"
       aria-label="close notification"
       class="cds--toast-notification__close-button"
-      tabindex="-1"
       title="close notification"
       type="button"
     >