From 6a1e169d1c73c46af7812d49943945d7f14a5e42 Mon Sep 17 00:00:00 2001 From: "D.A. Kahn" Date: Mon, 29 Mar 2021 22:57:10 -0500 Subject: [PATCH 1/4] fix(Button): add danger variant assistive text --- .../react/src/components/Button/Button.js | 30 ++++++++++++++----- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js index fceccecad93a..184483b791f2 100644 --- a/packages/react/src/components/Button/Button.js +++ b/packages/react/src/components/Button/Button.js @@ -143,19 +143,33 @@ const Button = React.forwardRef(function Button( let otherProps = { disabled, type, + 'aria-describedby': kind === 'danger' ? 'danger-description' : null, 'aria-pressed': hasIconOnly && kind === 'ghost' ? isSelected : null, }; const anchorProps = { href, }; - const assistiveText = hasIconOnly ? ( -
- {iconDescription} -
- ) : null; + + let assistiveText; + if (hasIconOnly) { + assistiveText = ( +
+ {iconDescription} +
+ ); + } else if (kind === 'danger') { + assistiveText = ( + + danger + + ); + } else { + assistiveText = null; + } + if (as) { component = as; otherProps = { From 6d4eca9f478ccbc16a7fbbac00047fcb3ec4ee05 Mon Sep 17 00:00:00 2001 From: "D.A. Kahn" Date: Tue, 30 Mar 2021 19:43:31 -0500 Subject: [PATCH 2/4] fix(Button): add danger variant conditionals/useId --- .../react/src/components/Button/Button.js | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js index 184483b791f2..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,11 +141,16 @@ 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': kind === 'danger' ? 'danger-description' : null, + 'aria-describedby': dangerButtonVariants.includes(kind) + ? assistiveId + : null, 'aria-pressed': hasIconOnly && kind === 'ghost' ? isSelected : null, }; const anchorProps = { @@ -160,10 +167,10 @@ const Button = React.forwardRef(function Button( {iconDescription} ); - } else if (kind === 'danger') { + } else if (dangerButtonVariants.includes(kind)) { assistiveText = ( - - danger + + {dangerDescription} ); } else { @@ -219,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 */ @@ -336,6 +348,7 @@ Button.defaultProps = { disabled: false, kind: 'primary', size: 'default', + dangerDescription: 'danger', tooltipAlignment: 'center', tooltipPosition: 'top', }; From 2de2d1e6b97ea12b6499a7a467404f58d58b4323 Mon Sep 17 00:00:00 2001 From: "D.A. Kahn" Date: Wed, 31 Mar 2021 12:00:58 -0500 Subject: [PATCH 3/4] test(Button): update snaps --- .../__snapshots__/PublicAPI-test.js.snap | 1 - .../__snapshots__/PublicAPI-test.js.snap | 4 ++++ .../__snapshots__/DataTable-test.js.snap | 22 +++++++++++++++++++ .../TableBatchAction-test.js.snap | 2 ++ .../TableBatchActions-test.js.snap | 4 ++++ .../__snapshots__/ModalWrapper-test.js.snap | 6 +++++ .../HeaderGlobalAction-test.js.snap | 2 ++ 7 files changed, 40 insertions(+), 1 deletion(-) diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap index 661c33410862..6df53f6619e1 100644 --- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -250,7 +250,6 @@ Array [ "spacing10", "spacing11", "spacing12", - "spacing13", "styles", "support01", "support02", diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 2fd0362969c7..f99e699b8d2c 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/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`] = `