diff --git a/packages/react/src/components/link/Link.tsx b/packages/react/src/components/link/Link.tsx index 29b569bb97..abf5773d3b 100644 --- a/packages/react/src/components/link/Link.tsx +++ b/packages/react/src/components/link/Link.tsx @@ -36,11 +36,11 @@ export type LinkProps = Omit< */ openInNewTab?: boolean; /** - * Aria label for opening link in a new tab + * The aria-label for opening link in a new tab */ openInNewTabAriaLabel?: string; /** - * Aria label for opening link in an external domain + * The aria-label for opening link in an external domain */ openInExternalDomainAriaLabel?: string; /** diff --git a/packages/react/src/components/linkbox/Linkbox.tsx b/packages/react/src/components/linkbox/Linkbox.tsx index 66de9e9533..7dc54378b2 100644 --- a/packages/react/src/components/linkbox/Linkbox.tsx +++ b/packages/react/src/components/linkbox/Linkbox.tsx @@ -24,11 +24,11 @@ export type LinkboxProps = Omit, 'tabIndex'> */ imgProps?: React.ComponentPropsWithoutRef<'img'>; /** - * Aria label for the link (arrow or external icon) that is located at the bottom of the linkbox. + * The aria-label for the link (arrow or external icon) that is located at the bottom of the linkbox. */ linkAriaLabel: string; /** - * Aria label for the whole linkbox region. Remember to tell users of assistive technology that they are inside + * The aria-label for the whole linkbox region. Remember to tell users of assistive technology that they are inside * a linkbox. Check storybook examples on how it can be done. */ linkboxAriaLabel: string; @@ -37,7 +37,7 @@ export type LinkboxProps = Omit, 'tabIndex'> */ noBackground?: boolean; /** - * Aria label for opening link in an external domain. Active when external prop is true. + * The aria-label for opening link in an external domain. Active when external prop is true. */ openInExternalDomainAriaLabel?: string; /** @@ -45,7 +45,7 @@ export type LinkboxProps = Omit, 'tabIndex'> */ openInNewTab?: boolean; /** - * Aria label for opening link in a new tab + * The aria-label for opening link in a new tab */ openInNewTabAriaLabel?: string; /** diff --git a/packages/react/src/components/notification/Notification.stories.tsx b/packages/react/src/components/notification/Notification.stories.tsx index 9deb5d63bf..506a812c57 100644 --- a/packages/react/src/components/notification/Notification.stories.tsx +++ b/packages/react/src/components/notification/Notification.stories.tsx @@ -117,6 +117,18 @@ export const AutoClose = () => { ); }; +export const WithCustomAriaLabel = () => ( + + {content} + +); + +WithCustomAriaLabel.parameters = { + loki: { skip: true }, +}; + +WithCustomAriaLabel.storyName = 'With a custom aria-label'; + export const Playground = (args) => { const [open, setOpen] = useState(true); diff --git a/packages/react/src/components/notification/Notification.tsx b/packages/react/src/components/notification/Notification.tsx index 8a383c8347..b13ca68243 100644 --- a/packages/react/src/components/notification/Notification.tsx +++ b/packages/react/src/components/notification/Notification.tsx @@ -64,6 +64,11 @@ type CommonProps = React.PropsWithChildren<{ * Note: Labels are not displayed visually for small notifications, but they are still accessible to assistive technology. This could be used to help screen reader users to better understand the context of the notification. */ label?: string | React.ReactNode; + /** + * The aria-label of the notification region + * @default "Notification" + */ + notificationAriaLabel?: string; /** * Callback fired when the notification is closed */ @@ -186,6 +191,7 @@ export const Notification = React.forwardRef( displayAutoCloseProgress = true, invisible = false, label, + notificationAriaLabel = 'Notification', position = 'inline', onClose = () => null, size = 'default', @@ -255,7 +261,7 @@ export const Notification = React.forwardRef( boxShadow && styles.boxShadow, className, )} - aria-label="Notification" + aria-label={notificationAriaLabel} aria-atomic="true" data-testid={dataTestId} > diff --git a/packages/react/src/components/numberInput/NumberInput.tsx b/packages/react/src/components/numberInput/NumberInput.tsx index bc2600cfa8..df5297e671 100644 --- a/packages/react/src/components/numberInput/NumberInput.tsx +++ b/packages/react/src/components/numberInput/NumberInput.tsx @@ -31,11 +31,11 @@ export type NumberInputProps = Omit< */ min?: number; /** - * The aria label for minus step button + * The aria-label for minus step button */ minusStepButtonAriaLabel?: string; /** - * The aria label for plus step button + * The aria-label for plus step button */ plusStepButtonAriaLabel?: string; /** diff --git a/packages/react/src/components/passwordInput/PasswordInput.tsx b/packages/react/src/components/passwordInput/PasswordInput.tsx index 622149df81..f70691808d 100644 --- a/packages/react/src/components/passwordInput/PasswordInput.tsx +++ b/packages/react/src/components/passwordInput/PasswordInput.tsx @@ -28,11 +28,11 @@ export type PasswordInputProps = Omit< */ initiallyRevealed?: boolean; /** - * Aria label for reveal password button + * The aria-label for reveal password button */ revealPasswordButtonAriaLabel?: string; /** - * Aria label for conceal password button + * The aria-label for conceal password button */ concealPasswordButtonAriaLabel?: string; /** diff --git a/packages/react/src/components/sideNavigation/mainLevel/MainLevel.tsx b/packages/react/src/components/sideNavigation/mainLevel/MainLevel.tsx index 30818a76ba..34b25c51d7 100644 --- a/packages/react/src/components/sideNavigation/mainLevel/MainLevel.tsx +++ b/packages/react/src/components/sideNavigation/mainLevel/MainLevel.tsx @@ -81,11 +81,11 @@ type MainLevelExternalLinkProps = { */ openInNewTab?: boolean; /** - * Aria label for opening main level link in a new tab + * The aria-label for opening main level link in a new tab */ openInNewTabAriaLabel?: string; /** - * Aria label for opening main level link in an external domain + * The aria-label for opening main level link in an external domain */ openInExternalDomainAriaLabel?: string; active?: undefined; diff --git a/packages/react/src/components/stepper/Step.tsx b/packages/react/src/components/stepper/Step.tsx index 2080c865f0..20b067bce5 100644 --- a/packages/react/src/components/stepper/Step.tsx +++ b/packages/react/src/components/stepper/Step.tsx @@ -36,7 +36,7 @@ export type StepProps = React.ComponentPropsWithoutRef<'button'> & { */ onStepClick?: (event: React.MouseEvent, stepIndex: number) => void; /** - * A function for rendering a custom aria label for step's state + * A function for rendering a custom aria-label for step's state */ renderCustomStateAriaLabel?: (stepIndex: number, state: StepState) => string; /** diff --git a/packages/react/src/components/stepper/Stepper.tsx b/packages/react/src/components/stepper/Stepper.tsx index ef78701349..6a95d53b62 100644 --- a/packages/react/src/components/stepper/Stepper.tsx +++ b/packages/react/src/components/stepper/Stepper.tsx @@ -78,7 +78,7 @@ export type StepperProps = { */ onStepClick?: (event: React.MouseEvent, stepIndex: number) => void; /** - * A function for rendering a custom aria label for step's state + * A function for rendering a custom aria-label for step's state */ renderCustomStateAriaLabel?: (stepIndex: number, state: StepState) => string; /** diff --git a/site/src/docs/components/notification/code.mdx b/site/src/docs/components/notification/code.mdx index 0dcbc10b67..4d4a85cf7c 100644 --- a/site/src/docs/components/notification/code.mdx +++ b/site/src/docs/components/notification/code.mdx @@ -200,17 +200,18 @@ export default ({ children, pageContext }) => React Storybook. -| Property | Description | Values | Default value | -| -------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------- | -| `autoClose` | If set to true, the Toast notification will be closed automatically after a certain time. | `boolean` | false | -| `boxShadow` | If set to true, the notification will have a box shadow. | `boolean` | false | -| `displayAutoCloseProgress` | If set to true, a progress is displayed on top of the Toast notification. | `boolean` | true | -| `invisible` | If set to true, the notification will be visually hidden. Useful when notification should only be "seen" by screen readers. | `boolean` | false | -| `label` | The label of the notification. | `ReactNode` | - | -| `onClose` | Callback fired when the notification is closed | `function` | - | -| `type` | The type of the notification. Affects the colour and icon of the notification. | `"info"`, `"success"`, `"alert"`, `"error"` | `"info"` | -| `position` | The position of the notification. | `"inline"`, `"top-left"`, `"top-center"`, `"top-right"`, `"bottom-left"`, `"bottom-center"`, `"bottom-right"` | `"inline"` | -| `size` | The size of the notification. | `"small"`, `"default"`, `"large"` | `"default"` | -| `dismissible` | If set to true, the notification can be closed. | `boolean` | false | -| `closeButtonLabelText` | The aria-label and title for the close button. | `string` | - | +| Property | Description | Values | Default value | +| -------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ---------------- | +| `autoClose` | If set to true, the Toast notification will be closed automatically after a certain time. | `boolean` | false | +| `boxShadow` | If set to true, the notification will have a box shadow. | `boolean` | false | +| `displayAutoCloseProgress` | If set to true, a progress is displayed on top of the Toast notification. | `boolean` | true | +| `invisible` | If set to true, the notification will be visually hidden. Useful when notification should only be "seen" by screen readers. | `boolean` | false | +| `label` | The label of the notification. | `ReactNode` | - | +| `notificationAriaLabel` | The aria-label of the notification section element. | `string` | `"Notification"` | +| `onClose` | Callback fired when the notification is closed | `function` | - | +| `type` | The type of the notification. Affects the colour and icon of the notification. | `"info"`, `"success"`, `"alert"`, `"error"` | `"info"` | +| `position` | The position of the notification. | `"inline"`, `"top-left"`, `"top-center"`, `"top-right"`, `"bottom-left"`, `"bottom-center"`, `"bottom-right"` | `"inline"` | +| `size` | The size of the notification. | `"small"`, `"default"`, `"large"` | `"default"` | +| `dismissible` | If set to true, the notification can be closed. | `boolean` | false | +| `closeButtonLabelText` | The aria-label and title for the close button. | `string` | - | [Table 1:Notification properties]|