fix(ui-alerts): add variantScreenReaderLabel prop to Alert to improve screenreader usability

Author: balzss

packages/ui-alerts/src/Alert/README.md

@@ -20,20 +20,23 @@ type: example
     renderCloseButtonLabel="Close"
     margin="small"
     transition="none"
+    variantScreenReaderLabel="Success: "
   >
     Sample success alert text. I will close w/o a transition out if you close me
   </Alert>
   <Alert
     variant="info"
     renderCloseButtonLabel="Close"
     margin="small"
+    variantScreenReaderLabel="Information: "
   >
     Sample info text. I will fade out if you close me.
   </Alert>
   <Alert
     variant="error"
     renderCloseButtonLabel="Close"
     margin="small"
+    variantScreenReaderLabel="Error: "
   >
     Sample error text that continues for a while
     to demonstrate what happens when the content stretches over
@@ -43,6 +46,7 @@ type: example
   <Alert
     variant="warning"
     margin="small"
+    variantScreenReaderLabel="Warning: "
   >
     Sample warning text. This alert is not dismissible and cannot be closed.
   </Alert>

packages/ui-alerts/src/Alert/index.tsx

@@ -258,7 +258,8 @@ class Alert extends Component<AlertProps, AlertState> {
   }
 
   renderAlert() {
-    const { margin, styles, children, ...props } = this.props
+    const { margin, styles, children, variantScreenReaderLabel, ...props } =
+      this.props
     return (
       <View
         {...passthroughProps({ ...props })}
@@ -269,7 +270,14 @@ class Alert extends Component<AlertProps, AlertState> {
         elementRef={this.handleRef}
       >
         {this.renderIcon()}
-        <div css={styles?.content}>{children}</div>
+        <div css={styles?.content}>
+          {variantScreenReaderLabel && (
+            <span css={styles?.variantScreenReaderLabel}>
+              {variantScreenReaderLabel}
+            </span>
+          )}
+          {children}
+        </div>
         {this.renderCloseButton()}
       </View>
     )

packages/ui-alerts/src/Alert/props.ts

@@ -46,6 +46,10 @@ type AlertOwnProps = {
    * Determines color and icon
    */
   variant?: 'info' | 'success' | 'warning' | 'error'
+  /**
+   * How the screen reader should announce the alert variant. While the `variant` prop sets the color and icon for the alert component, this label should be a textual representation of that information. So e.g. if the variant is `info`, this label could be "Information:" or "Information alert:". Note the `:` at the end of the label which helps the screenreader to be more natural sounding.
+   */
+  variantScreenReaderLabel?: string
   /**
    * Function that returns the DIV where screenreader alerts will be placed.
    */
@@ -115,7 +119,9 @@ type AlertProps = AlertOwnProps &
   WithStyleProps<AlertTheme, AlertStyle> &
   WithDeterministicIdProps
 
-type AlertStyle = ComponentStyle<'alert' | 'icon' | 'closeButton' | 'content'>
+type AlertStyle = ComponentStyle<
+  'alert' | 'icon' | 'closeButton' | 'content' | 'variantScreenReaderLabel'
+>
 
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node,
@@ -130,7 +136,8 @@ const propTypes: PropValidators<PropKeys> = {
   onDismiss: PropTypes.func,
   transition: PropTypes.oneOf(['none', 'fade']),
   open: PropTypes.bool,
-  hasShadow: PropTypes.bool
+  hasShadow: PropTypes.bool,
+  variantScreenReaderLabel: PropTypes.string
 }
 
 const allowedProps: AllowedPropKeys = [

packages/ui-alerts/src/Alert/styles.ts

@@ -114,6 +114,13 @@ const generateStyle = (
       fontWeight: componentTheme.contentFontWeight,
       lineHeight: componentTheme.contentLineHeight,
       padding: componentTheme.contentPadding
+    },
+    variantScreenReaderLabel: {
+      position: 'absolute',
+      height: '1px',
+      width: '1px',
+      overflow: 'hidden',
+      margin: '-1px'
     }
   }
 }