Skip to content

Commit

Permalink
Merge pull request #812 from City-of-Helsinki/feature/notification-cu…
Browse files Browse the repository at this point in the history 
…stom-aria-label

Feature/notification custom aria label
  • Loading branch information
@harriplappalainen
harriplappalainen authored Sep 8, 2022
2 parents 64b2575 + 21fbca2 commit 331c1a4
Show file tree
Hide file tree
Showing 10 changed files with 47 additions and 28 deletions.
4 changes: 2 additions & 2 deletions packages/react/src/components/link/Link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
/**
Expand Down
8 changes: 4 additions & 4 deletions packages/react/src/components/linkbox/Linkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ export type LinkboxProps = Omit<React.ComponentPropsWithoutRef<'a'>, '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;
Expand All @@ -37,15 +37,15 @@ export type LinkboxProps = Omit<React.ComponentPropsWithoutRef<'a'>, '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;
/**
* Boolean indicating whether the link will open in new tab or not. Defaults to false.
*/
openInNewTab?: boolean;
/**
* Aria label for opening link in a new tab
* The aria-label for opening link in a new tab
*/
openInNewTabAriaLabel?: string;
/**
Expand Down
12 changes: 12 additions & 0 deletions packages/react/src/components/notification/Notification.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,18 @@ export const AutoClose = () => {
);
};

export const WithCustomAriaLabel = () => (
<Notification {...props} notificationAriaLabel="Custom aria label">
{content}
</Notification>
);

WithCustomAriaLabel.parameters = {
loki: { skip: true },
};

WithCustomAriaLabel.storyName = 'With a custom aria-label';

export const Playground = (args) => {
const [open, setOpen] = useState(true);

Expand Down
8 changes: 7 additions & 1 deletion packages/react/src/components/notification/Notification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -186,6 +191,7 @@ export const Notification = React.forwardRef<HTMLDivElement, NotificationProps>(
displayAutoCloseProgress = true,
invisible = false,
label,
notificationAriaLabel = 'Notification',
position = 'inline',
onClose = () => null,
size = 'default',
Expand Down Expand Up @@ -255,7 +261,7 @@ export const Notification = React.forwardRef<HTMLDivElement, NotificationProps>(
boxShadow && styles.boxShadow,
className,
)}
aria-label="Notification"
aria-label={notificationAriaLabel}
aria-atomic="true"
data-testid={dataTestId}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/numberInput/NumberInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
/**
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/passwordInput/PasswordInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
/**
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/sideNavigation/mainLevel/MainLevel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/stepper/Step.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export type StepProps = React.ComponentPropsWithoutRef<'button'> & {
*/
onStepClick?: (event: React.MouseEvent<HTMLButtonElement>, 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;
/**
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/stepper/Stepper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export type StepperProps = {
*/
onStepClick?: (event: React.MouseEvent<HTMLButtonElement>, 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;
/**
Expand Down
27 changes: 14 additions & 13 deletions site/src/docs/components/notification/code.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,17 +200,18 @@ export default ({ children, pageContext }) => <TabsLayout pageContext={pageConte
### Properties
Note! You can find the full list of properties in the <ExternalLink href="/storybook/react/?path=/story/components-notification--default">React Storybook.</ExternalLink>

| 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]|

0 comments on commit 331c1a4

Please sign in to comment.