[issue-2847] use context instead of function to set aria text

seanforyou23 · seanforyou23 · commit 902ccad1fda8 · 2020-02-24T14:59:46.000-05:00
diff --git a/packages/patternfly-4/react-core/src/components/Alert/Alert.tsx b/packages/patternfly-4/react-core/src/components/Alert/Alert.tsx
@@ -15,17 +15,15 @@ export enum AlertVariant {
   default = 'default'
 }
 
-export type CloseAlertAriaFormatter = (title: React.ReactNode, variantLabel: string) => React.ReactNode;
-
 export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'action' | 'title'> {
   /** Adds Alert variant styles  */
   variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
   /** Flag to indicate if the Alert is inline */
   isInline?: boolean;
   /** Title of the Alert  */
   title: React.ReactNode;
-  /** Action button to put in the Alert. Often <AlertActionLink> or <AlertActionCloseButton> */
-  action?: CloseAlertAriaFormatter | React.ReactNode;
+  /** Action button to put in the Alert. Should be <AlertActionLink> or <AlertActionCloseButton> */
+  action?: React.ReactNode;
   /** Content rendered inside the Alert */
   children?: React.ReactNode;
   /** Additional classes added to the Alert  */
@@ -38,22 +36,13 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   isLiveRegion?: boolean;
 }
 
-export const closeBtnAriaTxt = (ariaLabel: string, variantLabel?: string, title?: string) => {
-  if (ariaLabel) {
-    return ariaLabel;
-  } else if (variantLabel && title) {
-    return `Close ${variantLabel}: ${title}`;
-  } else if (title) {
-    return `Close ${title}`;
-  } else if (title === '' || !title) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'Missing title prop: Please add a title prop that associates this close button to the Alert it closes.'
-    );
-    return `Close alert`;
-  }
-  return 'Close';
-};
+// eslint-disable-next-line @typescript-eslint/interface-name-prefix
+export interface IAlertContext {
+  title: React.ReactNode;
+  variantLabel?: string;
+}
+
+export const AlertContext = React.createContext<IAlertContext>(null);
 
 const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
   variant = AlertVariant.info,
@@ -100,10 +89,9 @@ const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
       <AlertIcon variant={variant} />
       <h4 className={css(styles.alertTitle)}>{getHeadingContent}</h4>
       {children && <div className={css(styles.alertDescription)}>{children}</div>}
-      {action && typeof action === 'object' && <div className={css(styles.alertAction)}>{action}</div>}
-      {action && typeof action === 'function' && (
-        <div className={css(styles.alertAction)}>{action(title, variantLabel)}</div>
-      )}
+      <AlertContext.Provider value={{ title, variantLabel }}>
+        {action && typeof action === 'object' && <div className={css(styles.alertAction)}>{action}</div>}
+      </AlertContext.Provider>
     </div>
   );
 };
diff --git a/packages/patternfly-4/react-core/src/components/Alert/AlertActionCloseButton.tsx b/packages/patternfly-4/react-core/src/components/Alert/AlertActionCloseButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button, ButtonVariant, ButtonProps } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
-import { closeBtnAriaTxt } from '..';
+import { AlertContext } from '..';
 
 interface AlertActionCloseButtonProps extends ButtonProps {
   /** Additional classes added to the AlertActionCloseButton */
@@ -10,29 +10,25 @@ interface AlertActionCloseButtonProps extends ButtonProps {
   onClose?: () => void;
   /** Aria Label for the Close button */
   'aria-label'?: string;
-  /** Variant Label for the Close button */
-  variantLabel?: string;
-  /** Accessible name of the Alert this close btn belongs to. It helps to use the title prop value of the
-   * Alert as part of this title prop's text. This helps screen reader users associate the two when multiple
-   * alerts are present at the same time. */
-  title?: string;
 }
 
 export const AlertActionCloseButton = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   onClose = () => undefined as any,
   'aria-label': ariaLabel = '',
-  title,
-  variantLabel = '',
   ...props
 }: AlertActionCloseButtonProps) => (
-  <Button
-    variant={ButtonVariant.plain}
-    onClick={onClose}
-    aria-label={closeBtnAriaTxt(ariaLabel, variantLabel, title)}
-    {...props}
-  >
-    <TimesIcon />
-  </Button>
+  <AlertContext.Consumer>
+    {({ title, variantLabel }) => (
+      <Button
+        variant={ButtonVariant.plain}
+        onClick={onClose}
+        aria-label={ariaLabel === '' ? `Close ${variantLabel} alert: ${title}` : ariaLabel}
+        {...props}
+      >
+        <TimesIcon />
+      </Button>
+    )}
+  </AlertContext.Consumer>
 );
diff --git a/packages/patternfly-4/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap
@@ -1,16 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AlertActionCloseButton should match snapshot (auto-generated) 1`] = `
-<Component
-  aria-label="''"
-  onClick={[Function]}
-  variant="plain"
->
-  <TimesIcon
-    color="currentColor"
-    noVerticalAlign={false}
-    size="sm"
-    title={null}
-  />
-</Component>
+<ContextConsumer>
+  <Component />
+</ContextConsumer>
 `;
diff --git a/packages/patternfly-4/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap
@@ -114,6 +114,7 @@ exports[`Alert - danger Action Close Button 1`] = `
             <Component
               aria-label="Close"
               onClick={[MockFunction]}
+              title="Sample danger alert"
               variant="plain"
             >
               <ComponentWithOuia
@@ -128,6 +129,7 @@ exports[`Alert - danger Action Close Button 1`] = `
                       title={null}
                     />,
                     "onClick": [MockFunction],
+                    "title": "Sample danger alert",
                     "variant": "plain",
                   }
                 }
@@ -147,6 +149,7 @@ exports[`Alert - danger Action Close Button 1`] = `
                       "ouiaId": null,
                     }
                   }
+                  title="Sample danger alert"
                   variant="plain"
                 >
                   <button
@@ -156,6 +159,7 @@ exports[`Alert - danger Action Close Button 1`] = `
                     disabled={false}
                     onClick={[MockFunction]}
                     tabIndex={null}
+                    title="Sample danger alert"
                     type="button"
                   >
                     <TimesIcon
@@ -1110,6 +1114,7 @@ exports[`Alert - default Action Close Button 1`] = `
             <Component
               aria-label="Close"
               onClick={[MockFunction]}
+              title="Sample default alert"
               variant="plain"
             >
               <ComponentWithOuia
@@ -1124,6 +1129,7 @@ exports[`Alert - default Action Close Button 1`] = `
                       title={null}
                     />,
                     "onClick": [MockFunction],
+                    "title": "Sample default alert",
                     "variant": "plain",
                   }
                 }
@@ -1143,6 +1149,7 @@ exports[`Alert - default Action Close Button 1`] = `
                       "ouiaId": null,
                     }
                   }
+                  title="Sample default alert"
                   variant="plain"
                 >
                   <button
@@ -1152,6 +1159,7 @@ exports[`Alert - default Action Close Button 1`] = `
                     disabled={false}
                     onClick={[MockFunction]}
                     tabIndex={null}
+                    title="Sample default alert"
                     type="button"
                   >
                     <TimesIcon
@@ -2106,6 +2114,7 @@ exports[`Alert - info Action Close Button 1`] = `
             <Component
               aria-label="Close"
               onClick={[MockFunction]}
+              title="Sample info alert"
               variant="plain"
             >
               <ComponentWithOuia
@@ -2120,6 +2129,7 @@ exports[`Alert - info Action Close Button 1`] = `
                       title={null}
                     />,
                     "onClick": [MockFunction],
+                    "title": "Sample info alert",
                     "variant": "plain",
                   }
                 }
@@ -2139,6 +2149,7 @@ exports[`Alert - info Action Close Button 1`] = `
                       "ouiaId": null,
                     }
                   }
+                  title="Sample info alert"
                   variant="plain"
                 >
                   <button
@@ -2148,6 +2159,7 @@ exports[`Alert - info Action Close Button 1`] = `
                     disabled={false}
                     onClick={[MockFunction]}
                     tabIndex={null}
+                    title="Sample info alert"
                     type="button"
                   >
                     <TimesIcon
@@ -3102,6 +3114,7 @@ exports[`Alert - success Action Close Button 1`] = `
             <Component
               aria-label="Close"
               onClick={[MockFunction]}
+              title="Sample success alert"
               variant="plain"
             >
               <ComponentWithOuia
@@ -3116,6 +3129,7 @@ exports[`Alert - success Action Close Button 1`] = `
                       title={null}
                     />,
                     "onClick": [MockFunction],
+                    "title": "Sample success alert",
                     "variant": "plain",
                   }
                 }
@@ -3135,6 +3149,7 @@ exports[`Alert - success Action Close Button 1`] = `
                       "ouiaId": null,
                     }
                   }
+                  title="Sample success alert"
                   variant="plain"
                 >
                   <button
@@ -3144,6 +3159,7 @@ exports[`Alert - success Action Close Button 1`] = `
                     disabled={false}
                     onClick={[MockFunction]}
                     tabIndex={null}
+                    title="Sample success alert"
                     type="button"
                   >
                     <TimesIcon
@@ -4098,6 +4114,7 @@ exports[`Alert - warning Action Close Button 1`] = `
             <Component
               aria-label="Close"
               onClick={[MockFunction]}
+              title="Sample warning alert"
               variant="plain"
             >
               <ComponentWithOuia
@@ -4112,6 +4129,7 @@ exports[`Alert - warning Action Close Button 1`] = `
                       title={null}
                     />,
                     "onClick": [MockFunction],
+                    "title": "Sample warning alert",
                     "variant": "plain",
                   }
                 }
@@ -4131,6 +4149,7 @@ exports[`Alert - warning Action Close Button 1`] = `
                       "ouiaId": null,
                     }
                   }
+                  title="Sample warning alert"
                   variant="plain"
                 >
                   <button
@@ -4140,6 +4159,7 @@ exports[`Alert - warning Action Close Button 1`] = `
                     disabled={false}
                     onClick={[MockFunction]}
                     tabIndex={null}
+                    title="Sample warning alert"
                     type="button"
                   >
                     <TimesIcon
diff --git a/packages/patternfly-4/react-core/src/components/Alert/examples/Alert.md b/packages/patternfly-4/react-core/src/components/Alert/examples/Alert.md

Original file line number	Diff line number	Diff line change
@@ -114,6 +114,7 @@ exports[`Alert - danger Action Close Button 1`] = `
`114`	`114`	`<Component`
`115`	`115`	`aria-label="Close"`
`116`	`116`	`onClick={[MockFunction]}`
	`117`	`+ title="Sample danger alert"`
`117`	`118`	`variant="plain"`
`118`	`119`	`>`
`119`	`120`	`<ComponentWithOuia`
@@ -128,6 +129,7 @@ exports[`Alert - danger Action Close Button 1`] = `
`128`	`129`	`title={null}`
`129`	`130`	`/>,`
`130`	`131`	`"onClick": [MockFunction],`
	`132`	`+ "title": "Sample danger alert",`
`131`	`133`	`"variant": "plain",`
`132`	`134`	`}`
`133`	`135`	`}`
@@ -147,6 +149,7 @@ exports[`Alert - danger Action Close Button 1`] = `
`147`	`149`	`"ouiaId": null,`
`148`	`150`	`}`
`149`	`151`	`}`
	`152`	`+ title="Sample danger alert"`
`150`	`153`	`variant="plain"`
`151`	`154`	`>`
`152`	`155`	`<button`
@@ -156,6 +159,7 @@ exports[`Alert - danger Action Close Button 1`] = `
`156`	`159`	`disabled={false}`
`157`	`160`	`onClick={[MockFunction]}`
`158`	`161`	`tabIndex={null}`
	`162`	`+ title="Sample danger alert"`
`159`	`163`	`type="button"`
`160`	`164`	`>`
`161`	`165`	`<TimesIcon`
@@ -1110,6 +1114,7 @@ exports[`Alert - default Action Close Button 1`] = `
`1110`	`1114`	`<Component`
`1111`	`1115`	`aria-label="Close"`
`1112`	`1116`	`onClick={[MockFunction]}`
	`1117`	`+ title="Sample default alert"`
`1113`	`1118`	`variant="plain"`
`1114`	`1119`	`>`
`1115`	`1120`	`<ComponentWithOuia`
@@ -1124,6 +1129,7 @@ exports[`Alert - default Action Close Button 1`] = `
`1124`	`1129`	`title={null}`
`1125`	`1130`	`/>,`
`1126`	`1131`	`"onClick": [MockFunction],`
	`1132`	`+ "title": "Sample default alert",`
`1127`	`1133`	`"variant": "plain",`
`1128`	`1134`	`}`
`1129`	`1135`	`}`
@@ -1143,6 +1149,7 @@ exports[`Alert - default Action Close Button 1`] = `
`1143`	`1149`	`"ouiaId": null,`
`1144`	`1150`	`}`
`1145`	`1151`	`}`
	`1152`	`+ title="Sample default alert"`
`1146`	`1153`	`variant="plain"`
`1147`	`1154`	`>`
`1148`	`1155`	`<button`
@@ -1152,6 +1159,7 @@ exports[`Alert - default Action Close Button 1`] = `
`1152`	`1159`	`disabled={false}`
`1153`	`1160`	`onClick={[MockFunction]}`
`1154`	`1161`	`tabIndex={null}`
	`1162`	`+ title="Sample default alert"`
`1155`	`1163`	`type="button"`
`1156`	`1164`	`>`
`1157`	`1165`	`<TimesIcon`
@@ -2106,6 +2114,7 @@ exports[`Alert - info Action Close Button 1`] = `
`2106`	`2114`	`<Component`
`2107`	`2115`	`aria-label="Close"`
`2108`	`2116`	`onClick={[MockFunction]}`
	`2117`	`+ title="Sample info alert"`
`2109`	`2118`	`variant="plain"`
`2110`	`2119`	`>`
`2111`	`2120`	`<ComponentWithOuia`
@@ -2120,6 +2129,7 @@ exports[`Alert - info Action Close Button 1`] = `
`2120`	`2129`	`title={null}`
`2121`	`2130`	`/>,`
`2122`	`2131`	`"onClick": [MockFunction],`
	`2132`	`+ "title": "Sample info alert",`
`2123`	`2133`	`"variant": "plain",`
`2124`	`2134`	`}`
`2125`	`2135`	`}`
@@ -2139,6 +2149,7 @@ exports[`Alert - info Action Close Button 1`] = `
`2139`	`2149`	`"ouiaId": null,`
`2140`	`2150`	`}`
`2141`	`2151`	`}`
	`2152`	`+ title="Sample info alert"`
`2142`	`2153`	`variant="plain"`
`2143`	`2154`	`>`
`2144`	`2155`	`<button`
@@ -2148,6 +2159,7 @@ exports[`Alert - info Action Close Button 1`] = `
`2148`	`2159`	`disabled={false}`
`2149`	`2160`	`onClick={[MockFunction]}`
`2150`	`2161`	`tabIndex={null}`
	`2162`	`+ title="Sample info alert"`
`2151`	`2163`	`type="button"`
`2152`	`2164`	`>`
`2153`	`2165`	`<TimesIcon`
@@ -3102,6 +3114,7 @@ exports[`Alert - success Action Close Button 1`] = `
`3102`	`3114`	`<Component`
`3103`	`3115`	`aria-label="Close"`
`3104`	`3116`	`onClick={[MockFunction]}`
	`3117`	`+ title="Sample success alert"`
`3105`	`3118`	`variant="plain"`
`3106`	`3119`	`>`
`3107`	`3120`	`<ComponentWithOuia`
@@ -3116,6 +3129,7 @@ exports[`Alert - success Action Close Button 1`] = `
`3116`	`3129`	`title={null}`
`3117`	`3130`	`/>,`
`3118`	`3131`	`"onClick": [MockFunction],`
	`3132`	`+ "title": "Sample success alert",`
`3119`	`3133`	`"variant": "plain",`
`3120`	`3134`	`}`
`3121`	`3135`	`}`
@@ -3135,6 +3149,7 @@ exports[`Alert - success Action Close Button 1`] = `
`3135`	`3149`	`"ouiaId": null,`
`3136`	`3150`	`}`
`3137`	`3151`	`}`
	`3152`	`+ title="Sample success alert"`
`3138`	`3153`	`variant="plain"`
`3139`	`3154`	`>`
`3140`	`3155`	`<button`
@@ -3144,6 +3159,7 @@ exports[`Alert - success Action Close Button 1`] = `
`3144`	`3159`	`disabled={false}`
`3145`	`3160`	`onClick={[MockFunction]}`
`3146`	`3161`	`tabIndex={null}`
	`3162`	`+ title="Sample success alert"`
`3147`	`3163`	`type="button"`
`3148`	`3164`	`>`
`3149`	`3165`	`<TimesIcon`
@@ -4098,6 +4114,7 @@ exports[`Alert - warning Action Close Button 1`] = `
`4098`	`4114`	`<Component`
`4099`	`4115`	`aria-label="Close"`
`4100`	`4116`	`onClick={[MockFunction]}`
	`4117`	`+ title="Sample warning alert"`
`4101`	`4118`	`variant="plain"`
`4102`	`4119`	`>`
`4103`	`4120`	`<ComponentWithOuia`
@@ -4112,6 +4129,7 @@ exports[`Alert - warning Action Close Button 1`] = `
`4112`	`4129`	`title={null}`
`4113`	`4130`	`/>,`
`4114`	`4131`	`"onClick": [MockFunction],`
	`4132`	`+ "title": "Sample warning alert",`
`4115`	`4133`	`"variant": "plain",`
`4116`	`4134`	`}`
`4117`	`4135`	`}`
@@ -4131,6 +4149,7 @@ exports[`Alert - warning Action Close Button 1`] = `
`4131`	`4149`	`"ouiaId": null,`
`4132`	`4150`	`}`
`4133`	`4151`	`}`
	`4152`	`+ title="Sample warning alert"`
`4134`	`4153`	`variant="plain"`
`4135`	`4154`	`>`
`4136`	`4155`	`<button`
@@ -4140,6 +4159,7 @@ exports[`Alert - warning Action Close Button 1`] = `
`4140`	`4159`	`disabled={false}`
`4141`	`4160`	`onClick={[MockFunction]}`
`4142`	`4161`	`tabIndex={null}`
	`4162`	`+ title="Sample warning alert"`
`4143`	`4163`	`type="button"`
`4144`	`4164`	`>`
`4145`	`4165`	`<TimesIcon`