MNTOR-2790 - Do not announce visually hidden elements (#4348)

* do not announce visually hidden elements

* Write unit test for window width change and data breach premium instance

* add prop to scanresultcard

* add hideonmobileclass to respective dt elems

* remove iswidescreen prop

* remove aria-hidden tests

* remove iswidescreen from removal

* update css

* add media query to hideonmobile

src/app/components/client/exposure_card/ExposureCard.module.scss

@@ -48,6 +48,14 @@
     justify-content: space-between;
     height: 30px; // fixed height to standardize image/icon heights
 
+    .hideOnMobile {
+      display: none;
+
+      @media screen and (min-width: $screen-lg) {
+        display: block;
+      }
+    }
+
     @media screen and (min-width: $screen-lg) {
       gap: $layout-md;
     }
@@ -71,9 +79,6 @@
       display: flex;
       align-items: center;
 
-      &.hideOnMobile {
-        display: none;
-      }
       .exposureCompanyTitle {
         font: $text-body-sm;
         text-overflow: ellipsis;

src/app/components/client/exposure_card/ExposureCard.stories.ts

@@ -76,3 +76,11 @@ export const DataBreachFixed: Story = {
     exposureData: BreachMockItemRemoved,
   },
 };
+
+export const DataBreachFixedEligibleForPremium: Story = {
+  args: {
+    exposureImg: TwitterImage,
+    exposureData: BreachMockItemRemoved,
+    isEligibleForPremium: true,
+  },
+};

src/app/components/client/exposure_card/ExposureCard.test.tsx

@@ -9,6 +9,7 @@ import { axe } from "jest-axe";
 import Meta, {
   DataBreachActionNeeded,
   DataBreachFixed,
+  DataBreachFixedEligibleForPremium,
   DataBrokerActionNeeded,
   DataBrokerInProgress,
   DataBrokerManualRemoved,
@@ -82,6 +83,18 @@ describe("ScanResultCard", () => {
 
     expect(innerDescription).toBeInTheDocument();
   });
+
+  it("hides the dt element if its dd counterpart has hideonmobile", () => {
+    const ComposedProgressCard = composeStory(DataBrokerInProgress, Meta);
+    render(<ComposedProgressCard />);
+    const infoForSale = screen.getAllByRole("definition");
+    const elementsWithClass = infoForSale.filter((element) =>
+      element.classList.contains("hideOnMobile"),
+    );
+    const prevElementToInfoForSale =
+      elementsWithClass[0].previousElementSibling;
+    expect(prevElementToInfoForSale).toHaveClass("hideOnMobile");
+  });
 });
 
 describe("DataBreachCard", () => {
@@ -108,4 +121,15 @@ describe("DataBreachCard", () => {
 
     expect(innerDescription).toBeInTheDocument();
   });
+
+  it("announces the exposure type (data breach) if user is eligible for premium", () => {
+    const ComposedExposureCard = composeStory(
+      DataBreachFixedEligibleForPremium,
+      Meta,
+    );
+    render(<ComposedExposureCard />);
+
+    const companyLogoTitle = screen.getByText("Exposure type");
+    expect(companyLogoTitle).toBeInTheDocument();
+  });
 });

src/app/components/client/exposure_card/ScanResultCard.tsx

@@ -202,7 +202,7 @@ export const ScanResultCard = (props: ScanResultCardProps) => {
       <div className={styles.exposureCard}>
         <div className={styles.exposureHeader}>
           <dl className={styles.exposureHeaderList}>
-            <dt className={styles.visuallyHidden}>
+            <dt className={`${styles.hideOnMobile} ${styles.visuallyHidden}`}>
               {l10n.getString("exposure-card-label-company-logo")}
             </dt>
             <dd
@@ -223,13 +223,13 @@ export const ScanResultCard = (props: ScanResultCardProps) => {
                 {scanResult.data_broker}
               </span>
             </dd>
-            <dt className={styles.visuallyHidden}>
+            <dt className={`${styles.hideOnMobile} ${styles.visuallyHidden}`}>
               {l10n.getString("exposure-card-exposure-type")}
             </dt>
             <dd className={styles.hideOnMobile}>
               {l10n.getString("exposure-card-exposure-type-data-broker")}
             </dd>
-            <dt className={styles.visuallyHidden}>
+            <dt className={`${styles.hideOnMobile} ${styles.visuallyHidden}`}>
               {l10n.getString("exposure-card-date-found")}
             </dt>
             <dd className={styles.hideOnMobile}>

src/app/components/client/exposure_card/SubscriberBreachCard.tsx

@@ -37,7 +37,6 @@ export type SubscriberBreachCardProps = {
 
 export const SubscriberBreachCard = (props: SubscriberBreachCardProps) => {
   const { exposureImg, subscriberBreach, locale } = props;
-
   const l10n = useL10n();
   const recordTelemetry = useTelemetry();
   const dateFormatter = new Intl.DateTimeFormat(locale, {
@@ -150,7 +149,7 @@ export const SubscriberBreachCard = (props: SubscriberBreachCardProps) => {
       <div className={styles.exposureCard}>
         <div className={styles.exposureHeader}>
           <dl className={styles.exposureHeaderList}>
-            <dt className={styles.visuallyHidden}>
+            <dt className={`${styles.hideOnMobile} ${styles.visuallyHidden}`}>
               {l10n.getString("exposure-card-label-company-logo")}
             </dt>
             <dd
@@ -183,7 +182,9 @@ export const SubscriberBreachCard = (props: SubscriberBreachCardProps) => {
             </dd>
             {props.isEligibleForPremium && (
               <>
-                <dt className={styles.visuallyHidden}>
+                <dt
+                  className={`${styles.hideOnMobile} ${styles.visuallyHidden}`}
+                >
                   {l10n.getString("exposure-card-exposure-type")}
                 </dt>
                 <dd className={styles.hideOnMobile}>
@@ -191,7 +192,7 @@ export const SubscriberBreachCard = (props: SubscriberBreachCardProps) => {
                 </dd>
               </>
             )}
-            <dt className={styles.visuallyHidden}>
+            <dt className={`${styles.hideOnMobile} ${styles.visuallyHidden}`}>
               {l10n.getString("exposure-card-date-found")}
             </dt>
             <dd className={styles.hideOnMobile}>