From 9a940373c9e49c87754a721518ec92847f85ba8d Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Tue, 12 Aug 2025 14:02:23 +0000 Subject: [PATCH 1/4] fix: correct markup for Abbr component --- site/src/components/Abbr/Abbr.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/site/src/components/Abbr/Abbr.tsx b/site/src/components/Abbr/Abbr.tsx index b27141818efb3..e2f3d29732bcc 100644 --- a/site/src/components/Abbr/Abbr.tsx +++ b/site/src/components/Abbr/Abbr.tsx @@ -7,6 +7,7 @@ type AbbrProps = HTMLAttributes & { children: string; title: string; pronunciation?: Pronunciation; + className?: string; }; /** @@ -22,23 +23,28 @@ export const Abbr: FC = ({ children, title, pronunciation = "shorthand", + className, ...delegatedProps }) => { return ( {children} + + {getAccessibleLabel(children, title, pronunciation)} + ); }; From 0a076c7ea2094e041170b546bfed7f085a1bbd4d Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Wed, 13 Aug 2025 20:59:23 +0000 Subject: [PATCH 2/4] fix: update tests --- site/src/components/Abbr/Abbr.test.tsx | 55 +++++++++++++++----------- 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/site/src/components/Abbr/Abbr.test.tsx b/site/src/components/Abbr/Abbr.test.tsx index 3ae76f071bdfb..ad90ee49416a1 100644 --- a/site/src/components/Abbr/Abbr.test.tsx +++ b/site/src/components/Abbr/Abbr.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from "@testing-library/react"; -import { Abbr, type Pronunciation } from "./Abbr"; +import { Abbr } from "./Abbr"; type AbbreviationData = { abbreviation: string; @@ -7,26 +7,6 @@ type AbbreviationData = { expectedLabel: string; }; -type AssertionInput = AbbreviationData & { - pronunciation: Pronunciation; -}; - -function assertAccessibleLabel({ - abbreviation, - title, - expectedLabel, - pronunciation, -}: AssertionInput) { - const { unmount } = render( - - {abbreviation} - , - ); - - screen.getByLabelText(expectedLabel, { selector: "abbr" }); - unmount(); -} - describe(Abbr.name, () => { it("Has an aria-label that equals the title if the abbreviation is shorthand", () => { const sampleShorthands: AbbreviationData[] = [ @@ -43,7 +23,18 @@ describe(Abbr.name, () => { ]; for (const shorthand of sampleShorthands) { - assertAccessibleLabel({ ...shorthand, pronunciation: "shorthand" }); + const { unmount } = render( + + {shorthand.abbreviation} + , + ); + + // The element doesn't have any ARIA role semantics baked in, + // so we have to get a little bit more creative with making sure the + // expected content is on screen in an accessible way + const element = screen.getByTitle(shorthand.title); + expect(element).toHaveTextContent(shorthand.expectedLabel); + unmount(); } }); @@ -67,7 +58,15 @@ describe(Abbr.name, () => { ]; for (const acronym of sampleAcronyms) { - assertAccessibleLabel({ ...acronym, pronunciation: "acronym" }); + const { unmount } = render( + + {acronym.abbreviation} + , + ); + + const element = screen.getByTitle(acronym.title); + expect(element).toHaveTextContent(acronym.expectedLabel); + unmount(); } }); @@ -91,7 +90,15 @@ describe(Abbr.name, () => { ]; for (const initialism of sampleInitialisms) { - assertAccessibleLabel({ ...initialism, pronunciation: "initialism" }); + const { unmount } = render( + + {initialism.abbreviation} + , + ); + + const element = screen.getByTitle(initialism.title); + expect(element).toHaveTextContent(initialism.expectedLabel); + unmount(); } }); }); From c69b449a3e6a832f4430b1fe0e686f531fa3a9c2 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Wed, 13 Aug 2025 21:17:37 +0000 Subject: [PATCH 3/4] fix: update tests/stories --- site/src/components/Abbr/Abbr.stories.tsx | 8 ++++---- site/src/components/Abbr/Abbr.test.tsx | 6 +++--- site/src/components/Abbr/Abbr.tsx | 6 ++---- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/site/src/components/Abbr/Abbr.stories.tsx b/site/src/components/Abbr/Abbr.stories.tsx index b32138ad54fd5..7d079e4ac7416 100644 --- a/site/src/components/Abbr/Abbr.stories.tsx +++ b/site/src/components/Abbr/Abbr.stories.tsx @@ -6,10 +6,10 @@ const meta: Meta = { component: Abbr, decorators: [ (Story) => ( - <> +

Try the following text out in a screen reader!

- +
), ], }; @@ -25,9 +25,9 @@ export const InlinedShorthand: Story = { }, decorators: [ (Story) => ( -

+

The physical pain of getting bonked on the head with a cartoon mallet - lasts precisely 593{" "} + lasts precisely 593 diff --git a/site/src/components/Abbr/Abbr.test.tsx b/site/src/components/Abbr/Abbr.test.tsx index ad90ee49416a1..b67406299685a 100644 --- a/site/src/components/Abbr/Abbr.test.tsx +++ b/site/src/components/Abbr/Abbr.test.tsx @@ -8,7 +8,7 @@ type AbbreviationData = { }; describe(Abbr.name, () => { - it("Has an aria-label that equals the title if the abbreviation is shorthand", () => { + it("Omits abbreviation from screen-reader output if it is shorthand", () => { const sampleShorthands: AbbreviationData[] = [ { abbreviation: "ms", @@ -38,7 +38,7 @@ describe(Abbr.name, () => { } }); - it("Has an aria label with title and 'flattened' pronunciation if abbreviation is acronym", () => { + it("Adds title and 'flattened' pronunciation if abbreviation is acronym", () => { const sampleAcronyms: AbbreviationData[] = [ { abbreviation: "NASA", @@ -70,7 +70,7 @@ describe(Abbr.name, () => { } }); - it("Has an aria label with title and initialized pronunciation if abbreviation is initialism", () => { + it("Adds title and initialized pronunciation if abbreviation is initialism", () => { const sampleInitialisms: AbbreviationData[] = [ { abbreviation: "FBI", diff --git a/site/src/components/Abbr/Abbr.tsx b/site/src/components/Abbr/Abbr.tsx index e2f3d29732bcc..0625d0952a260 100644 --- a/site/src/components/Abbr/Abbr.tsx +++ b/site/src/components/Abbr/Abbr.tsx @@ -33,10 +33,8 @@ export const Abbr: FC = ({ // to inject the actual text content inside the abbr itself title={title} className={cn( - "underline-none", - children === children.toUpperCase() - ? "tracking-wide" - : "tracking-normal", + "no-underline tracking-normal", + children === children.toUpperCase() && "tracking-wide", className, )} {...delegatedProps} From 2169a7b183eaef463ee85c8da145427fc581cb21 Mon Sep 17 00:00:00 2001 From: Michael Smith Date: Thu, 14 Aug 2025 02:11:06 +0000 Subject: [PATCH 4/4] fix: format --- site/src/components/Abbr/Abbr.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/Abbr/Abbr.tsx b/site/src/components/Abbr/Abbr.tsx index 0625d0952a260..0c08c33e111ce 100644 --- a/site/src/components/Abbr/Abbr.tsx +++ b/site/src/components/Abbr/Abbr.tsx @@ -1,7 +1,7 @@ import type { FC, HTMLAttributes } from "react"; import { cn } from "utils/cn"; -export type Pronunciation = "shorthand" | "acronym" | "initialism"; +type Pronunciation = "shorthand" | "acronym" | "initialism"; type AbbrProps = HTMLAttributes & { children: string;