Incorrect Name is defined for the close/dismiss button in the search edit filed.

msftedad commented 2 months ago

Describe the bug

Reproduction link

https://storybook.js.org/addons

Reproduction steps

open the URL "Storybook".
Navigate to the "Addons" link and invoke it.
navigate to the "search edit filed" and enter any characters in the edit filed and navigate to the dismiss button.
Observe the narrator announcement.

Expected result: Name should be defined for the close/dismiss button, narrator should announce as close/dismiss button.

https://github.com/storybookjs/storybook/assets/93735775/5952329d-f8c4-4f89-863e-b4215e1f76a3

System

OS: Windows 11
OS version: 23H2 ((OS Build 22631.3737)
Edge Version: Version 126.0.2592.87 (Official build) (64-bit)

Additional context

No response

greptile-apps[bot] commented 2 months ago

To resolve the issue of the incorrect name for the close/dismiss button in the search edit field, update the title attribute of the DismissButtonWrapper in NotificationItem.tsx to provide a more descriptive name. Modify the DismissNotificationItem component as follows:

const DismissNotificationItem: FC<{
  onDismiss: () => void;
}> = ({ onDismiss }) => (
  <DismissButtonWrapper
    title="Close search"
    aria-label="Close search"
    onClick={(e: SyntheticEvent) => {
      e.preventDefault();
      e.stopPropagation();
      onDismiss();
    }}
  >
    <CloseAltIcon size={12} />
  </DismissButtonWrapper>
);

This change ensures that screen readers announce the button as "Close search".

References

/code/core/src/manager/components/notifications/NotificationItem.tsx

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

chidiebereojingwa commented 2 months ago

I am working on this

storybookjs / storybook