Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Button): add danger variant assistive text #8222

Merged
merged 9 commits into from
Apr 1, 2021
Merged

fix(Button): add danger variant assistive text #8222

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6a1e169
fix(Button): add danger variant assistive text
dakahn Mar 30, 2021
6d4eca9
fix(Button): add danger variant conditionals/useId
dakahn Mar 31, 2021
5dc9d5c
Merge branch 'main' into 8220-danger-button-assistive-text
dakahn Mar 31, 2021
2de2d1e
test(Button): update snaps
dakahn Mar 31, 2021
7646306
Merge branch 'main' into 8220-danger-button-assistive-text
dakahn Mar 31, 2021
d025d0d
Merge branch 'main' of github.com:carbon-design-system/carbon into 82…
dakahn Mar 31, 2021
17c2d54
test(Button): update public api test
dakahn Mar 31, 2021
5644ba9
Merge branch 'main' into 8220-danger-button-assistive-text
dakahn Mar 31, 2021
9a264f3
Merge branch 'main' into 8220-danger-button-assistive-text
kodiakhq[bot] Apr 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,6 @@ Array [
"spacing10",
"spacing11",
"spacing12",
"spacing13",
tw15egan marked this conversation as resolved.
Show resolved Hide resolved
"styles",
"support01",
"support02",
Expand Down
4 changes: 4 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ Map {
"Button" => Object {
"$$typeof": Symbol(react.forward_ref),
"defaultProps": Object {
"dangerDescription": "danger",
"disabled": false,
"kind": "primary",
"size": "default",
Expand Down Expand Up @@ -178,6 +179,9 @@ Map {
"className": Object {
"type": "string",
},
"dangerDescription": Object {
"type": "string",
},
"disabled": Object {
"type": "bool",
},
Expand Down
43 changes: 35 additions & 8 deletions packages/react/src/components/Button/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -30,6 +31,7 @@ const Button = React.forwardRef(function Button(
tabIndex,
type,
renderIcon: ButtonImageElement,
dangerDescription,
iconDescription,
hasIconOnly,
tooltipPosition,
Expand Down Expand Up @@ -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 ? (
<div
ref={tooltipRef}
onMouseEnter={handleMouseEnter}
className={`${prefix}--assistive-text`}>
{iconDescription}
</div>
) : null;

let assistiveText;
if (hasIconOnly) {
assistiveText = (
<div
ref={tooltipRef}
onMouseEnter={handleMouseEnter}
className={`${prefix}--assistive-text`}>
{iconDescription}
</div>
);
} else if (dangerButtonVariants.includes(kind)) {
assistiveText = (
<span id={assistiveId} className={`${prefix}--visually-hidden`}>
{dangerDescription}
</span>
);
} else {
assistiveText = null;
}

if (as) {
component = as;
otherProps = {
Expand Down Expand Up @@ -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
*/
Expand Down Expand Up @@ -322,6 +348,7 @@ Button.defaultProps = {
disabled: false,
kind: 'primary',
size: 'default',
dangerDescription: 'danger',
tooltipAlignment: 'center',
tooltipPosition: 'top',
};
Expand Down
22 changes: 22 additions & 0 deletions packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1885,6 +1885,7 @@ exports[`DataTable should render 1`] = `
</TableToolbarAction>
</TableToolbarMenu>
<Button
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[MockFunction]}
Expand Down Expand Up @@ -2044,6 +2045,7 @@ exports[`DataTable should render 1`] = `
}
>
<Button
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[MockFunction]}
Expand All @@ -2060,6 +2062,7 @@ exports[`DataTable should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--primary"
disabled={false}
Expand Down Expand Up @@ -2121,6 +2124,7 @@ exports[`DataTable should render 1`] = `
}
>
<Button
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[MockFunction]}
Expand All @@ -2137,6 +2141,7 @@ exports[`DataTable should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--primary"
disabled={false}
Expand Down Expand Up @@ -2198,6 +2203,7 @@ exports[`DataTable should render 1`] = `
}
>
<Button
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[MockFunction]}
Expand All @@ -2214,6 +2220,7 @@ exports[`DataTable should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--primary"
disabled={false}
Expand Down Expand Up @@ -2267,6 +2274,7 @@ exports[`DataTable should render 1`] = `
</TableBatchAction>
<Button
className="bx--batch-summary__cancel"
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[Function]}
Expand All @@ -2277,6 +2285,7 @@ exports[`DataTable should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--batch-summary__cancel bx--btn bx--btn--primary"
disabled={false}
Expand Down Expand Up @@ -2521,6 +2530,7 @@ exports[`DataTable should render 1`] = `
</ForwardRef(OverflowMenu)>
</TableToolbarMenu>
<Button
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[MockFunction]}
Expand All @@ -2531,6 +2541,7 @@ exports[`DataTable should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--sm bx--btn--primary"
disabled={false}
Expand Down Expand Up @@ -2909,6 +2920,7 @@ exports[`DataTable sticky header should render 1`] = `
</TableToolbarAction>
</TableToolbarMenu>
<Button
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[MockFunction]}
Expand Down Expand Up @@ -3071,6 +3083,7 @@ exports[`DataTable sticky header should render 1`] = `
}
>
<Button
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[MockFunction]}
Expand All @@ -3087,6 +3100,7 @@ exports[`DataTable sticky header should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--primary"
disabled={false}
Expand Down Expand Up @@ -3148,6 +3162,7 @@ exports[`DataTable sticky header should render 1`] = `
}
>
<Button
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[MockFunction]}
Expand All @@ -3164,6 +3179,7 @@ exports[`DataTable sticky header should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--primary"
disabled={false}
Expand Down Expand Up @@ -3225,6 +3241,7 @@ exports[`DataTable sticky header should render 1`] = `
}
>
<Button
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[MockFunction]}
Expand All @@ -3241,6 +3258,7 @@ exports[`DataTable sticky header should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--primary"
disabled={false}
Expand Down Expand Up @@ -3294,6 +3312,7 @@ exports[`DataTable sticky header should render 1`] = `
</TableBatchAction>
<Button
className="bx--batch-summary__cancel"
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[Function]}
Expand All @@ -3304,6 +3323,7 @@ exports[`DataTable sticky header should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--batch-summary__cancel bx--btn bx--btn--primary"
disabled={false}
Expand Down Expand Up @@ -3548,6 +3568,7 @@ exports[`DataTable sticky header should render 1`] = `
</ForwardRef(OverflowMenu)>
</TableToolbarMenu>
<Button
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[MockFunction]}
Expand All @@ -3558,6 +3579,7 @@ exports[`DataTable sticky header should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--sm bx--btn--primary"
disabled={false}
Expand Down
2 changes: 2 additions & 0 deletions ...ages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `
>
<Button
className="custom-class"
dangerDescription="danger"
disabled={false}
iconDescription="test"
kind="primary"
Expand All @@ -29,6 +30,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="custom-class bx--btn bx--btn--primary"
disabled={false}
Expand Down
4 changes: 4 additions & 0 deletions ...ges/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ exports[`DataTable.TableBatchActions should render 1`] = `
>
<Button
className="bx--batch-summary__cancel"
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[MockFunction]}
Expand All @@ -39,6 +40,7 @@ exports[`DataTable.TableBatchActions should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--batch-summary__cancel bx--btn bx--btn--primary"
disabled={false}
Expand Down Expand Up @@ -88,6 +90,7 @@ exports[`DataTable.TableBatchActions should render 2`] = `
>
<Button
className="bx--batch-summary__cancel"
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[MockFunction]}
Expand All @@ -98,6 +101,7 @@ exports[`DataTable.TableBatchActions should render 2`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--batch-summary__cancel bx--btn bx--btn--primary"
disabled={false}
Expand Down
6 changes: 6 additions & 0 deletions packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ exports[`ModalWrapper should render 1`] = `
>
<Button
className="btn-trigger"
dangerDescription="danger"
disabled={false}
iconDescription="Provide icon description if icon is used"
kind="primary"
Expand All @@ -36,6 +37,7 @@ exports[`ModalWrapper should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="btn-trigger bx--btn bx--btn--primary"
disabled={false}
Expand Down Expand Up @@ -166,6 +168,7 @@ exports[`ModalWrapper should render 1`] = `
>
<SecondaryButtonSet>
<Button
dangerDescription="danger"
disabled={false}
kind="secondary"
onClick={[Function]}
Expand All @@ -176,6 +179,7 @@ exports[`ModalWrapper should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--secondary"
disabled={false}
Expand All @@ -192,6 +196,7 @@ exports[`ModalWrapper should render 1`] = `
</Button>
</SecondaryButtonSet>
<Button
dangerDescription="danger"
disabled={false}
kind="primary"
onClick={[Function]}
Expand All @@ -202,6 +207,7 @@ exports[`ModalWrapper should render 1`] = `
type="button"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--primary"
disabled={false}
Expand Down
Loading