From 66fe84871ebc2f67d45d46e2aa6ac6553e2969a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Tue, 9 Jun 2020 19:03:27 +0200
Subject: [PATCH] Link <label for> to <input id>. Fixes #137

---
 client/patterns/custom-checkbox-button/Details.tsx | 2 ++
 client/patterns/custom-radio-button/Details.tsx    | 2 ++
 client/patterns/floating-label/Details.tsx         | 2 ++
 client/patterns/radio-button-group/Details.tsx     | 2 ++
 client/patterns/radio-switch/Details.tsx           | 4 ++++
 client/patterns/switch/Details.tsx                 | 2 ++
 6 files changed, 14 insertions(+)

diff --git a/client/patterns/custom-checkbox-button/Details.tsx b/client/patterns/custom-checkbox-button/Details.tsx
index 8a9c201..2a6fff4 100644
--- a/client/patterns/custom-checkbox-button/Details.tsx
+++ b/client/patterns/custom-checkbox-button/Details.tsx
@@ -24,6 +24,7 @@ const Details: React.FC<{}> = () => {
 
         return (
             <label
+                htmlFor="custom-checkbox-button"
                 style={{
                     alignItems: 'center',
                     cursor: 'pointer',
@@ -31,6 +32,7 @@ const Details: React.FC<{}> = () => {
                 }}
             >
                 <input
+                    id="custom-checkbox-button"
                     type="checkbox"
                     name="option"
                     value={value}
diff --git a/client/patterns/custom-radio-button/Details.tsx b/client/patterns/custom-radio-button/Details.tsx
index 7e4ffe7..c6fd167 100644
--- a/client/patterns/custom-radio-button/Details.tsx
+++ b/client/patterns/custom-radio-button/Details.tsx
@@ -24,6 +24,7 @@ const Details: React.FC<{}> = () => {
 
         return (
             <label
+                htmlFor="custom-radio-button"
                 style={{
                     alignItems: 'center',
                     cursor: 'pointer',
@@ -31,6 +32,7 @@ const Details: React.FC<{}> = () => {
                 }}
             >
                 <input
+                    id="custom-radio-button"
                     type="radio"
                     name="option"
                     value={value}
diff --git a/client/patterns/floating-label/Details.tsx b/client/patterns/floating-label/Details.tsx
index 2247987..03215d0 100644
--- a/client/patterns/floating-label/Details.tsx
+++ b/client/patterns/floating-label/Details.tsx
@@ -45,6 +45,7 @@ const Details: React.FC<{}> = () => {
                                 }}
                             >
                                 <input
+                                    id="floating-label-input"
                                     placeholder="Placeholder"
                                     type="text"
                                     style={{
@@ -54,6 +55,7 @@ const Details: React.FC<{}> = () => {
                                     }}
                                 />
                                 <label
+                                    htmlFor="floating-label-input"
                                     style={{
                                         left: '8px',
                                         padding: '0 8px',
diff --git a/client/patterns/radio-button-group/Details.tsx b/client/patterns/radio-button-group/Details.tsx
index a93bcb6..115d1c1 100644
--- a/client/patterns/radio-button-group/Details.tsx
+++ b/client/patterns/radio-button-group/Details.tsx
@@ -26,6 +26,7 @@ const Details: React.FC<{}> = () => {
 
         return (
             <label
+                htmlFor="radio-button-group"
                 style={{
                     alignItems: 'center',
                     backgroundColor: value === selectedValue ? '#00449E' : 'transparent',
@@ -35,6 +36,7 @@ const Details: React.FC<{}> = () => {
                 }}
             >
                 <input
+                    id="radio-button-group"
                     type="radio"
                     name="option"
                     value={value}
diff --git a/client/patterns/radio-switch/Details.tsx b/client/patterns/radio-switch/Details.tsx
index 5bb8983..e196a73 100644
--- a/client/patterns/radio-switch/Details.tsx
+++ b/client/patterns/radio-switch/Details.tsx
@@ -44,6 +44,7 @@ const Details: React.FC<{}> = () => {
                                 }}
                             >
                                 <label
+                                    htmlFor="radio-switch-first"
                                     style={{
                                         backgroundColor: isFirstChecked ? '#357EDD' : '',
                                         borderRadius: '9999px',
@@ -53,6 +54,7 @@ const Details: React.FC<{}> = () => {
                                     }}
                                 >
                                     <input
+                                        id="radio-switch-first"
                                         type="radio"
                                         style={{ display: 'none' }}
                                         checked={isFirstChecked}
@@ -68,6 +70,7 @@ const Details: React.FC<{}> = () => {
                                     />
                                 </label>
                                 <label
+                                    htmlFor="radio-switch-second"
                                     style={{
                                         backgroundColor: isFirstChecked ? '' : '#357EDD',
                                         borderRadius: '9999px',
@@ -77,6 +80,7 @@ const Details: React.FC<{}> = () => {
                                     }}
                                 >
                                     <input
+                                        id="radio-switch-second"
                                         type="radio"
                                         style={{ display: 'none' }}
                                         checked={!isFirstChecked}
diff --git a/client/patterns/switch/Details.tsx b/client/patterns/switch/Details.tsx
index 314071f..b50fa1e 100644
--- a/client/patterns/switch/Details.tsx
+++ b/client/patterns/switch/Details.tsx
@@ -39,6 +39,7 @@ const Details: React.FC<{}> = () => {
                             }}
                         >
                             <label
+                                htmlFor="checkbox-switch"
                                 style={{
                                     backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)',
                                     border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`,
@@ -50,6 +51,7 @@ const Details: React.FC<{}> = () => {
                                 }}
                             >
                                 <input
+                                    id="checkbox-switch"
                                     type="checkbox"
                                     style={{ display: 'none' }}
                                     checked={checked}