From 369d80884acf93c047406edfb556563554832e1b Mon Sep 17 00:00:00 2001
From: jpveooys <66470099+jpveooys@users.noreply.github.com>
Date: Mon, 11 Apr 2022 11:28:31 +0100
Subject: [PATCH] fix(CheckboxRadioBase): Resolve 'nested-interactive' axe v4
 error

This resolves the following error:

https://dequeuniversity.com/rules/axe/4.4/nested-interactive

This was occurring as we effectively had a checkbox within a checkbox, as we had a visually-hidden `<input>` contained within an element with `role="checkbox"`.

The removes the roles from the parent elements.

A further problem was that the 0px <input> caused a screen reader used with Firefox to behave oddly. This reorganises things slightly so that it has the same dimensions as`StyledCheckmark`.
---
 .../src/components/Checkbox/Checkbox.tsx      |  2 +
 .../Checkbox/partials/StyledCheckmark.tsx     | 11 +++--
 .../partials/StyledCheckmarkWrapper.tsx       | 12 ++++++
 .../CheckboxRadioBase/CheckboxRadioBase.tsx   | 42 +++++++++----------
 .../CheckboxRadioBaseProps.ts                 |  5 +++
 .../partials/StyledInput.tsx                  |  4 +-
 .../src/components/Radio/Radio.tsx            |  2 +
 .../Radio/partials/StyledCheckmark.tsx        | 11 +++--
 .../Radio/partials/StyledCheckmarkWrapper.tsx | 12 ++++++
 9 files changed, 66 insertions(+), 35 deletions(-)
 create mode 100644 packages/react-component-library/src/components/Checkbox/partials/StyledCheckmarkWrapper.tsx
 create mode 100644 packages/react-component-library/src/components/Radio/partials/StyledCheckmarkWrapper.tsx

diff --git a/packages/react-component-library/src/components/Checkbox/Checkbox.tsx b/packages/react-component-library/src/components/Checkbox/Checkbox.tsx
index 4b38399670..20efb905f4 100644
--- a/packages/react-component-library/src/components/Checkbox/Checkbox.tsx
+++ b/packages/react-component-library/src/components/Checkbox/Checkbox.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import { CheckboxRadioBase, CheckboxRadioBaseProps } from '../CheckboxRadioBase'
 import { StyledCheckbox } from './partials/StyledCheckbox'
 import { StyledCheckmark } from './partials/StyledCheckmark'
+import { StyledCheckmarkWrapper } from './partials/StyledCheckmarkWrapper'
 
 export type CheckboxProps = Omit<CheckboxRadioBaseProps, 'type' | 'partials'>
 
@@ -15,6 +16,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
         partials={{
           Root: StyledCheckbox,
           Checkmark: StyledCheckmark,
+          CheckmarkWrapper: StyledCheckmarkWrapper,
         }}
         {...props}
       />
diff --git a/packages/react-component-library/src/components/Checkbox/partials/StyledCheckmark.tsx b/packages/react-component-library/src/components/Checkbox/partials/StyledCheckmark.tsx
index 32ce741ad6..438f5038fa 100644
--- a/packages/react-component-library/src/components/Checkbox/partials/StyledCheckmark.tsx
+++ b/packages/react-component-library/src/components/Checkbox/partials/StyledCheckmark.tsx
@@ -15,12 +15,11 @@ function getCheckboxActiveStyle() {
   `
 }
 
-export const StyledCheckmark = styled.div<CheckmarkProps>`
-  position: absolute;
-  top: ${({ $hasContainer }) => ($hasContainer ? '12px' : '4px')};
-  left: ${({ $hasContainer }) => ($hasContainer ? '12px' : '4px')};
-  height: 18px;
-  width: 18px;
+export const StyledCheckmark = styled.span<CheckmarkProps>`
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
   background-color: ${color('neutral', 'white')};
   border: 1px solid ${color('neutral', '200')};
   border-radius: 3px;
diff --git a/packages/react-component-library/src/components/Checkbox/partials/StyledCheckmarkWrapper.tsx b/packages/react-component-library/src/components/Checkbox/partials/StyledCheckmarkWrapper.tsx
new file mode 100644
index 0000000000..b5e885c7f7
--- /dev/null
+++ b/packages/react-component-library/src/components/Checkbox/partials/StyledCheckmarkWrapper.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+import { CheckmarkWrapperProps } from '../../CheckboxRadioBase'
+
+export const StyledCheckmarkWrapper = styled.span<CheckmarkWrapperProps>`
+  display: block;
+  position: absolute;
+  top: ${({ $hasContainer }) => ($hasContainer ? '12px' : '4px')};
+  left: ${({ $hasContainer }) => ($hasContainer ? '12px' : '4px')};
+  height: 18px;
+  width: 18px;
+`
diff --git a/packages/react-component-library/src/components/CheckboxRadioBase/CheckboxRadioBase.tsx b/packages/react-component-library/src/components/CheckboxRadioBase/CheckboxRadioBase.tsx
index 5796b641df..19f08df7d2 100644
--- a/packages/react-component-library/src/components/CheckboxRadioBase/CheckboxRadioBase.tsx
+++ b/packages/react-component-library/src/components/CheckboxRadioBase/CheckboxRadioBase.tsx
@@ -30,7 +30,7 @@ export const CheckboxRadioBase = React.forwardRef<
       value,
       variant = CHECKBOX_RADIO_VARIANT.DEFAULT,
       type,
-      partials: { Root, Checkmark },
+      partials: { Root, Checkmark, CheckmarkWrapper },
       ...rest
     },
     ref
@@ -104,8 +104,6 @@ export const CheckboxRadioBase = React.forwardRef<
       <StyledWrapper>
         <Root
           className={className}
-          role={type}
-          aria-checked={isChecked}
           $isDisabled={isDisabled}
           $hasContainer={hasContainer}
           $isInvalid={isInvalid}
@@ -122,24 +120,26 @@ export const CheckboxRadioBase = React.forwardRef<
               htmlFor={id}
               data-testid={`${type}-label`}
             >
-              <StyledInput
-                defaultChecked={defaultChecked}
-                ref={mergeRefs([localRef, ref])}
-                id={id}
-                type={type}
-                name={name}
-                value={value}
-                onChange={handleOnChange}
-                onBlur={onBlur}
-                disabled={isDisabled}
-                data-testid={`${type}-input`}
-                checked={isControlled ? isChecked : undefined}
-                {...rest}
-              />
-              <Checkmark
-                $hasContainer={hasContainer}
-                $isDisabled={isDisabled}
-              />
+              <CheckmarkWrapper $hasContainer={hasContainer}>
+                <StyledInput
+                  defaultChecked={defaultChecked}
+                  ref={mergeRefs([localRef, ref])}
+                  id={id}
+                  type={type}
+                  name={name}
+                  value={value}
+                  onChange={handleOnChange}
+                  onBlur={onBlur}
+                  disabled={isDisabled}
+                  data-testid={`${type}-input`}
+                  checked={isControlled ? isChecked : undefined}
+                  {...rest}
+                />
+                <Checkmark
+                  $hasContainer={hasContainer}
+                  $isDisabled={isDisabled}
+                />
+              </CheckmarkWrapper>
               {label}
               {description && (
                 <StyledDescription data-testid={`${type}-description`}>
diff --git a/packages/react-component-library/src/components/CheckboxRadioBase/CheckboxRadioBaseProps.ts b/packages/react-component-library/src/components/CheckboxRadioBase/CheckboxRadioBaseProps.ts
index 9df22ef6fd..bb4cd4fca6 100644
--- a/packages/react-component-library/src/components/CheckboxRadioBase/CheckboxRadioBaseProps.ts
+++ b/packages/react-component-library/src/components/CheckboxRadioBase/CheckboxRadioBaseProps.ts
@@ -15,6 +15,10 @@ export interface CheckmarkProps {
   $isDisabled?: boolean
 }
 
+export interface CheckmarkWrapperProps {
+  $hasContainer: boolean
+}
+
 export interface CheckboxRadioBaseProps
   extends ComponentWithClass,
     InputValidationProps {
@@ -72,5 +76,6 @@ export interface CheckboxRadioBaseProps
   partials: {
     Root: React.ComponentType<CheckboxRootProps>
     Checkmark: React.ComponentType<CheckmarkProps>
+    CheckmarkWrapper: React.ComponentType<CheckmarkWrapperProps>
   }
 }
diff --git a/packages/react-component-library/src/components/CheckboxRadioBase/partials/StyledInput.tsx b/packages/react-component-library/src/components/CheckboxRadioBase/partials/StyledInput.tsx
index 43c31351f7..7944a79618 100644
--- a/packages/react-component-library/src/components/CheckboxRadioBase/partials/StyledInput.tsx
+++ b/packages/react-component-library/src/components/CheckboxRadioBase/partials/StyledInput.tsx
@@ -2,8 +2,8 @@ import styled from 'styled-components'
 
 export const StyledInput = styled.input`
   position: absolute;
-  height: 0;
-  width: 0;
+  height: 100%;
+  width: 100%;
   opacity: 0;
   cursor: pointer;
 `
diff --git a/packages/react-component-library/src/components/Radio/Radio.tsx b/packages/react-component-library/src/components/Radio/Radio.tsx
index 719a990245..1c88fd2f34 100644
--- a/packages/react-component-library/src/components/Radio/Radio.tsx
+++ b/packages/react-component-library/src/components/Radio/Radio.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import { CheckboxRadioBase, CheckboxRadioBaseProps } from '../CheckboxRadioBase'
 import { StyledRadio } from './partials/StyledRadio'
 import { StyledCheckmark } from './partials/StyledCheckmark'
+import { StyledCheckmarkWrapper } from './partials/StyledCheckmarkWrapper'
 
 export type RadioProps = Omit<CheckboxRadioBaseProps, 'type' | 'partials'>
 
@@ -15,6 +16,7 @@ export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
         partials={{
           Root: StyledRadio,
           Checkmark: StyledCheckmark,
+          CheckmarkWrapper: StyledCheckmarkWrapper,
         }}
         {...props}
       />
diff --git a/packages/react-component-library/src/components/Radio/partials/StyledCheckmark.tsx b/packages/react-component-library/src/components/Radio/partials/StyledCheckmark.tsx
index 5920c0d664..f2e28bfd45 100644
--- a/packages/react-component-library/src/components/Radio/partials/StyledCheckmark.tsx
+++ b/packages/react-component-library/src/components/Radio/partials/StyledCheckmark.tsx
@@ -5,12 +5,11 @@ import { CheckmarkProps } from '../../CheckboxRadioBase'
 
 const { color } = selectors
 
-export const StyledCheckmark = styled.div<CheckmarkProps>`
-  position: absolute;
-  top: ${({ $hasContainer }) => ($hasContainer ? '13px' : '4px')};
-  left: ${({ $hasContainer }) => ($hasContainer ? '12px' : '4px')};
-  height: 16px;
-  width: 16px;
+export const StyledCheckmark = styled.span<CheckmarkProps>`
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
   border-radius: 999px;
   border: 1px solid
     ${({ $hasContainer, $isDisabled }) =>
diff --git a/packages/react-component-library/src/components/Radio/partials/StyledCheckmarkWrapper.tsx b/packages/react-component-library/src/components/Radio/partials/StyledCheckmarkWrapper.tsx
new file mode 100644
index 0000000000..8d275421b6
--- /dev/null
+++ b/packages/react-component-library/src/components/Radio/partials/StyledCheckmarkWrapper.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+import { CheckmarkWrapperProps } from '../../CheckboxRadioBase'
+
+export const StyledCheckmarkWrapper = styled.span<CheckmarkWrapperProps>`
+  display: block;
+  position: absolute;
+  top: ${({ $hasContainer }) => ($hasContainer ? '13px' : '4px')};
+  left: ${({ $hasContainer }) => ($hasContainer ? '12px' : '4px')};
+  height: 16px;
+  width: 16px;
+`