From bbb73e9d57bfad992446e8598f61ecfc282a02a9 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 4 Sep 2024 14:07:03 +0200 Subject: [PATCH] Revert and rephrase landmarks guideline --- storybook/src/components/Accordion/Accordion.docs.mdx | 10 +++++----- .../src/components/Accordion/Accordion.stories.tsx | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/storybook/src/components/Accordion/Accordion.docs.mdx b/storybook/src/components/Accordion/Accordion.docs.mdx index fc83afa764..6f4ea4cb6b 100644 --- a/storybook/src/components/Accordion/Accordion.docs.mdx +++ b/storybook/src/components/Accordion/Accordion.docs.mdx @@ -23,13 +23,13 @@ If you want the contents of an accordion section to appear initially, pass the ` -### Improve semantics +### Limit the amount of accessibility landmarks -By default, an Accordion Section renders a `section` element in HTML. -Having many Accordion Sections on your page can lead to too many landmark regions, confusing screen reader users. -In that case, use `sectionAs="div"`. +An Accordion Section renders a `section` element in HTML by default. +Each of them introduces a landmark region, but having many of them on a page can confuse screen reader users. +Consider using general `div` elements instead through `sectionAs="div"`. - + ### Technical considerations diff --git a/storybook/src/components/Accordion/Accordion.stories.tsx b/storybook/src/components/Accordion/Accordion.stories.tsx index dac0382803..d186dc3e8e 100644 --- a/storybook/src/components/Accordion/Accordion.stories.tsx +++ b/storybook/src/components/Accordion/Accordion.stories.tsx @@ -59,7 +59,7 @@ export const ExpandedByDefault: Story = { }, } -export const ImproveSemantics: Story = { +export const ReduceLandmarks: Story = { args: { sectionAs: 'div', children: [