feat(Alert): add sr variant customization (patternfly#1056)

defaults to current label if undefined
redallen · Dec 19, 2018 · 0b8d241 · 0b8d241
1 parent f38c10a
commit 0b8d241
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Alert/Alert.js b/packages/patternfly-4/react-core/src/components/Alert/Alert.js
@@ -27,31 +27,36 @@ const propTypes = {
   /** additional classes added to the Alert */
   className: PropTypes.string,
   /** Adds accessible text to the Alert */
-  'aria-label': PropTypes.string
+  'aria-label': PropTypes.string,
+  /** Variant label text for screen readers */
+  variantLabel: PropTypes.string
 };
 
 const defaultProps = {
   'aria-label': undefined,
   action: null,
   title: '',
   children: '',
-  className: ''
+  className: '',
+  variantLabel: null
 };
 
 const getDefaultAriaLabel = variant => `${capitalize(AlertVariant[variant])} Notification`;
 
 const Alert = ({
   variant,
+  variantLabel,
   'aria-label': ariaLabel = getDefaultAriaLabel(variant),
   action,
   title,
   children,
   className,
   ...props
 }) => {
+  variantLabel = variantLabel || capitalize(AlertVariant[variant]);
   const readerTitle = (
     <React.Fragment>
-      <span className={css(accessibleStyles.srOnly)}>{capitalize(AlertVariant[variant])}: </span>
+      <span className={css(accessibleStyles.srOnly)}>{variantLabel}: </span>
       {title}
     </React.Fragment>
   );

diff --git a/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.js.snap b/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.js.snap
@@ -43,6 +43,7 @@ exports[`Alert - danger Action 1`] = `
   className=""
   title=""
   variant="danger"
+  variantLabel={null}
 >
   <div
     aria-label="Danger Notification"
@@ -168,6 +169,7 @@ exports[`Alert - danger Action and Title 1`] = `
   className=""
   title="Some title"
   variant="danger"
+  variantLabel={null}
 >
   <div
     aria-label="Danger Notification"
@@ -289,6 +291,7 @@ exports[`Alert - danger Body 1`] = `
   className=""
   title=""
   variant="danger"
+  variantLabel={null}
 >
   <div
     aria-label="Danger Notification"
@@ -406,6 +409,7 @@ exports[`Alert - danger Custom aria label 1`] = `
   className=""
   title="Some title"
   variant="danger"
+  variantLabel={null}
 >
   <div
     aria-label="Custom aria label for danger"
@@ -527,6 +531,7 @@ exports[`Alert - danger Title 1`] = `
   className=""
   title="Some title"
   variant="danger"
+  variantLabel={null}
 >
   <div
     aria-label="Danger Notification"
@@ -644,6 +649,7 @@ exports[`Alert - info Action 1`] = `
   className=""
   title=""
   variant="info"
+  variantLabel={null}
 >
   <div
     aria-label="Info Notification"
@@ -769,6 +775,7 @@ exports[`Alert - info Action and Title 1`] = `
   className=""
   title="Some title"
   variant="info"
+  variantLabel={null}
 >
   <div
     aria-label="Info Notification"
@@ -890,6 +897,7 @@ exports[`Alert - info Body 1`] = `
   className=""
   title=""
   variant="info"
+  variantLabel={null}
 >
   <div
     aria-label="Info Notification"
@@ -1007,6 +1015,7 @@ exports[`Alert - info Custom aria label 1`] = `
   className=""
   title="Some title"
   variant="info"
+  variantLabel={null}
 >
   <div
     aria-label="Custom aria label for info"
@@ -1128,6 +1137,7 @@ exports[`Alert - info Title 1`] = `
   className=""
   title="Some title"
   variant="info"
+  variantLabel={null}
 >
   <div
     aria-label="Info Notification"
@@ -1245,6 +1255,7 @@ exports[`Alert - success Action 1`] = `
   className=""
   title=""
   variant="success"
+  variantLabel={null}
 >
   <div
     aria-label="Success Notification"
@@ -1370,6 +1381,7 @@ exports[`Alert - success Action and Title 1`] = `
   className=""
   title="Some title"
   variant="success"
+  variantLabel={null}
 >
   <div
     aria-label="Success Notification"
@@ -1491,6 +1503,7 @@ exports[`Alert - success Body 1`] = `
   className=""
   title=""
   variant="success"
+  variantLabel={null}
 >
   <div
     aria-label="Success Notification"
@@ -1608,6 +1621,7 @@ exports[`Alert - success Custom aria label 1`] = `
   className=""
   title="Some title"
   variant="success"
+  variantLabel={null}
 >
   <div
     aria-label="Custom aria label for success"
@@ -1729,6 +1743,7 @@ exports[`Alert - success Title 1`] = `
   className=""
   title="Some title"
   variant="success"
+  variantLabel={null}
 >
   <div
     aria-label="Success Notification"
@@ -1846,6 +1861,7 @@ exports[`Alert - warning Action 1`] = `
   className=""
   title=""
   variant="warning"
+  variantLabel={null}
 >
   <div
     aria-label="Warning Notification"
@@ -1971,6 +1987,7 @@ exports[`Alert - warning Action and Title 1`] = `
   className=""
   title="Some title"
   variant="warning"
+  variantLabel={null}
 >
   <div
     aria-label="Warning Notification"
@@ -2092,6 +2109,7 @@ exports[`Alert - warning Body 1`] = `
   className=""
   title=""
   variant="warning"
+  variantLabel={null}
 >
   <div
     aria-label="Warning Notification"
@@ -2209,6 +2227,7 @@ exports[`Alert - warning Custom aria label 1`] = `
   className=""
   title="Some title"
   variant="warning"
+  variantLabel={null}
 >
   <div
     aria-label="Custom aria label for warning"
@@ -2330,6 +2349,7 @@ exports[`Alert - warning Title 1`] = `
   className=""
   title="Some title"
   variant="warning"
+  variantLabel={null}
 >
   <div
     aria-label="Warning Notification"