Add Button support for making the Button description visible.

WordPress · Jul 12, 2024 · a6f7b96 · a6f7b96
1 parent a548697
commit a6f7b96
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 5 deletions.
diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md
@@ -140,10 +140,17 @@ An optional additional class name to apply to the rendered button.
 
 #### `describedBy`: `string`
 
-An accessible description for the button.
+A visually hidden accessible description for the button.
 
 -   Required: No
 
+#### `showDescription`: `boolean`
+
+Whether to show the accessible description.
+
+-   Required: No
+-   Default: `false`
+
 #### `disabled`: `boolean`
 
 Whether the button is disabled. If `true`, this will force a `button` element to be rendered, even when an `href` is given.

diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx
@@ -110,6 +110,7 @@ export function UnforwardedButton(
 		text,
 		variant,
 		describedBy,
+		showDescription,
 		...buttonOrAnchorProps
 	} = useDeprecatedProps( props );
 
@@ -274,13 +275,15 @@ export function UnforwardedButton(
 		  }
 		: {};
 
+	const DescriptionComponent = showDescription ? 'span' : VisuallyHidden;
+
 	return (
 		<>
 			<Tooltip { ...tooltipProps }>{ element }</Tooltip>
 			{ describedBy && (
-				<VisuallyHidden>
+				<DescriptionComponent className="components-button__description">
 					<span id={ descriptionId }>{ describedBy }</span>
-				</VisuallyHidden>
+				</DescriptionComponent>
 			) }
 		</>
 	);

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -216,7 +216,6 @@
 	/**
 	 * Link buttons.
 	 */
-
 	&.is-link {
 		margin: 0;
 		padding: 0;
@@ -372,6 +371,16 @@
 	}
 }
 
+.components-button__description {
+	display: block;
+	margin-top: $grid-unit-10;
+	margin-bottom: 0;
+	font-family: inherit;
+	font-weight: normal;
+	font-size: $default-font-size;
+	color: $gray-700;
+}
+
 @keyframes components-button__busy-animation {
 	0% {
 		background-position: 200px 0;

diff --git a/packages/components/src/button/types.ts b/packages/components/src/button/types.ts
@@ -43,9 +43,15 @@ type BaseButtonProps = {
 	 */
 	children?: ReactNode;
 	/**
-	 * An accessible description for the button.
+	 * A visually hidden accessible description for the button.
 	 */
 	describedBy?: string;
+	/**
+	 * Whether to show the accessible description.
+	 *
+	 * @default false
+	 */
+	showDescription?: boolean;
 	/**
 	 * If provided, renders an Icon component inside the button.
 	 */