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 ? ( -
- {iconDescription} -
- ) : null; + + let assistiveText; + if (hasIconOnly) { + assistiveText = ( +
+ {iconDescription} +
+ ); + } else if (dangerButtonVariants.includes(kind)) { + assistiveText = ( + + {dangerDescription} + + ); + } else { + assistiveText = null; + } + if (as) { component = as; otherProps = { @@ -205,6 +226,11 @@ Button.propTypes = { */ className: PropTypes.string, + /** + * Specify the message read by screen readers for the danger button variant + */ + dangerDescription: PropTypes.string, + /** * Specify whether the Button should be disabled, or not */ @@ -322,6 +348,7 @@ Button.defaultProps = { disabled: false, kind: 'primary', size: 'default', + dangerDescription: 'danger', tooltipAlignment: 'center', tooltipPosition: 'top', }; diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap index e6bf3aeb0b12..4157a885f50a 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap @@ -1885,6 +1885,7 @@ exports[`DataTable should render 1`] = `