Skip to content

docs: minor story-only accessibility fixes in v9 stories #36406

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

Open
smhigley wants to merge 1 commit into
base: master
Choose a base branch
from
Open

docs: minor story-only accessibility fixes in v9 stories #36406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const useClasses = makeStyles({
placeContent: 'center',

padding: '40px',
height: '200px',
minHeight: '200px',

position: 'relative',
},
Expand Down
5 changes: 4 additions & 1 deletion ...ges/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
useId,
tokens,
makeStyles,
useRestoreFocusTarget,
} from '@fluentui/react-components';
import { Dismiss24Regular } from '@fluentui/react-icons';
import story from './DialogBackdropAppearance.md';
Expand All @@ -41,9 +42,11 @@ export const BackdropAppearance = (): JSXElement => {
const [backdropAppearance, setBackdropAppearance] = React.useState<BackdropAppearanceOption>();
const backdropProp = backdropAppearance ? { appearance: backdropAppearance } : undefined;

const restoreFocusTargetAttribute = useRestoreFocusTarget();

return (
<>
<Button appearance="primary" onClick={() => setDrawerOpen(true)}>
<Button appearance="primary" onClick={() => setDrawerOpen(true)} {...restoreFocusTargetAttribute}>
Open Drawer
</Button>

Expand Down
3 changes: 2 additions & 1 deletion ...eact-components/react-popover/stories/src/Popover/PopoverAnchorToCustomTarget.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ export const AnchorToCustomTarget = (): JSXElement => {
<Button>Popover trigger</Button>
</PopoverTrigger>

<PopoverSurface tabIndex={-1}>
{/* Use this labelling technique for very short popovers. Otherwise label by the heading if setting focus to the popover surface. */}
<PopoverSurface tabIndex={-1} id="popover-surface" aria-labelledby="popover-surface">
<ExampleContent />
</PopoverSurface>
</Popover>
Expand Down
10 changes: 6 additions & 4 deletions packages/react-components/react-popover/stories/src/Popover/PopoverAppearance.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ const ExampleContent = () => {
const styles = useStyles();
return (
<div>
<h3 className={styles.contentHeader}>Popover content</h3>
<h3 className={styles.contentHeader} id="popover-title">
Popover content
</h3>

<div>This is some popover content</div>
</div>
Expand All @@ -37,7 +39,7 @@ export const Appearance = (): JSXElement => {
<Button>Default appearance Popover trigger</Button>
</PopoverTrigger>

<PopoverSurface tabIndex={-1}>
<PopoverSurface tabIndex={-1} aria-labelledby="popover-title">
<ExampleContent />
</PopoverSurface>
</Popover>
Expand All @@ -47,7 +49,7 @@ export const Appearance = (): JSXElement => {
<Button>Brand appearance Popover trigger</Button>
</PopoverTrigger>

<PopoverSurface tabIndex={-1}>
<PopoverSurface tabIndex={-1} aria-labelledby="popover-title">
<ExampleContent />
</PopoverSurface>
</Popover>
Expand All @@ -57,7 +59,7 @@ export const Appearance = (): JSXElement => {
<Button>Inverted appearance Popover trigger</Button>
</PopoverTrigger>

<PopoverSurface tabIndex={-1}>
<PopoverSurface tabIndex={-1} aria-labelledby="popover-title">
<ExampleContent />
</PopoverSurface>
</Popover>
Expand Down
3 changes: 2 additions & 1 deletion ...t-components/react-popover/stories/src/Popover/PopoverControllingOpenAndClose.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ export const ControllingOpenAndClose = (): JSXElement => {
<PopoverTrigger disableButtonEnhancement>
<Button>Controlled trigger</Button>
</PopoverTrigger>
<PopoverSurface tabIndex={-1}>
{/* Use this labelling technique for very short popovers. Otherwise label by the heading if setting focus to the popover surface. */}
<PopoverSurface tabIndex={-1} id="popover-surface" aria-labelledby="popover-surface">
<ExampleContent />
</PopoverSurface>
</Popover>
Expand Down
3 changes: 2 additions & 1 deletion packages/react-components/react-popover/stories/src/Popover/PopoverCustomTrigger.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ export const CustomTrigger = (): JSXElement => {
<PopoverTrigger>
<CustomPopoverTrigger />
</PopoverTrigger>
<PopoverSurface tabIndex={-1}>
{/* Use this labelling technique for very short popovers. Otherwise label by the heading if setting focus to the popover surface. */}
<PopoverSurface tabIndex={-1} id="popover-surface" aria-labelledby="popover-surface">
<ExampleContent />
</PopoverSurface>
</Popover>
Expand Down
3 changes: 2 additions & 1 deletion packages/react-components/react-popover/stories/src/Popover/PopoverDefault.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ export const Default = (props: PopoverProps): JSXElement => (
<Button>Popover trigger</Button>
</PopoverTrigger>

<PopoverSurface tabIndex={-1}>
{/* Use this labelling technique for very short popovers. Otherwise label by the heading if setting focus to the popover surface. */}
<PopoverSurface tabIndex={-1} id="popover-surface" aria-labelledby="popover-surface">
<ExampleContent />
</PopoverSurface>
</Popover>
Expand Down
3 changes: 2 additions & 1 deletion packages/react-components/react-popover/stories/src/Popover/PopoverMotionCustom.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ export const MotionCustom = (): JSXElement => (
<Button>Open popover</Button>
</PopoverTrigger>

<PopoverSurface tabIndex={-1}>
{/* Use this labelling technique for very short popovers. Otherwise label by the heading if setting focus to the popover surface. */}
<PopoverSurface tabIndex={-1} id="popover-surface" aria-labelledby="popover-surface">
<h3 style={{ marginTop: 0 }}>Popover content</h3>
<p>This popover fades in and blurs out.</p>
</PopoverSurface>
Expand Down
3 changes: 2 additions & 1 deletion ...ages/react-components/react-popover/stories/src/Popover/PopoverMotionDisabled.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ export const MotionDisabled = (): JSXElement => (
<Button>Open popover</Button>
</PopoverTrigger>

<PopoverSurface tabIndex={-1}>
{/* Use this labelling technique for very short popovers. Otherwise label by the heading if setting focus to the popover surface. */}
<PopoverSurface tabIndex={-1} id="popover-surface" aria-labelledby="popover-surface">
<h3 style={{ marginTop: 0 }}>Popover content</h3>
<p>This popover has motion disabled</p>
</PopoverSurface>
Expand Down
3 changes: 2 additions & 1 deletion packages/react-components/react-popover/stories/src/Popover/PopoverWithArrow.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ export const WithArrow = (): JSXElement => (
<Button>Popover trigger</Button>
</PopoverTrigger>

<PopoverSurface tabIndex={-1}>
{/* Use this labelling technique for very short popovers. Otherwise label by the heading if setting focus to the popover surface. */}
<PopoverSurface tabIndex={-1} id="popover-surface" aria-labelledby="popover-surface">
<ExampleContent />
</PopoverSurface>
</Popover>
Expand Down
6 changes: 4 additions & 2 deletions ...s/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ const ExampleContent = () => {
const styles = useContentStyles();
return (
<div className={styles.root}>
<h3 className={styles.header}>Popover content</h3>
<h3 id="popover-heading" className={styles.header}>
Popover content
</h3>

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper, nulla at pretium pulvinar, erat nibh
Expand Down Expand Up @@ -81,7 +83,7 @@ export const WithArrowAutosize = (): JSXElement => (
</PopoverTrigger>

{/* 1. Reset the overflow behavior on `PopoverSurface` to avoid clipping of arrow */}
<PopoverSurface tabIndex={-1} style={{ overflow: 'visible', padding: 0 }}>
<PopoverSurface tabIndex={-1} aria-labelledby="popover-heading" style={{ overflow: 'visible', padding: 0 }}>
{/* 2. Set the height of the popover content to 100% to fill the available space and allow scrolling */}
<ExampleContent />
</PopoverSurface>
Expand Down
Loading