fix(Button): add danger variant assistive text

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',
 };