From ecec18c163be0047a7e4a803a61586476a85859c Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Wed, 18 Oct 2023 12:05:13 -0400 Subject: [PATCH] better aria attributes for Heading overline --- CHANGELOG.md | 10 +++++++++ .../FeaturedContent.test.tsx.snap | 12 +++++----- src/components/Heading/Heading.mdx | 22 ++++++++++++++----- src/components/Heading/Heading.tsx | 2 +- .../__snapshots__/Heading.test.tsx.snap | 4 ++-- .../Heading/headingChangelogData.ts | 21 ++++++++++++++++++ 6 files changed, 56 insertions(+), 15 deletions(-) create mode 100644 src/components/Heading/headingChangelogData.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 93cbe36363..5c6d431d7a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,8 +8,18 @@ Currently, this repo is in Prerelease. When it is released, this project will ad ## Prerelease +### Adds + +- Adds a changelog to the story pages for the `Heading` component. + +### Updates + +- Updates the `Heading` component to set the `aria-roledescription` value as `"subtitle"` (a more familiar and recognizable value) for the `overline` element. + ## 2.1.0 (October 18, 2023) +### Adds + - Adds the `ComponentChangelogTable` component. - Adds a changelog to the story pages for the `DatePicker`, `FeedbackBox`, `Hero`, `Slider`, and `TextInput` components. - Adds the `FeaturedContent` component. diff --git a/src/components/FeaturedContent/__snapshots__/FeaturedContent.test.tsx.snap b/src/components/FeaturedContent/__snapshots__/FeaturedContent.test.tsx.snap index 15ddf324e0..02844d5abf 100644 --- a/src/components/FeaturedContent/__snapshots__/FeaturedContent.test.tsx.snap +++ b/src/components/FeaturedContent/__snapshots__/FeaturedContent.test.tsx.snap @@ -33,7 +33,7 @@ exports[`Renders the UI snapshot correctly 1`] = ` role="group" >

@@ -94,7 +94,7 @@ exports[`Renders the UI snapshot correctly 2`] = ` role="group" >

@@ -155,7 +155,7 @@ exports[`Renders the UI snapshot correctly 3`] = ` role="group" >

@@ -216,7 +216,7 @@ exports[`Renders the UI snapshot correctly 4`] = ` role="group" >

@@ -277,7 +277,7 @@ exports[`Renders the UI snapshot correctly 5`] = ` role="group" >

@@ -338,7 +338,7 @@ exports[`Renders the UI snapshot correctly 6`] = ` role="group" >

diff --git a/src/components/Heading/Heading.mdx b/src/components/Heading/Heading.mdx index e08ff8e6aa..d0dbeefd74 100644 --- a/src/components/Heading/Heading.mdx +++ b/src/components/Heading/Heading.mdx @@ -1,16 +1,18 @@ import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks"; +import ComponentChangelogTable from "../../utils/ComponentChangelogTable"; import * as HeadingStories from "./Heading.stories"; import Link from "../Link/Link"; +import { changelogData } from "./headingChangelogData"; # Heading -| Component Version | DS Version | -| ----------------- | ---------- | -| Added | `0.0.4` | -| Latest | `1.7.1` | +| Component Version | DS Version | +| ----------------- | ------------ | +| Added | `0.0.4` | +| Latest | `Prerelease` | ## Table of Contents @@ -23,6 +25,7 @@ import Link from "../Link/Link"; - {Overline and Subtitle Elements} - {Heading with Bold Text} - {Heading with Links} +- {Changelog} ## Overview @@ -56,13 +59,16 @@ proper order and not skipping any. For example, the following is invalid HTML: When either the overline or subtitle elements are rendered as part of the heading, then the whole lockup will be wrapped in an `

` element with -proper `role` and `aria-roledescription` attributes applied. +proper `role` and `aria-roledescription` attributes applied. Please note that +both the overline and subtitle elements use `"Subtitle"` - a familiar and +recognizable term - for the `aria-roledescription` attribute. +

Overline

Heading Title

-

Subtitle

+

Subtitle

`} language="html" @@ -246,3 +252,7 @@ When the `url` prop is passed to `Heading`, a child `` element is created and the heading text becomes an active link. + +## Changelog + + diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx index 06550be520..3b4e3ed8db 100644 --- a/src/components/Heading/Heading.tsx +++ b/src/components/Heading/Heading.tsx @@ -276,7 +276,7 @@ export const Heading = chakra( <> {overline && (

@@ -140,7 +140,7 @@ exports[`Heading renders the UI snapshot correctly 11`] = ` role="group" >

diff --git a/src/components/Heading/headingChangelogData.ts b/src/components/Heading/headingChangelogData.ts new file mode 100644 index 0000000000..76041bc3aa --- /dev/null +++ b/src/components/Heading/headingChangelogData.ts @@ -0,0 +1,21 @@ +/** This data is used to populate the ComponentChangelogTable component. + * + * date: string (when adding new entry during development, set value as "Prerelease") + * version: string (when adding new entry during development, set value as "Prerelease") + * type: "Bug Fix" | "New Feature" | "Update"; + * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"]; + * notes: array (will render as a bulleted list, add one array element for each list element) + */ +import { ChangelogData } from "../../utils/ComponentChangelogTable"; + +export const changelogData: ChangelogData[] = [ + { + date: "Prerelease", + version: "Prerelease", + type: "Update", + affects: ["Accessibility"], + notes: [ + 'Updated the `aria-roledescription` value to "subtitle" (a more familiar and recognizable term) for the `overline` element.', + ], + }, +];