Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(notification): clean up static notification stories #15767

Merged
merged 4 commits into from
Feb 19, 2024
Merged

docs(notification): clean up static notification stories #15767

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
926f57a
docs(notification): clean up static notification stories
tay1orjones Feb 15, 2024
8a22ec7
docs(notification): improve static notification storybook mdx docs
tay1orjones Feb 15, 2024
66240e8
Update packages/react/src/components/Notification/Notification.mdx
tay1orjones Feb 15, 2024
fa37557
Merge branch 'main' into cleanup-static-notification-stories
tay1orjones Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 15 additions & 7 deletions packages/react/src/components/Notification/Notification.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,21 @@ don't grab focus. Use them to provide the user with an alert, status, or log.
### unstable\_\_StaticNotification

`unstable__StaticNotification` is non-modal and should only be used inline with
content on the initial render of the page or modal. This should not be used for
real-time notifications or notifications responding to user input (unless the
page is completely refreshing and bumping the users focus back to the first
element in the dom/tab order). This is the most passive notification component
and is essentially just a styled div. If you place actions or interactive
elements within this component, place an `aria-describedby` on the interactive
element with a value that matches the `titleId` prop.
content on the initial render of the page or modal because it will not be
announced to screenreader users like the other notification components.

As such, this should not be used for real-time notifications or notifications
responding to user input (unless the page is completely refreshing and bumping
the users focus back to the first element in the dom/tab order). If a
StaticNotification is rendered after the initial render, screenreader users'
focus may have already passed this portion of the DOM and they will not know
that the notification has been rendered until they circle back to the beginning
of the page.

This is the most passive notification component and is essentially just a styled
div. If you place actions or interactive elements within this component, place
an `aria-describedby` on the interactive element with a value that matches the
`titleId` prop.

## Component API

Expand Down
22 changes: 10 additions & 12 deletions packages/react/src/components/Notification/stories/StaticNotification.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import React from 'react';
import { StaticNotification } from '../../Notification';
import { Button } from '../../Button';
import { Link } from '../../Link';
import mdx from '../Notification.mdx';

// eslint-disable-next-line storybook/csf-component
Expand All @@ -33,20 +33,18 @@ export const Default = () => (
/>
);

export const WithInteractiveElementsThatPopTheWarning = () => (
<StaticNotification
title="Notification title"
subtitle="Subtitle text goes here">
<Button>Test</Button>
</StaticNotification>
);

export const WithInteractiveElementsThatDONOTPopTheWarning = () => (
export const WithInteractiveElements = () => (
<StaticNotification
title="Notification title"
titleId="my fancy id 123"
subtitle="Subtitle text goes here">
<Button aria-describedby="my fancy id 123">Test</Button>
kind="info"
lowContrast>
<div className="cds--inline-notification__subtitle">
Additional text can describe the notification, or a link to{' '}
<Link inline href="#" aria-describedby="my fancy id 123">
learn more
</Link>
</div>
</StaticNotification>
);

Expand Down