From 8125a18d45047df522cece4dd6f95cf51e4fb7e1 Mon Sep 17 00:00:00 2001 From: Ville Miekk-oja Date: Thu, 11 Aug 2022 13:14:15 +0300 Subject: [PATCH 1/4] Allow user to insert custom aria-label for the notification section --- .../react/src/components/notification/Notification.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/notification/Notification.tsx b/packages/react/src/components/notification/Notification.tsx index 8a383c8347..f1e9a6481c 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} > From 9384a0a9d0b894c812f0dc33edc5c032f87ad5a6 Mon Sep 17 00:00:00 2001 From: Ville Miekk-oja Date: Thu, 11 Aug 2022 13:29:22 +0300 Subject: [PATCH 2/4] Add a story with a custom aria label --- .../components/notification/Notification.stories.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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); From 824e9fac002c20afdd443bfefe1605fffd57651a Mon Sep 17 00:00:00 2001 From: Ville Miekk-oja Date: Fri, 12 Aug 2022 12:16:56 +0300 Subject: [PATCH 3/4] Add notificationAriaLabel to documentation site --- .../src/docs/components/notification/code.mdx | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) 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]| From 21fbca29cf735e3e1f75d3c0816fe35d5ce59996 Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Tue, 6 Sep 2022 14:39:40 +0300 Subject: [PATCH 4/4] Unify aria-label spelling in components' property descriptions --- packages/react/src/components/link/Link.tsx | 4 ++-- packages/react/src/components/linkbox/Linkbox.tsx | 8 ++++---- .../react/src/components/notification/Notification.tsx | 2 +- packages/react/src/components/numberInput/NumberInput.tsx | 4 ++-- .../react/src/components/passwordInput/PasswordInput.tsx | 4 ++-- .../src/components/sideNavigation/mainLevel/MainLevel.tsx | 4 ++-- packages/react/src/components/stepper/Step.tsx | 2 +- packages/react/src/components/stepper/Stepper.tsx | 2 +- 8 files changed, 15 insertions(+), 15 deletions(-) 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.tsx b/packages/react/src/components/notification/Notification.tsx index f1e9a6481c..b13ca68243 100644 --- a/packages/react/src/components/notification/Notification.tsx +++ b/packages/react/src/components/notification/Notification.tsx @@ -65,7 +65,7 @@ type CommonProps = React.PropsWithChildren<{ */ label?: string | React.ReactNode; /** - * The aria label of the notification region + * The aria-label of the notification region * @default "Notification" */ notificationAriaLabel?: string; 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; /**