Update dismiss button aria description to include title

cerner · Sep 15, 2023 · e0f2705 · e0f2705
1 parent affd6b7
commit e0f2705
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 60 deletions.
diff --git a/packages/terra-alert/src/Alert.jsx b/packages/terra-alert/src/Alert.jsx
@@ -170,11 +170,21 @@ const Alert = ({
 
   const dismissButtonAriaDescribedBy = (title || defaultTitle) ? alertTitleId : alertMessageId;
 
+  const dismissButtonAriaDescription = () => {
+    if (title && defaultTitle) {
+      return `${defaultTitle} ${title}`;
+    }
+
+    return undefined;
+  };
+
   let dismissButton;
   if (onDismiss) {
+    const ariaDescription = dismissButtonAriaDescription();
     dismissButton = (
       <Button
-        aria-describedby={dismissButtonAriaDescribedBy}
+        aria-describedby={ariaDescription ? undefined : dismissButtonAriaDescribedBy}
+        aria-description={ariaDescription}
         text={intl.formatMessage({ id: 'Terra.alert.dismiss' })}
         onClick={onDismiss}
       />
@@ -188,10 +198,10 @@ const Alert = ({
     });
     actionsSection = (
       <>
-        <VisuallyHiddenText text="," />
+        {/* <VisuallyHiddenText text="," /> */}
         <div className={actionsClassName}>
           {action}
-          {action && dismissButton && <VisuallyHiddenText text="," />}
+          {/* {action && dismissButton && <VisuallyHiddenText text="," />} */}
           {dismissButton}
         </div>
       </>
@@ -208,7 +218,7 @@ const Alert = ({
           {title || defaultTitle}
         </strong>
       )}
-      {children && <VisuallyHiddenText text="," />}
+      {/* {children && <VisuallyHiddenText text="," />} */}
       {children}
     </div>
   );

diff --git a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
@@ -29,9 +29,6 @@ exports[`Alert of type advisory with text content should render an Alert compone
           >
             Terra.alert.advisory
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is an advisory alert.
         </div>
       </div>
@@ -77,9 +74,6 @@ exports[`Alert of type alert with text content should render an Alert component
           >
             Terra.alert.alert
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is a test
         </div>
       </div>
@@ -125,9 +119,6 @@ exports[`Alert of type custom with custom title and text content should render a
           >
             Help!
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is a custom alert.
         </div>
       </div>
@@ -173,9 +164,6 @@ exports[`Alert of type error with text content should render an Alert component
           >
             Terra.alert.error
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is an error.
         </div>
       </div>
@@ -261,9 +249,6 @@ exports[`Alert of type info with text content should render an Alert component o
           >
             Terra.alert.info
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is an information alert.
         </div>
       </div>
@@ -309,16 +294,10 @@ exports[`Alert of type success with an action button text content should render
           >
             Terra.alert.success
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is a success alert.
         </div>
       </div>
     </div>
-    <VisuallyHiddenText
-      text=","
-    />
     <div
       className="actions"
     >
@@ -375,9 +354,6 @@ exports[`Alert of type success with text content should render an Alert componen
           >
             Terra.alert.success
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is a success alert.
         </div>
       </div>
@@ -423,9 +399,6 @@ exports[`Alert of type unsatisfied should render an unsatisfied Alert 1`] = `
           >
             Terra.alert.unsatisfied
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is an unsatisfied alert.
         </div>
       </div>
@@ -471,9 +444,6 @@ exports[`Alert of type unverified should render an unverified Alert 1`] = `
           >
             Terra.alert.unverified
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is an unverified alert.
         </div>
       </div>
@@ -519,9 +489,6 @@ exports[`Alert of type warning with text content should render an Alert componen
           >
             Terra.alert.warning
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is an warning.
         </div>
       </div>
@@ -930,16 +897,10 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
           >
             Help!
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is a custom alert.
         </div>
       </div>
     </div>
-    <VisuallyHiddenText
-      text=","
-    />
     <div
       className="actions actions-custom"
     >
@@ -954,9 +915,6 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
         type="button"
         variant="emphasis"
       />
-      <VisuallyHiddenText
-        text=","
-      />
       <Button
         aria-describedby="alert-title-00000000-0000-0000-0000-000000000000"
         isBlock={false}
@@ -1011,16 +969,10 @@ exports[`Dismissible Alert that includes actions section should render an alert
           >
             Terra.alert.alert
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is a test
         </div>
       </div>
     </div>
-    <VisuallyHiddenText
-      text=","
-    />
     <div
       className="actions"
     >

diff --git a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap
@@ -47,7 +47,7 @@ exports[`correctly applies the theme context className 1`] = `
           <button
             aria-disabled={false}
             aria-pressed={false}
-            className="button neutral orion-fusion-theme button-group-button orion-fusion-theme"
+            className="button neutral button-group-button orion-fusion-theme"
             data-terra-button-group-button={true}
             disabled={false}
             onBlur={[Function]}
@@ -100,7 +100,7 @@ exports[`correctly applies the theme context className 1`] = `
           <button
             aria-disabled={false}
             aria-pressed={false}
-            className="button neutral orion-fusion-theme button-group-button orion-fusion-theme"
+            className="button neutral button-group-button orion-fusion-theme"
             data-terra-button-group-button={true}
             disabled={false}
             onBlur={[Function]}

diff --git a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap
@@ -30,7 +30,7 @@ exports[`correctly applies the theme context className 1`] = `
     >
       <button
         aria-disabled={false}
-        className="button neutral orion-fusion-theme button-group-button orion-fusion-theme"
+        className="button neutral button-group-button orion-fusion-theme"
         data-terra-button-group-button={true}
         disabled={false}
         onBlur={[Function]}

diff --git a/packages/terra-form-field/tests/jest/__snapshots__/Field.test.jsx.snap b/packages/terra-form-field/tests/jest/__snapshots__/Field.test.jsx.snap
@@ -74,7 +74,7 @@ exports[`correctly applies the theme context className 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <IconBase
-              className="IconError orion-fusion-theme"
+              className="IconError"
               focusable="false"
               height="1em"
               isBidi={false}
@@ -84,7 +84,7 @@ exports[`correctly applies the theme context className 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <svg
-                className="tui-Icon icon IconError orion-fusion-theme"
+                className="tui-Icon icon IconError"
                 focusable="false"
                 height="1em"
                 role="presentation"

diff --git a/packages/terra-form-textarea/tests/jest/__snapshots__/TextareaField.test.jsx.snap b/packages/terra-form-textarea/tests/jest/__snapshots__/TextareaField.test.jsx.snap
@@ -72,7 +72,7 @@ exports[`correctly applies the theme context className 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <IconBase
-                className="IconError orion-fusion-theme"
+                className="IconError"
                 focusable="false"
                 height="1em"
                 isBidi={false}
@@ -82,7 +82,7 @@ exports[`correctly applies the theme context className 1`] = `
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <svg
-                  className="tui-Icon icon IconError orion-fusion-theme"
+                  className="tui-Icon icon IconError"
                   focusable="false"
                   height="1em"
                   role="presentation"

diff --git a/packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap b/packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap
@@ -125,7 +125,7 @@ exports[`Snapshots correctly applies the theme context className 1`] = `
               <button
                 aria-disabled={false}
                 aria-label="Terra.searchField.submit-search"
-                className="button neutral compact orion-fusion-theme button"
+                className="button neutral compact button"
                 data-terra-search-field-button="Search"
                 disabled={false}
                 onBlur={[Function]}