Fix accessibility issues

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,19 +51,16 @@ export function AcceptAllOrMoreChoices({
  </p>
  </div>
  <div>
- <p className="paragraph"
+ <p
+ className="paragraph"
  // eslint-disable-next-line react/no-danger
  dangerouslySetInnerHTML={{
  __html: formatMessage(messages.acceptAllDescription),
  }}
  />
  </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}

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) => {

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,19 +52,16 @@ export function AcceptOrRejectAll({
  </p>
  </div>
  <div>
- <p className="paragraph"
+ <p
+ className="paragraph"
  // eslint-disable-next-line react/no-danger
  dangerouslySetInnerHTML={{
  __html: formatMessage(messages.acceptAllDescription),
  }}
  />
  </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}

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,19 +62,16 @@ export function AcceptOrRejectAllOrMoreChoices({
  </p>
  </div>
  <div>
- <p className="paragraph"
+ <p
+ className="paragraph"
  // eslint-disable-next-line react/no-danger
  dangerouslySetInnerHTML={{
  __html: formatMessage(messages.acceptAllDescription),
  }}
  />
  </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}

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) => {

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>
  );
 }

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}

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.',
  },

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"

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

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"