Merge pull request #134 from BaptWaels/baptwaels_add_id_to_item_checkbox

Add id to Items' Checkboxes for a11y
kenshoo · Apr 11, 2019 · a035bf3 · a035bf3
2 parents aabee76 + 5bc91ae
commit a035bf3
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 0 deletions.
diff --git a/src/components/items/item.js b/src/components/items/item.js
@@ -28,6 +28,7 @@ const Item = ({
   >
     {!group && (
       <Checkbox
+        id={item.id ? `checkbox-${item.id}` : null}
         type="checkbox"
         color="primary"
         checked={checked}

diff --git a/tests/components/items/__snapshots__/item.spec.js.snap b/tests/components/items/__snapshots__/item.spec.js.snap
@@ -14,6 +14,7 @@ exports[`Item default snapshot 1`] = `
     checked={false}
     color="primary"
     disabled={false}
+    id={null}
     indeterminate={false}
     type="checkbox"
   />
@@ -37,6 +38,7 @@ exports[`Item snapshot with border 1`] = `
     checked={false}
     color="primary"
     disabled={false}
+    id={null}
     indeterminate={false}
     type="checkbox"
   />
@@ -60,6 +62,7 @@ exports[`Item snapshot with checked status 1`] = `
     checked={true}
     color="primary"
     disabled={false}
+    id={null}
     indeterminate={false}
     type="checkbox"
   />
@@ -83,6 +86,7 @@ exports[`Item snapshot with disabled 1`] = `
     checked={false}
     color="primary"
     disabled={true}
+    id={null}
     indeterminate={false}
     type="checkbox"
   />
@@ -122,6 +126,7 @@ exports[`Item snapshot with height 1`] = `
     checked={false}
     color="primary"
     disabled={false}
+    id={null}
     indeterminate={false}
     type="checkbox"
   />
@@ -145,6 +150,7 @@ exports[`Item snapshot with indeterminate and checked status 1`] = `
     checked={true}
     color="primary"
     disabled={false}
+    id={null}
     indeterminate={true}
     type="checkbox"
   />
@@ -168,6 +174,7 @@ exports[`Item snapshot with indeterminate status 1`] = `
     checked={false}
     color="primary"
     disabled={false}
+    id={null}
     indeterminate={true}
     type="checkbox"
   />
@@ -177,6 +184,30 @@ exports[`Item snapshot with indeterminate status 1`] = `
 </div>
 `;
 
+exports[`Item snapshot with item without id 1`] = `
+<div
+  className="item"
+  onClick={undefined}
+  style={
+    Object {
+      "height": 40,
+    }
+  }
+>
+  <WithStyles(Checkbox)
+    checked={false}
+    color="primary"
+    disabled={false}
+    id={null}
+    indeterminate={false}
+    type="checkbox"
+  />
+  <ItemLabel
+    label="Hi"
+  />
+</div>
+`;
+
 exports[`Item snapshot with valid item 1`] = `
 <div
   className="item"
@@ -191,6 +222,7 @@ exports[`Item snapshot with valid item 1`] = `
     checked={false}
     color="primary"
     disabled={false}
+    id="checkbox-1"
     indeterminate={false}
     type="checkbox"
   />

diff --git a/tests/components/items/item.spec.js b/tests/components/items/item.spec.js
@@ -19,6 +19,14 @@ describe("Item", () => {
     expect(tree).toMatchSnapshot();
   });
 
+  test("snapshot with item without id", () => {
+    const itemWithoutId = { label: "Hi" };
+
+    const renderer = new ShallowRenderer();
+    const tree = renderer.render(<Item item={itemWithoutId} />);
+    expect(tree).toMatchSnapshot();
+  });
+
   test("snapshot with checked status", () => {
     const renderer = new ShallowRenderer();
     const tree = renderer.render(<Item checked={true} />);