fix(data-table): fixed accessibility issues with checkboxes (#265)

Author: marijohannessen

src/components/data-table/data-table.html

@@ -4,8 +4,8 @@
       <tr class="bx--table-row">
         <th class="bx--table-header"></th>
         <th class="bx--table-header bx--table-select">
-          <input data-event="select-all" id="bx--checkbox-1" class="bx--checkbox" type="checkbox" value="green" name="checkbox">
-          <label for="bx--checkbox-1" class="bx--checkbox-label">
+          <input data-event="select-all" id="bx--checkbox-1" class="bx--checkbox" type="checkbox" value="green" name="checkbox-1">
+          <label for="bx--checkbox-1" class="bx--checkbox-label" aria-label="Label name">
             <span class="bx--checkbox-appearance">
               <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                 <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
@@ -42,8 +42,8 @@
           </svg>
         </td>
         <td class="bx--table-select">
-          <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox">
-          <label for="bx--checkbox-2" class="bx--checkbox-label">
+          <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-2">
+          <label for="bx--checkbox-2" class="bx--checkbox-label" aria-label="Label name">
             <span class="bx--checkbox-appearance">
               <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                 <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
@@ -98,8 +98,8 @@ <h4><strong>Harry Potter</strong></h4>
           </svg>
         </td>
         <td class="bx--table-select">
-          <input id="bx--checkbox-3" class="bx--checkbox" type="checkbox" value="green" name="checkbox">
-          <label for="bx--checkbox-3" class="bx--checkbox-label">
+          <input id="bx--checkbox-3" class="bx--checkbox" type="checkbox" value="green" name="checkbox-3">
+          <label for="bx--checkbox-3" class="bx--checkbox-label" aria-label="Label name">
             <span class="bx--checkbox-appearance">
               <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                 <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
@@ -175,8 +175,8 @@ <h4><strong>Harry Potter</strong></h4>
           </svg>
         </td>
         <td class="bx--table-select">
-          <input id="bx--checkbox-4" class="bx--checkbox" type="checkbox" value="green" name="checkbox">
-          <label for="bx--checkbox-4" class="bx--checkbox-label">
+          <input id="bx--checkbox-4" class="bx--checkbox" type="checkbox" value="green" name="checkbox-4">
+          <label for="bx--checkbox-4" class="bx--checkbox-label" aria-label="Label name">
             <span class="bx--checkbox-appearance">
               <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                 <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
@@ -226,8 +226,8 @@ <h4><strong>Harry Potter</strong></h4>
           </svg>
         </td>
         <td class="bx--table-select">
-          <input id="bx--checkbox-5" class="bx--checkbox" type="checkbox" value="green" name="checkbox">
-          <label for="bx--checkbox-5" class="bx--checkbox-label">
+          <input id="bx--checkbox-5" class="bx--checkbox" type="checkbox" value="green" name="checkbox-5">
+          <label for="bx--checkbox-5" class="bx--checkbox-label" aria-label="Label name">
             <span class="bx--checkbox-appearance">
               <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                 <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
@@ -277,8 +277,8 @@ <h4><strong>Harry Potter</strong></h4>
           </svg>
         </td>
         <td class="bx--table-select">
-          <input id="bx--checkbox-6" class="bx--checkbox" type="checkbox" value="green" name="checkbox">
-          <label for="bx--checkbox-6" class="bx--checkbox-label">
+          <input id="bx--checkbox-6" class="bx--checkbox" type="checkbox" value="green" name="checkbox-6">
+          <label for="bx--checkbox-6" class="bx--checkbox-label" aria-label="Label name">
             <span class="bx--checkbox-appearance">
               <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                 <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
@@ -328,8 +328,8 @@ <h4><strong>Harry Potter</strong></h4>
           </svg>
         </td>
         <td class="bx--table-select">
-          <input id="bx--checkbox-7" class="bx--checkbox" type="checkbox" value="green" name="checkbox">
-          <label for="bx--checkbox-7" class="bx--checkbox-label">
+          <input id="bx--checkbox-7" class="bx--checkbox" type="checkbox" value="green" name="checkbox-7">
+          <label for="bx--checkbox-7" class="bx--checkbox-label" aria-label="Label name">
             <span class="bx--checkbox-appearance">
               <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                 <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
@@ -379,8 +379,8 @@ <h4><strong>Harry Potter</strong></h4>
           </svg>
         </td>
         <td class="bx--table-select">
-          <input id="bx--checkbox-8" class="bx--checkbox" type="checkbox" value="green" name="checkbox">
-          <label for="bx--checkbox-8" class="bx--checkbox-label">
+          <input id="bx--checkbox-8" class="bx--checkbox" type="checkbox" value="green" name="checkbox-8">
+          <label for="bx--checkbox-8" class="bx--checkbox-label" aria-label="Label name">
             <span class="bx--checkbox-appearance">
               <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                 <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
@@ -430,8 +430,8 @@ <h4><strong>Harry Potter</strong></h4>
           </svg>
         </td>
         <td class="bx--table-select">
-          <input id="bx--checkbox-9" class="bx--checkbox" type="checkbox" value="green" name="checkbox">
-          <label for="bx--checkbox-9" class="bx--checkbox-label">
+          <input id="bx--checkbox-9" class="bx--checkbox" type="checkbox" value="green" name="checkbox-9">
+          <label for="bx--checkbox-9" class="bx--checkbox-label" aria-label="Label name">
             <span class="bx--checkbox-appearance">
               <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                 <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>