accessibility improvements (#162)

* accessibility improvements * reorder to put most ethical option 1st, bump, note
transcend-io · May 10, 2024 · b744579 · b744579
1 parent 415cca8
commit b744579
Show file tree

Hide file tree

Showing 29 changed files with 344 additions and 109 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/transcend-io/consent-manager-ui.git"
   },
   "homepage": "https://github.com/transcend-io/consent-manager-ui",
-  "version": "4.13.4",
+  "version": "4.14.0",
   "license": "MIT",
   "main": "build/ui",
   "files": [

diff --git a/src/cm.css b/src/cm.css
@@ -171,6 +171,11 @@ a:focus {
   word-wrap: break-word;
 }
 
+.toggle-label input:focus + span {
+  outline: 2px solid rgba(51, 157, 255, 0.7);
+  outline-offset: 1px;
+}
+
 /** Style applied to create custom checkmark */
 .toggle-checkmark {
   display: inline-block;
@@ -709,6 +714,7 @@ a:focus {
   vertical-align: baseline;
   text-shadow: none;
   white-space: nowrap;
+  padding: 0 5px;
 }
 
 /** Removes checkbox for the switch since checkbox is basis for switch */

diff --git a/src/components/AcceptAll.tsx b/src/components/AcceptAll.tsx
@@ -29,16 +29,21 @@ export function AcceptAll({
   };
 
   return (
-    <div className="column-content">
+    <div className="column-content" role="none">
       <div>
         <div>
-          <p id="consent-dialog-title" className="text-title text-title-left">
+          <p
+            id="consent-dialog-title"
+            role="heading"
+            className="text-title text-title-left"
+          >
             {formatMessage(messages.consentTitleAcceptAll)}
           </p>
         </div>
         <div>
           <p className="paragraph">
             <div
+              role="paragraph"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{
                 __html: formatMessage(messages.acceptAllDescription),
@@ -50,6 +55,8 @@ export function AcceptAll({
       <Button
         primaryText={formatMessage(messages.acceptAllButtonPrimary)}
         handleClick={handleAcceptAll}
+        ariaDescription={formatMessage(messages.acceptAllButtonAriaDescription)}
+        initialFocus
       />
     </div>
   );

diff --git a/src/components/AcceptAllOrMoreChoices.tsx b/src/components/AcceptAllOrMoreChoices.tsx
@@ -39,16 +39,21 @@ export function AcceptAllOrMoreChoices({
   };
 
   return (
-    <div className="column-content">
+    <div className="column-content" role="none">
       <div>
         <div>
-          <p id="consent-dialog-title" className="text-title text-title-left">
+          <p
+            id="consent-dialog-title"
+            role="heading"
+            className="text-title text-title-left"
+          >
             {formatMessage(messages.consentTitleAcceptAll)}
           </p>
         </div>
         <div>
           <p className="paragraph">
             <div
+              role="paragraph"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{
                 __html: formatMessage(messages.acceptAllDescription),
@@ -57,14 +62,19 @@ export function AcceptAllOrMoreChoices({
           </p>
         </div>
       </div>
-      <div className="accept-or-reject-all-button-row">
-        <Button
-          primaryText={formatMessage(messages.acceptAllButtonPrimary)}
-          handleClick={handleAcceptAll}
-        />
+      <div
+        className="accept-or-reject-all-button-row"
+        role="group"
+        aria-label={formatMessage(messages.buttonGroupAriaDescription)}
+      >
         <Button
           primaryText={formatMessage(messages.moreChoicesButtonPrimary)}
           handleClick={handleMoreChoices}
+          initialFocus
+        />
+        <Button
+          primaryText={formatMessage(messages.acceptAllButtonPrimary)}
+          handleClick={handleAcceptAll}
         />
       </div>
     </div>

diff --git a/src/components/AcceptAllRejectAllToggle.tsx b/src/components/AcceptAllRejectAllToggle.tsx
@@ -30,7 +30,7 @@ export function AcceptAllRejectAllToggle({
   const [consentLocal, setConsentLocal] = useState(
     !!airgap.getConsent().purposes.SaleOfInfo,
   );
-  const switchId = `all-purposes-${consentLocal}`;
+  const switchId = `all-purposes`;
 
   const handleSwitch = (
     checked: boolean,
@@ -57,7 +57,7 @@ export function AcceptAllRejectAllToggle({
   };
 
   return (
-    <div className="column-content">
+    <div className="column-content" role="none">
       <CloseButton
         onClick={() => {
           handleSetViewState('close');
@@ -67,13 +67,18 @@ export function AcceptAllRejectAllToggle({
       />
       <div>
         <div>
-          <p id="consent-dialog-title" className="text-title text-title-left">
+          <p
+            id="consent-dialog-title"
+            role="heading"
+            className="text-title text-title-left"
+          >
             {formatMessage(messages.consentTitleAcceptAllRejectAllToggle)}
           </p>
         </div>
         <div>
           <p className="paragraph">
             <div
+              role="paragraph"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{
                 __html: formatMessage(
@@ -94,9 +99,13 @@ export function AcceptAllRejectAllToggle({
                 ? messages.doNotSellOptedIn
                 : messages.doNotSellOptedOut,
             )}
+            initialFocus
           />
-
-          <p className="paragraph">
+          <p
+            className="paragraph"
+            role="status"
+            aria-hidden={typeof saving === 'boolean' ? 'false' : 'true'}
+          >
             {typeof saving === 'boolean'
               ? formatMessage(
                   saving

diff --git a/src/components/AcceptOrRejectAdvertising.tsx b/src/components/AcceptOrRejectAdvertising.tsx
@@ -19,16 +19,21 @@ export function AcceptOrRejectAdvertising({
   const { formatMessage } = useIntl();
 
   return (
-    <div className="column-content">
+    <div className="column-content" role="none">
       <div>
         <div>
-          <p id="consent-dialog-title" className="text-title text-title-left">
+          <p
+            id="consent-dialog-title"
+            role="heading"
+            className="text-title text-title-left"
+          >
             {formatMessage(messages.consentTitleAcceptOrRejectAdvertising)}
           </p>
         </div>
         <div>
           <p className="paragraph">
             <div
+              role="paragraph"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{
                 __html: formatMessage(
@@ -39,20 +44,25 @@ export function AcceptOrRejectAdvertising({
           </p>
         </div>
       </div>
-      <div className="accept-or-reject-all-button-row">
+      <div
+        className="accept-or-reject-all-button-row"
+        role="group"
+        aria-label={formatMessage(messages.buttonGroupAriaDescription)}
+      >
         <Button
-          primaryText={formatMessage(messages.acceptAdvertising)}
+          primaryText={formatMessage(messages.rejectAdvertising)}
           handleClick={(event) => {
             event.preventDefault();
-            airgap.setConsent(event, { Advertising: true }, CONSENT_OPTIONS);
+            airgap.setConsent(event, { Advertising: false }, CONSENT_OPTIONS);
             handleSetViewState('close');
           }}
+          initialFocus
         />
         <Button
-          primaryText={formatMessage(messages.rejectAdvertising)}
+          primaryText={formatMessage(messages.acceptAdvertising)}
           handleClick={(event) => {
             event.preventDefault();
-            airgap.setConsent(event, { Advertising: false }, CONSENT_OPTIONS);
+            airgap.setConsent(event, { Advertising: true }, CONSENT_OPTIONS);
             handleSetViewState('close');
           }}
         />

diff --git a/src/components/AcceptOrRejectAll.tsx b/src/components/AcceptOrRejectAll.tsx
@@ -40,16 +40,21 @@ export function AcceptOrRejectAll({
   };
 
   return (
-    <div className="column-content">
+    <div className="column-content" role="none">
       <div>
         <div>
-          <p id="consent-dialog-title" className="text-title text-title-left">
+          <p
+            id="consent-dialog-title"
+            role="heading"
+            className="text-title text-title-left"
+          >
             {formatMessage(messages.consentTitleAcceptAll)}
           </p>
         </div>
         <div>
           <p className="paragraph">
             <div
+              role="paragraph"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{
                 __html: formatMessage(messages.acceptAllDescription),
@@ -58,14 +63,19 @@ export function AcceptOrRejectAll({
           </p>
         </div>
       </div>
-      <div className="accept-or-reject-all-button-row">
-        <Button
-          primaryText={formatMessage(messages.acceptAllButtonPrimary)}
-          handleClick={handleAcceptAll}
-        />
+      <div
+        className="accept-or-reject-all-button-row"
+        role="group"
+        aria-label={formatMessage(messages.buttonGroupAriaDescription)}
+      >
         <Button
           primaryText={formatMessage(messages.rejectAllButtonPrimary)}
           handleClick={handleRejectAll}
+          initialFocus
+        />
+        <Button
+          primaryText={formatMessage(messages.acceptAllButtonPrimary)}
+          handleClick={handleAcceptAll}
         />
       </div>
     </div>

diff --git a/src/components/AcceptOrRejectAllOrMoreChoices.tsx b/src/components/AcceptOrRejectAllOrMoreChoices.tsx
@@ -50,16 +50,21 @@ export function AcceptOrRejectAllOrMoreChoices({
   };
 
   return (
-    <div className="column-content">
+    <div className="column-content" role="none">
       <div>
         <div>
-          <p id="consent-dialog-title" className="text-title text-title-left">
+          <p
+            id="consent-dialog-title"
+            role="heading"
+            className="text-title text-title-left"
+          >
             {formatMessage(messages.consentTitleAcceptAll)}
           </p>
         </div>
         <div>
           <p className="paragraph">
             <div
+              role="paragraph"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{
                 __html: formatMessage(messages.acceptAllDescription),
@@ -68,14 +73,19 @@ export function AcceptOrRejectAllOrMoreChoices({
           </p>
         </div>
       </div>
-      <div className="accept-or-reject-all-button-row">
-        <Button
-          primaryText={formatMessage(messages.acceptAllButtonPrimary)}
-          handleClick={handleAcceptAll}
-        />
+      <div
+        className="accept-or-reject-all-button-row"
+        role="group"
+        aria-label={formatMessage(messages.buttonGroupAriaDescription)}
+      >
         <Button
           primaryText={formatMessage(messages.rejectAllButtonPrimary)}
           handleClick={handleRejectAll}
+          initialFocus
+        />
+        <Button
+          primaryText={formatMessage(messages.acceptAllButtonPrimary)}
+          handleClick={handleAcceptAll}
         />
         <Button
           primaryText={formatMessage(messages.moreChoicesButtonPrimary)}

diff --git a/src/components/AcceptOrRejectAnalytics.tsx b/src/components/AcceptOrRejectAnalytics.tsx
@@ -19,16 +19,21 @@ export function AcceptOrRejectAnalytics({
   const { formatMessage } = useIntl();
 
   return (
-    <div className="column-content">
+    <div className="column-content" role="none">
       <div>
         <div>
-          <p id="consent-dialog-title" className="text-title text-title-left">
+          <p
+            id="consent-dialog-title"
+            role="heading"
+            className="text-title text-title-left"
+          >
             {formatMessage(messages.consentTitleAcceptOrRejectAnalytics)}
           </p>
         </div>
         <div>
           <p className="paragraph">
             <div
+              role="paragraph"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{
                 __html: formatMessage(
@@ -39,20 +44,25 @@ export function AcceptOrRejectAnalytics({
           </p>
         </div>
       </div>
-      <div className="accept-or-reject-all-button-row">
+      <div
+        className="accept-or-reject-all-button-row"
+        role="group"
+        aria-label={formatMessage(messages.buttonGroupAriaDescription)}
+      >
         <Button
-          primaryText={formatMessage(messages.acceptAnalytics)}
+          primaryText={formatMessage(messages.rejectAnalytics)}
           handleClick={(event) => {
             event.preventDefault();
-            airgap.setConsent(event, { Analytics: true }, CONSENT_OPTIONS);
+            airgap.setConsent(event, { Analytics: false }, CONSENT_OPTIONS);
             handleSetViewState('close');
           }}
+          initialFocus
         />
         <Button
-          primaryText={formatMessage(messages.rejectAnalytics)}
+          primaryText={formatMessage(messages.acceptAnalytics)}
           handleClick={(event) => {
             event.preventDefault();
-            airgap.setConsent(event, { Analytics: false }, CONSENT_OPTIONS);
+            airgap.setConsent(event, { Analytics: true }, CONSENT_OPTIONS);
             handleSetViewState('close');
           }}
         />