diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 427b1a424f33..abe9aa2622b8 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -146,6 +146,7 @@ Map { "Button" => Object { "$$typeof": Symbol(react.forward_ref), "defaultProps": Object { + "dangerDescription": "danger", "disabled": false, "kind": "primary", "size": "default", @@ -178,6 +179,9 @@ Map { "className": Object { "type": "string", }, + "dangerDescription": Object { + "type": "string", + }, "disabled": Object { "type": "bool", }, diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js index fceccecad93a..f1417d8b6eff 100644 --- a/packages/react/src/components/Button/Button.js +++ b/packages/react/src/components/Button/Button.js @@ -13,6 +13,7 @@ import { ButtonKinds } from '../../prop-types/types'; import deprecate from '../../prop-types/deprecate'; import { composeEventHandlers } from '../../tools/events'; import { keys, matches } from '../../internal/keyboard'; +import { useId } from '../../internal/useId'; import toggleClass from '../../tools/toggleClass'; const { prefix } = settings; @@ -30,6 +31,7 @@ const Button = React.forwardRef(function Button( tabIndex, type, renderIcon: ButtonImageElement, + dangerDescription, iconDescription, hasIconOnly, tooltipPosition, @@ -139,23 +141,42 @@ const Button = React.forwardRef(function Button( /> ); + const dangerButtonVariants = ['danger', 'danger--tertiary', 'danger--ghost']; + let component = 'button'; + const assistiveId = useId('danger-description'); let otherProps = { disabled, type, + 'aria-describedby': dangerButtonVariants.includes(kind) + ? assistiveId + : null, 'aria-pressed': hasIconOnly && kind === 'ghost' ? isSelected : null, }; const anchorProps = { href, }; - const assistiveText = hasIconOnly ? ( -