Merge pull request #134 from BaptWaels/baptwaels_add_id_to_item_checkbox

talyak · web-flow · commit a035bf3cc0f8 · 2019-04-11T13:51:49.000+03:00
Add id to Items' Checkboxes for a11y
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} />);

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,7 @@ const Item = ({`
`28`	`28`	`>`
`29`	`29`	`{!group && (`
`30`	`30`	`<Checkbox`
	`31`	+ id={item.id ? `checkbox-${item.id}` : null}
`31`	`32`	`type="checkbox"`
`32`	`33`	`color="primary"`
`33`	`34`	`checked={checked}`