From f9be6eccba4af2d20d3a35bf55144e4eee825f64 Mon Sep 17 00:00:00 2001 From: Barb Denney Date: Tue, 21 Apr 2026 10:25:45 -0600 Subject: [PATCH 1/5] Add web component and accessibility notes to divider Update divider component doc: add `web-component: va-divider` and anchors (Example, Usage, Accessibility considerations) in frontmatter; append an Accessibility considerations section that explains decorative vs semantic dividers and when to use `aria-hidden="true"`, with example markup for `va-divider`. --- src/_components/divider.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/src/_components/divider.md b/src/_components/divider.md index 66a1f6661..69f13ac2c 100644 --- a/src/_components/divider.md +++ b/src/_components/divider.md @@ -5,8 +5,13 @@ research-title: "Divider" figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Example-Library?type=design&node-id=974%3A2775&mode=design&t=jMcVWkPlFhZu3RTh-1 intro-text: "Dividers are used sparingly to separate significant sections of content" status: use-best-practice +web-component: va-divider web: true mobile-app: false +anchors: + - anchor: Example + - anchor: Usage + - anchor: Accessibility considerations --- ## Example @@ -26,3 +31,25 @@ mobile-app: false - Avoid using divider between short, individual items that are in close proximity with one another, _unless_ they are separating navigation links. Consider using white space or headers instead to create vertical separation. - Use a background color box or card to separate a chunk of interactive elements, like search controls, from a list of search results. + +## Accessibility considerations + +### Decorative vs semantic dividers + +Not all dividers should be announced to screen readers. Most dividers are decorative when used alongside headings or within well-structured content. + +**Use `aria-hidden="true"` for decorative dividers when:** +- The divider only provides visual separation +- Content structure is already clear through headings or other markup + +```html + +``` + +**Do not use `aria-hidden="true"` for semantic dividers when:** +- The divider marks a significant topic change meaningful to non-visual users +- The divider is the primary indicator of a content boundary + +```html + +``` From 7dabf15407ac4da8911406feba43caf7f53248e7 Mon Sep 17 00:00:00 2001 From: Barb Denney Date: Tue, 21 Apr 2026 11:16:43 -0600 Subject: [PATCH 2/5] Update src/_components/divider.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/_components/divider.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/_components/divider.md b/src/_components/divider.md index 69f13ac2c..cecefaca8 100644 --- a/src/_components/divider.md +++ b/src/_components/divider.md @@ -32,6 +32,11 @@ anchors: - Avoid using divider between short, individual items that are in close proximity with one another, _unless_ they are separating navigation links. Consider using white space or headers instead to create vertical separation. - Use a background color box or card to separate a chunk of interactive elements, like search controls, from a list of search results. +### How this component works + +The Divider component creates a horizontal rule between sections of content. Use it to separate distinct groups of information when spacing or headings alone don't provide enough visual separation. + +In most cases, dividers are decorative. If a divider communicates a meaningful change in topic or structure, don't hide it from assistive technology. ## Accessibility considerations ### Decorative vs semantic dividers From 6c1106bd6a2ad8becbbaf26108740c5e1c2e0d5e Mon Sep 17 00:00:00 2001 From: Barb Denney Date: Tue, 21 Apr 2026 11:17:01 -0600 Subject: [PATCH 3/5] Update src/_components/divider.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/_components/divider.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_components/divider.md b/src/_components/divider.md index cecefaca8..a0612e7f5 100644 --- a/src/_components/divider.md +++ b/src/_components/divider.md @@ -29,8 +29,8 @@ anchors: ### When to consider something else -- Avoid using divider between short, individual items that are in close proximity with one another, _unless_ they are separating navigation links. Consider using white space or headers instead to create vertical separation. -- Use a background color box or card to separate a chunk of interactive elements, like search controls, from a list of search results. +* **Short items in close proximity.** Avoid using a divider between short, individual items that are close to one another, _unless_ they separate navigation links. Consider using white space or headers instead to create vertical separation. +* **Grouped interactive elements.** Use a background color box or card to separate a chunk of interactive elements, like search controls, from a list of search results. ### How this component works From 70796a15eb859e691eb466ed2ad1d9628cfef534 Mon Sep 17 00:00:00 2001 From: Barb Denney Date: Tue, 21 Apr 2026 11:26:42 -0600 Subject: [PATCH 4/5] Remove web-component metadata from divider Delete the 'web-component: va-divider' frontmatter line in src/_components/divider.md to clean up component metadata for the Divider documentation. --- src/_components/divider.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/_components/divider.md b/src/_components/divider.md index 69f13ac2c..095d200fa 100644 --- a/src/_components/divider.md +++ b/src/_components/divider.md @@ -5,7 +5,6 @@ research-title: "Divider" figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Example-Library?type=design&node-id=974%3A2775&mode=design&t=jMcVWkPlFhZu3RTh-1 intro-text: "Dividers are used sparingly to separate significant sections of content" status: use-best-practice -web-component: va-divider web: true mobile-app: false anchors: From d20a5f5796ddf95a5dda36c5817b0ed152197a01 Mon Sep 17 00:00:00 2001 From: Barb Denney Date: Wed, 22 Apr 2026 10:46:27 -0600 Subject: [PATCH 5/5] Remove HTML examples from divider documentation Removed examples of HTML for aria-hidden attribute usage. --- src/_components/divider.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/_components/divider.md b/src/_components/divider.md index d1943c0ef..f2f2874e0 100644 --- a/src/_components/divider.md +++ b/src/_components/divider.md @@ -46,14 +46,6 @@ Not all dividers should be announced to screen readers. Most dividers are decora - The divider only provides visual separation - Content structure is already clear through headings or other markup -```html - -``` - **Do not use `aria-hidden="true"` for semantic dividers when:** - The divider marks a significant topic change meaningful to non-visual users - The divider is the primary indicator of a content boundary - -```html - -```