From e79952d0a1e33a973e59e70ff3776fc6cd23b06f Mon Sep 17 00:00:00 2001
From: Kate Kazantseva <67483124+kate-kazantseva@users.noreply.github.com>
Date: Thu, 26 Sep 2024 11:05:54 -0700
Subject: [PATCH] Fix accessibility issues (#175)

* fix accessibility issues

* prettier

* missed bracket

* comma

* keep class and id

* prettier
---
 src/components/AcceptAllOrMoreChoices.tsx     |  11 +-
 src/components/AcceptOrRejectAdvertising.tsx  |  11 +-
 src/components/AcceptOrRejectAll.tsx          |  11 +-
 .../AcceptOrRejectAllOrMoreChoices.tsx        |  11 +-
 src/components/AcceptOrRejectAnalytics.tsx    |  11 +-
 src/components/CompleteOptions.tsx            | 117 +++++++++---------
 src/components/Main.tsx                       |  14 +--
 src/messages.ts                               |   2 +-
 .../AcceptAllOrMoreChoices.test.tsx.snap      |   4 +-
 .../AcceptOrRejectAdvertising.test.tsx.snap   |   4 +-
 .../AcceptOrRejectAll.test.tsx.snap           |   4 +-
 ...ceptOrRejectAllOrMoreChoices.test.tsx.snap |   4 +-
 .../AcceptOrRejectAnalytics.test.tsx.snap     |   4 +-
 13 files changed, 90 insertions(+), 118 deletions(-)

diff --git a/src/components/AcceptAllOrMoreChoices.tsx b/src/components/AcceptAllOrMoreChoices.tsx
index 48fa7162..8fc2645b 100644
--- a/src/components/AcceptAllOrMoreChoices.tsx
+++ b/src/components/AcceptAllOrMoreChoices.tsx
@@ -39,7 +39,7 @@ export function AcceptAllOrMoreChoices({
   };
 
   return (
-    <div className="column-content" role="none">
+    <div className="column-content">
       <div>
         <div>
           <p
@@ -51,7 +51,8 @@ export function AcceptAllOrMoreChoices({
           </p>
         </div>
         <div>
-          <p className="paragraph"
+          <p
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: formatMessage(messages.acceptAllDescription),
@@ -59,11 +60,7 @@ export function AcceptAllOrMoreChoices({
           />
         </div>
       </div>
-      <div
-        className="accept-or-reject-all-button-row"
-        role="group"
-        aria-label={formatMessage(messages.buttonGroupAriaDescription)}
-      >
+      <div className="accept-or-reject-all-button-row">
         <Button
           primaryText={formatMessage(messages.acceptAllButtonPrimary)}
           handleClick={handleAcceptAll}
diff --git a/src/components/AcceptOrRejectAdvertising.tsx b/src/components/AcceptOrRejectAdvertising.tsx
index 31bdefda..1db115db 100644
--- a/src/components/AcceptOrRejectAdvertising.tsx
+++ b/src/components/AcceptOrRejectAdvertising.tsx
@@ -19,7 +19,7 @@ export function AcceptOrRejectAdvertising({
   const { formatMessage } = useIntl();
 
   return (
-    <div className="column-content" role="none">
+    <div className="column-content">
       <div>
         <div>
           <p
@@ -31,7 +31,8 @@ export function AcceptOrRejectAdvertising({
           </p>
         </div>
         <div>
-          <p className="paragraph"
+          <p
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: formatMessage(
@@ -41,11 +42,7 @@ export function AcceptOrRejectAdvertising({
           />
         </div>
       </div>
-      <div
-        className="accept-or-reject-all-button-row"
-        role="group"
-        aria-label={formatMessage(messages.buttonGroupAriaDescription)}
-      >
+      <div className="accept-or-reject-all-button-row">
         <Button
           primaryText={formatMessage(messages.acceptAdvertising)}
           handleClick={(event) => {
diff --git a/src/components/AcceptOrRejectAll.tsx b/src/components/AcceptOrRejectAll.tsx
index 54f6d151..8c0d9c90 100644
--- a/src/components/AcceptOrRejectAll.tsx
+++ b/src/components/AcceptOrRejectAll.tsx
@@ -40,7 +40,7 @@ export function AcceptOrRejectAll({
   };
 
   return (
-    <div className="column-content" role="none">
+    <div className="column-content">
       <div>
         <div>
           <p
@@ -52,7 +52,8 @@ export function AcceptOrRejectAll({
           </p>
         </div>
         <div>
-          <p className="paragraph"
+          <p
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: formatMessage(messages.acceptAllDescription),
@@ -60,11 +61,7 @@ export function AcceptOrRejectAll({
           />
         </div>
       </div>
-      <div
-        className="accept-or-reject-all-button-row"
-        role="group"
-        aria-label={formatMessage(messages.buttonGroupAriaDescription)}
-      >
+      <div className="accept-or-reject-all-button-row">
         <Button
           primaryText={formatMessage(messages.acceptAllButtonPrimary)}
           handleClick={handleAcceptAll}
diff --git a/src/components/AcceptOrRejectAllOrMoreChoices.tsx b/src/components/AcceptOrRejectAllOrMoreChoices.tsx
index 75b1f174..05e8d6a7 100644
--- a/src/components/AcceptOrRejectAllOrMoreChoices.tsx
+++ b/src/components/AcceptOrRejectAllOrMoreChoices.tsx
@@ -50,7 +50,7 @@ export function AcceptOrRejectAllOrMoreChoices({
   };
 
   return (
-    <div className="column-content" role="none">
+    <div className="column-content">
       <div>
         <div>
           <p
@@ -62,7 +62,8 @@ export function AcceptOrRejectAllOrMoreChoices({
           </p>
         </div>
         <div>
-          <p className="paragraph"
+          <p
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: formatMessage(messages.acceptAllDescription),
@@ -70,11 +71,7 @@ export function AcceptOrRejectAllOrMoreChoices({
           />
         </div>
       </div>
-      <div
-        className="accept-or-reject-all-button-row"
-        role="group"
-        aria-label={formatMessage(messages.buttonGroupAriaDescription)}
-      >
+      <div className="accept-or-reject-all-button-row">
         <Button
           primaryText={formatMessage(messages.acceptAllButtonPrimary)}
           handleClick={handleAcceptAll}
diff --git a/src/components/AcceptOrRejectAnalytics.tsx b/src/components/AcceptOrRejectAnalytics.tsx
index 2ae500b3..294a850e 100644
--- a/src/components/AcceptOrRejectAnalytics.tsx
+++ b/src/components/AcceptOrRejectAnalytics.tsx
@@ -19,7 +19,7 @@ export function AcceptOrRejectAnalytics({
   const { formatMessage } = useIntl();
 
   return (
-    <div className="column-content" role="none">
+    <div className="column-content">
       <div>
         <div>
           <p
@@ -31,7 +31,8 @@ export function AcceptOrRejectAnalytics({
           </p>
         </div>
         <div>
-          <p className="paragraph"
+          <p
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: formatMessage(
@@ -41,11 +42,7 @@ export function AcceptOrRejectAnalytics({
           />
         </div>
       </div>
-      <div
-        className="accept-or-reject-all-button-row"
-        role="group"
-        aria-label={formatMessage(messages.buttonGroupAriaDescription)}
-      >
+      <div className="accept-or-reject-all-button-row">
         <Button
           primaryText={formatMessage(messages.acceptAnalytics)}
           handleClick={(event) => {
diff --git a/src/components/CompleteOptions.tsx b/src/components/CompleteOptions.tsx
index ccd16481..ef796553 100644
--- a/src/components/CompleteOptions.tsx
+++ b/src/components/CompleteOptions.tsx
@@ -68,67 +68,70 @@ export function CompleteOptions({
 
   return (
     <div className="complete-options-container" role="none">
-      <p
-        role="heading"
-        id="consent-dialog-title"
-        className="text-title text-title-center"
-      >
-        {formatMessage(messages.consentTitle)}
-      </p>
-      <form className="complete-options-form">
-        <GPCIndicator />
-        {description && description !== '-' ? (
-          <p className="paragraph">
-            <div
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{
-                __html: description,
+      <fieldset>
+        <legend
+          id="consent-dialog-title"
+          className="text-title text-title-center"
+        >
+          {formatMessage(messages.consentTitle)}
+        </legend>
+        <form className="complete-options-form">
+          <GPCIndicator />
+          {description && description !== '-' ? (
+            <p className="paragraph">
+              <div
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML={{
+                  __html: description,
+                }}
+              />
+            </p>
+          ) : undefined}
+
+          <div
+            className="toggles-container"
+            role="group"
+            aria-label={formatMessage(messages.buttonGroupAriaDescription)}
+          >
+            <Toggle
+              key="Essential"
+              name={formatMessage(purposeToMessageKey.Essential)}
+              initialToggleState
+              disabled
+              handleToggle={() => {
+                // noop
               }}
+              ariaLabel={formatMessage(
+                completeOptionsMessages.essentialAriaLabel,
+              )}
             />
-          </p>
-        ) : undefined}
-
-        <div
-          className="toggles-container"
-          role="group"
-          aria-label={formatMessage(messages.buttonGroupAriaDescription)}
-        >
-          <Toggle
-            key="Essential"
-            name={formatMessage(purposeToMessageKey.Essential)}
-            initialToggleState
-            disabled
-            handleToggle={() => {
-              // noop
-            }}
-            ariaLabel={formatMessage(
-              completeOptionsMessages.essentialAriaLabel,
+            {orderedSelections.map(([purpose, isChecked], idx) => (
+              <Toggle
+                key={purpose}
+                name={
+                  Object.hasOwnProperty.call(purposeToMessageKey, purpose)
+                    ? formatMessage(purposeToMessageKey[purpose])
+                    : purpose
+                }
+                initialToggleState={isChecked}
+                disabled={false}
+                handleToggle={(checked: boolean) =>
+                  handleToggle(purpose, checked)
+                }
+                {...(idx === 0 ? { initialFocus: true } : {})}
+              />
+            ))}
+          </div>
+          <Button
+            handleClick={handleSave}
+            primaryText={formatMessage(
+              completeOptionsMessages.saveButtonPrimary,
             )}
+            type="submit"
+            {...(orderedSelections.length === 0 ? { initialFocus: true } : {})}
           />
-          {orderedSelections.map(([purpose, isChecked], idx) => (
-            <Toggle
-              key={purpose}
-              name={
-                Object.hasOwnProperty.call(purposeToMessageKey, purpose)
-                  ? formatMessage(purposeToMessageKey[purpose])
-                  : purpose
-              }
-              initialToggleState={isChecked}
-              disabled={false}
-              handleToggle={(checked: boolean) =>
-                handleToggle(purpose, checked)
-              }
-              {...(idx === 0 ? { initialFocus: true } : {})}
-            />
-          ))}
-        </div>
-        <Button
-          handleClick={handleSave}
-          primaryText={formatMessage(completeOptionsMessages.saveButtonPrimary)}
-          type="submit"
-          {...(orderedSelections.length === 0 ? { initialFocus: true } : {})}
-        />
-      </form>
+        </form>
+      </fieldset>
     </div>
   );
 }
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index 7b9cc93f..02e4d3db 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -87,20 +87,14 @@ export function Main({
     }
     return (
       <div
-        role="dialog"
-        aria-modal="true"
+        role="regions"
         aria-label={formatMessage(messages.modalAriaLabel)}
-        aria-live="polite"
         className="modal-container"
         id="consentManagerMainDialog"
         ref={dialogRef}
       >
-        <div role="document" className="modal-container-inner">
-          <div
-            role="main"
-            className="inner-container"
-            aria-description={formatMessage(messages.modalAriaDescription)}
-          >
+        <div className="modal-container-inner">
+          <div className="inner-container">
             {viewState === 'QuickOptions' && (
               <QuickOptions handleSetViewState={handleSetViewState} />
             )}
@@ -206,7 +200,7 @@ export function Main({
               />
             )}
           </div>
-          <div role="contentinfo" className="footer-container">
+          <div className="footer-container">
             <TranscendLogo fontColor={config.theme.fontColor} />
             <BottomMenu
               firstSelectedViewState={firstSelectedViewState}
diff --git a/src/messages.ts b/src/messages.ts
index 254dc823..388709dd 100644
--- a/src/messages.ts
+++ b/src/messages.ts
@@ -182,7 +182,7 @@ export const messages = defineMessages('ui.src.messages', {
       'The description text for the CompleteOptionsToggles view state.',
   },
   modalAriaLabel: {
-    defaultMessage: 'User data usage dialog',
+    defaultMessage: 'cookie consent banner',
     description:
       'The aria label used by screen readers for the modal. This is read when the modal is opened and focused.',
   },
diff --git a/src/tests/__snapshots__/AcceptAllOrMoreChoices.test.tsx.snap b/src/tests/__snapshots__/AcceptAllOrMoreChoices.test.tsx.snap
index 94632622..6b35a61a 100644
--- a/src/tests/__snapshots__/AcceptAllOrMoreChoices.test.tsx.snap
+++ b/src/tests/__snapshots__/AcceptAllOrMoreChoices.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`AcceptAllOrMoreChoices matches snapshot 1`] = `
 "<div>
-  <div class="column-content" role="none">
+  <div class="column-content">
     <div>
       <div>
         <p
@@ -22,8 +22,6 @@ exports[`AcceptAllOrMoreChoices matches snapshot 1`] = `
     </div>
     <div
       class="accept-or-reject-all-button-row"
-      role="group"
-      aria-label="Select consent and close dialog"
     >
       <button class="button">
         <span class="button-base-text button-primary-text"
diff --git a/src/tests/__snapshots__/AcceptOrRejectAdvertising.test.tsx.snap b/src/tests/__snapshots__/AcceptOrRejectAdvertising.test.tsx.snap
index 311c74bd..80426efe 100644
--- a/src/tests/__snapshots__/AcceptOrRejectAdvertising.test.tsx.snap
+++ b/src/tests/__snapshots__/AcceptOrRejectAdvertising.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`AcceptOrRejectAdvertising matches snapshot 1`] = `
 "<div>
-  <div class="column-content" role="none">
+  <div class="column-content">
     <div>
       <div>
         <p
@@ -22,8 +22,6 @@ exports[`AcceptOrRejectAdvertising matches snapshot 1`] = `
     </div>
     <div
       class="accept-or-reject-all-button-row"
-      role="group"
-      aria-label="Select consent and close dialog"
     >
       <button class="button">
         <span class="button-base-text button-primary-text">Okay</span></button
diff --git a/src/tests/__snapshots__/AcceptOrRejectAll.test.tsx.snap b/src/tests/__snapshots__/AcceptOrRejectAll.test.tsx.snap
index 54973880..7157a894 100644
--- a/src/tests/__snapshots__/AcceptOrRejectAll.test.tsx.snap
+++ b/src/tests/__snapshots__/AcceptOrRejectAll.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`AcceptOrRejectAll matches snapshot 1`] = `
 "<div>
-  <div class="column-content" role="none">
+  <div class="column-content">
     <div>
       <div>
         <p
@@ -22,8 +22,6 @@ exports[`AcceptOrRejectAll matches snapshot 1`] = `
     </div>
     <div
       class="accept-or-reject-all-button-row"
-      role="group"
-      aria-label="Select consent and close dialog"
     >
       <button class="button">
         <span class="button-base-text button-primary-text"
diff --git a/src/tests/__snapshots__/AcceptOrRejectAllOrMoreChoices.test.tsx.snap b/src/tests/__snapshots__/AcceptOrRejectAllOrMoreChoices.test.tsx.snap
index e3dcb0bd..7a0ddbb3 100644
--- a/src/tests/__snapshots__/AcceptOrRejectAllOrMoreChoices.test.tsx.snap
+++ b/src/tests/__snapshots__/AcceptOrRejectAllOrMoreChoices.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`AcceptOrRejectAllOrMoreChoices matches snapshot 1`] = `
 "<div>
-  <div class="column-content" role="none">
+  <div class="column-content">
     <div>
       <div>
         <p
@@ -22,8 +22,6 @@ exports[`AcceptOrRejectAllOrMoreChoices matches snapshot 1`] = `
     </div>
     <div
       class="accept-or-reject-all-button-row"
-      role="group"
-      aria-label="Select consent and close dialog"
     >
       <button class="button">
         <span class="button-base-text button-primary-text"
diff --git a/src/tests/__snapshots__/AcceptOrRejectAnalytics.test.tsx.snap b/src/tests/__snapshots__/AcceptOrRejectAnalytics.test.tsx.snap
index bc9c7f4a..8d1272cc 100644
--- a/src/tests/__snapshots__/AcceptOrRejectAnalytics.test.tsx.snap
+++ b/src/tests/__snapshots__/AcceptOrRejectAnalytics.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`AcceptOrRejectAnalytics matches snapshot 1`] = `
 "<div>
-  <div class="column-content" role="none">
+  <div class="column-content">
     <div>
       <div>
         <p
@@ -22,8 +22,6 @@ exports[`AcceptOrRejectAnalytics matches snapshot 1`] = `
     </div>
     <div
       class="accept-or-reject-all-button-row"
-      role="group"
-      aria-label="Select consent and close dialog"
     >
       <button class="button">
         <span class="button-base-text button-primary-text">Okay</span></button