Aug 7, 2025 · Aug 7, 2025 · Aug 7, 2025 · Aug 7, 2025
diff --git a/site/src/components/Abbr/Abbr.stories.tsx b/site/src/components/Abbr/Abbr.stories.tsx
 },
 decorators: [
 (Story) => (
 <pcss={{ maxWidth: "40em" }}>
 <pclassName="max-w-2xl">
 The physical pain of getting bonked on the head with a cartoon mallet
 lasts precisely 593{" "}
 <spancss={styles.underlined}>
 <spanclassName="underline decoration-dotted">
 <Story />
 </span>
 . The emotional turmoil and complete embarrassment lasts forever.
 },
 decorators: [
 (Story) => (
 <spancss={styles.underlined}>
 <spanclassName="underline decoration-dotted">
 <Story />
 </span>
 ),
 },
 decorators: [
 (Story) => (
 <spancss={styles.underlined}>
 <spanclassName="underline decoration-dotted">
 <Story />
 </span>
 ),
 ],
 };

 const styles = {
 // Just here to make the abbreviated part more obvious in the component library
 underlined: {
 textDecoration: "underline dotted",
 },
 };
diff --git a/site/src/components/Abbr/Abbr.tsx b/site/src/components/Abbr/Abbr.tsx
 import type { FC, HTMLAttributes } from "react";
 import { cn } from "utils/cn";

 export type Pronunciation = "shorthand" | "acronym" | "initialism";

 // always have to supplement with aria-label
 title={title}
 aria-label={getAccessibleLabel(children, title, pronunciation)}
 css={{
 textDecoration: "inherit",
 letterSpacing: children === children.toUpperCase() ? "0.02em" : "0",
 }}
 className={cn(
 "decoration-inherit",
 children === children.toUpperCase()
 ? "tracking-wide"
 : "tracking-normal",
 )}
 {...delegatedProps}
 >
 <span aria-hidden>{children}</span>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,10 +25,10 @@ export const InlinedShorthand: Story = {
		},
		decorators: [
		(Story) => (
		<pcss={{ maxWidth: "40em" }}>
		<pclassName="max-w-2xl">
		The physical pain of getting bonked on the head with a cartoon mallet
		lasts precisely 593{" "}
		<spancss={styles.underlined}>
		<spanclassName="underline decoration-dotted">
		<Story />
		</span>
		. The emotional turmoil and complete embarrassment lasts forever.
Expand All		@@ -45,7 +45,7 @@ export const Acronym: Story = {
		},
		decorators: [
		(Story) => (
		<spancss={styles.underlined}>
		<spanclassName="underline decoration-dotted">
		<Story />
		</span>
		),
Expand All		@@ -60,16 +60,9 @@ export const Initialism: Story = {
		},
		decorators: [
		(Story) => (
		<spancss={styles.underlined}>
		<spanclassName="underline decoration-dotted">
		<Story />
		</span>
		),
		],
		};

		const styles = {
		// Just here to make the abbreviated part more obvious in the component library
		underlined: {
		textDecoration: "underline dotted",
		},
		};
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,5 @@
		import type { FC, HTMLAttributes } from "react";
		import { cn } from "utils/cn";

		export type Pronunciation = "shorthand" \| "acronym" \| "initialism";

Expand DownExpand Up		@@ -29,10 +30,12 @@ export const Abbr: FC<AbbrProps> = ({
		// always have to supplement with aria-label
		title={title}
		aria-label={getAccessibleLabel(children, title, pronunciation)}
		css={{
		textDecoration: "inherit",
		letterSpacing: children === children.toUpperCase() ? "0.02em" : "0",
		}}
		className={cn(
		"decoration-inherit",
		children === children.toUpperCase()
		? "tracking-wide"
		: "tracking-normal",
		)}
		{...delegatedProps}
		>
		<span aria-hidden>{children}</span>
Expand Down