fix(react): remove unnecessary input and adjust role (#12301)

* fix(react): remove unnecessary input and adjust role * chore(react): fix tests Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 14, 2022 · 6f7797f · 6f7797f
1 parent 6d90078
commit 6f7797f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 33 deletions.
diff --git a/e2e/components/Tile/Tile-test.e2e.js b/e2e/components/Tile/Tile-test.e2e.js
@@ -114,4 +114,15 @@ test.describe('Tile', () => {
     });
     await expect(page).toHaveNoACViolations('Tile');
   });
+
+  test('accessibility-checker selectable tile @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'SelectableTile',
+      id: 'components-tile--selectable',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('SelectableTile');
+  });
 });
diff --git a/packages/react/src/components/Tile/next/Tile.js b/packages/react/src/components/Tile/next/Tile.js
@@ -196,9 +196,6 @@ export const SelectableTile = React.forwardRef(function SelectableTile(
     },
     className
   );
-  const inputClasses = cx(`${prefix}--tile-input`, {
-    [`${prefix}--tile-input--checked`]: isSelected,
-  });
 
   // TODO: rename to handleClick when handleClick prop is deprecated
   function handleOnClick(evt) {
@@ -231,36 +228,30 @@ export const SelectableTile = React.forwardRef(function SelectableTile(
   }
 
   return (
-    <>
-      <input
-        checked={isSelected}
-        className={inputClasses}
-        disabled={disabled}
-        id={id}
-        name={name}
-        onChange={!disabled ? handleChange : null}
-        ref={ref}
-        tabIndex={-1}
-        title={title}
-        type="checkbox"
-        value={value}
-      />
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-      <label
-        className={classes}
-        htmlFor={id}
-        onClick={!disabled ? handleOnClick : null}
-        onKeyDown={!disabled ? handleOnKeyDown : null}
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={!disabled ? tabIndex : null}
-        {...rest}>
-        <span
-          className={`${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`}>
-          {isSelected ? <CheckboxCheckedFilled /> : <Checkbox />}
-        </span>
-        <span className={`${prefix}--tile-content`}>{children}</span>
+    <div
+      className={classes}
+      onClick={!disabled ? handleOnClick : null}
+      role="checkbox"
+      aria-checked={isSelected}
+      disabled={disabled}
+      onKeyDown={!disabled ? handleOnKeyDown : null}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex={!disabled ? tabIndex : null}
+      value={value}
+      name={name}
+      ref={ref}
+      id={id}
+      onChange={!disabled ? handleChange : null}
+      title={title}
+      {...rest}>
+      <span
+        className={`${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`}>
+        {isSelected ? <CheckboxCheckedFilled /> : <Checkbox />}
+      </span>
+      <label htmlFor={id} className={`${prefix}--tile-content`}>
+        {children}
       </label>
-    </>
+    </div>
   );
 });
 

diff --git a/packages/react/src/components/Tile/next/Tile.stories.js b/packages/react/src/components/Tile/next/Tile.stories.js
@@ -119,7 +119,7 @@ export const ClickableWithLayer = () => {
 
 export const Selectable = () => {
   return (
-    <SelectableTile id="tile-1" name="tiles">
+    <SelectableTile id="tile-1" name="tiles" value="selectable">
       Selectable
     </SelectableTile>
   );