diff --git a/.changeset/rude-chefs-admire.md b/.changeset/rude-chefs-admire.md new file mode 100644 index 00000000000..c41901da267 --- /dev/null +++ b/.changeset/rude-chefs-admire.md @@ -0,0 +1,7 @@ +--- +'@primer/react': patch +--- + +Button and IconButton only use aria-labelledby to preserve the button label in a loading state OR if aria-labelledBy was explicitly passed. + + diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index 8458ecd8ad5..33a75fbb058 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -62,7 +62,6 @@ const ButtonBase = forwardRef( }, [baseStyles, sxProp]) const uuid = useId(id) const loadingAnnouncementID = `${uuid}-loading-announcement` - const buttonLabelID = ariaLabelledBy || `${uuid}-label` if (__DEV__) { /** @@ -100,8 +99,10 @@ const ButtonBase = forwardRef( aria-describedby={[loadingAnnouncementID, ariaDescribedBy] .filter(descriptionID => Boolean(descriptionID)) .join(' ')} - // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state - aria-labelledby={buttonLabelID} + // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state. + // We only set it when the button is in a loading state because it will supercede the aria-label when the screen + // reader announces the button name. + aria-labelledby={loading ? `${uuid}-label` : ariaLabelledBy} id={id} onClick={loading ? undefined : onClick} > @@ -117,7 +118,7 @@ const ButtonBase = forwardRef( {loading && !LeadingVisual && !TrailingVisual && renderVisual(Spinner, loading, 'loadingSpinner')} {LeadingVisual && renderVisual(LeadingVisual, loading, 'leadingVisual')} {children && ( - + {children} {count !== undefined && !TrailingVisual && ( diff --git a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap index d01040717b0..c33ffce6c69 100644 --- a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -264,7 +264,6 @@ exports[`Button respects block prop 1`] = `