fix(Button): add danger variant assistive text

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",
       },

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 ? (
-    <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 = {
@@ -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',
 };

packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -1885,6 +1885,7 @@ exports[`DataTable should render 1`] = `
                   </TableToolbarAction>
                 </TableToolbarMenu>
                 <Button
+                  dangerDescription="danger"
                   disabled={false}
                   kind="primary"
                   onClick={[MockFunction]}
@@ -2044,6 +2045,7 @@ exports[`DataTable should render 1`] = `
                     }
                   >
                     <Button
+                      dangerDescription="danger"
                       disabled={false}
                       kind="primary"
                       onClick={[MockFunction]}
@@ -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}
@@ -2121,6 +2124,7 @@ exports[`DataTable should render 1`] = `
                     }
                   >
                     <Button
+                      dangerDescription="danger"
                       disabled={false}
                       kind="primary"
                       onClick={[MockFunction]}
@@ -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}
@@ -2198,6 +2203,7 @@ exports[`DataTable should render 1`] = `
                     }
                   >
                     <Button
+                      dangerDescription="danger"
                       disabled={false}
                       kind="primary"
                       onClick={[MockFunction]}
@@ -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}
@@ -2267,6 +2274,7 @@ exports[`DataTable should render 1`] = `
                   </TableBatchAction>
                   <Button
                     className="bx--batch-summary__cancel"
+                    dangerDescription="danger"
                     disabled={false}
                     kind="primary"
                     onClick={[Function]}
@@ -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}
@@ -2521,6 +2530,7 @@ exports[`DataTable should render 1`] = `
                 </ForwardRef(OverflowMenu)>
               </TableToolbarMenu>
               <Button
+                dangerDescription="danger"
                 disabled={false}
                 kind="primary"
                 onClick={[MockFunction]}
@@ -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}
@@ -2909,6 +2920,7 @@ exports[`DataTable sticky header should render 1`] = `
                   </TableToolbarAction>
                 </TableToolbarMenu>
                 <Button
+                  dangerDescription="danger"
                   disabled={false}
                   kind="primary"
                   onClick={[MockFunction]}
@@ -3071,6 +3083,7 @@ exports[`DataTable sticky header should render 1`] = `
                     }
                   >
                     <Button
+                      dangerDescription="danger"
                       disabled={false}
                       kind="primary"
                       onClick={[MockFunction]}
@@ -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}
@@ -3148,6 +3162,7 @@ exports[`DataTable sticky header should render 1`] = `
                     }
                   >
                     <Button
+                      dangerDescription="danger"
                       disabled={false}
                       kind="primary"
                       onClick={[MockFunction]}
@@ -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}
@@ -3225,6 +3241,7 @@ exports[`DataTable sticky header should render 1`] = `
                     }
                   >
                     <Button
+                      dangerDescription="danger"
                       disabled={false}
                       kind="primary"
                       onClick={[MockFunction]}
@@ -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}
@@ -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]}
@@ -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}
@@ -3548,6 +3568,7 @@ exports[`DataTable sticky header should render 1`] = `
                 </ForwardRef(OverflowMenu)>
               </TableToolbarMenu>
               <Button
+                dangerDescription="danger"
                 disabled={false}
                 kind="primary"
                 onClick={[MockFunction]}
@@ -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}

packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap

@@ -13,6 +13,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `
 >
   <Button
     className="custom-class"
+    dangerDescription="danger"
     disabled={false}
     iconDescription="test"
     kind="primary"
@@ -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}

packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap

@@ -29,6 +29,7 @@ exports[`DataTable.TableBatchActions should render 1`] = `
       >
         <Button
           className="bx--batch-summary__cancel"
+          dangerDescription="danger"
           disabled={false}
           kind="primary"
           onClick={[MockFunction]}
@@ -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}
@@ -88,6 +90,7 @@ exports[`DataTable.TableBatchActions should render 2`] = `
       >
         <Button
           className="bx--batch-summary__cancel"
+          dangerDescription="danger"
           disabled={false}
           kind="primary"
           onClick={[MockFunction]}
@@ -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}

packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap

@@ -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"
@@ -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}
@@ -166,6 +168,7 @@ exports[`ModalWrapper should render 1`] = `
             >
               <SecondaryButtonSet>
                 <Button
+                  dangerDescription="danger"
                   disabled={false}
                   kind="secondary"
                   onClick={[Function]}
@@ -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}
@@ -192,6 +196,7 @@ exports[`ModalWrapper should render 1`] = `
                 </Button>
               </SecondaryButtonSet>
               <Button
+                dangerDescription="danger"
                 disabled={false}
                 kind="primary"
                 onClick={[Function]}
@@ -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}

packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap

@@ -10,6 +10,7 @@ exports[`HeaderGlobalAction should render 1`] = `
   <Button
     aria-label="Accessibility label"
     className="custom-class bx--header__action"
+    dangerDescription="danger"
     disabled={false}
     hasIconOnly={true}
     iconDescription="Accessibility label"
@@ -22,6 +23,7 @@ exports[`HeaderGlobalAction should render 1`] = `
     type="button"
   >
     <button
+      aria-describedby={null}
       aria-label="Accessibility label"
       aria-pressed={null}
       className="custom-class bx--header__action bx--btn bx--btn--primary bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center"