fix: CDataTable: add aria-label attributes to inputs

Author: woothu

src/components/table/CDataTable.vue

@@ -13,6 +13,7 @@
           @input="tableFilterChange($event.target.value, 'input')"
           @change="tableFilterChange($event.target.value, 'change')"
           :value="tableFilterState"
+          aria-label="table filter input"
         >
       </div>
 
@@ -26,6 +27,7 @@
           <select
             class="form-control"
             @change="paginationChange"
+            aria-label="visible items amount change"
           >
             <option value="" selected disabled hidden>
               {{perPageItems}}
@@ -74,6 +76,7 @@
                     width="18"
                     :content="$options.icons.cilArrowTop"
                     :class="iconClasses(index)"
+                    aria-label="change column sorting"
                   />
                 </slot>
               </th>
@@ -90,6 +93,7 @@
                     @input="columnFilterEvent(colName, $event.target.value, 'input')"
                     @change="columnFilterEvent(colName, $event.target.value, 'change')"
                     :value="columnFilterState[colName]"
+                    :aria-label="`column name: ${colName} filter input`"
                   />
                 </slot>
               </th>
@@ -191,6 +195,7 @@
             </template>
           </tr>
         </tfoot>
+        <slot name="footer" :itemsAmount="currentItems.length"/>
         <slot name="caption"/>
       </table>
 
@@ -346,11 +351,6 @@ export default {
       })
       return items
     },
-    filterableCols () {
-      return this.rawColumnNames.filter(name => {
-        return this.generatedColumnNames.includes(name)
-      })
-    },
     tableFiltered () {
       let items = this.columnFiltered
       if (!this.tableFilterState || (this.tableFilter && this.tableFilter.external)) {
@@ -359,7 +359,7 @@ export default {
       const filter = this.tableFilterState.toLowerCase()
       const hasFilter = (item) => String(item).toLowerCase().includes(filter)
       items = items.filter(item => {
-        return this.filterableCols.filter(key => hasFilter(item[key])).length
+        return this.rawColumnNames.filter(key => hasFilter(item[key])).length
       })
       return items
     },

src/components/table/tests/__snapshots__/CDataTable.spec.js.snap

@@ -52,7 +52,7 @@ exports[`CDataTable renders correctly 1`] = `
       </tbody>
        
       <!---->
-       
+        
     </table>
      
     <!---->
@@ -77,6 +77,7 @@ exports[`CDataTable renders correctly 2`] = `
       </label>
        
       <input
+        aria-label="table filter input"
         class="form-control"
         placeholder="type string..."
         type="text"
@@ -96,6 +97,7 @@ exports[`CDataTable renders correctly 2`] = `
         </label>
          
         <select
+          aria-label="visible items amount change"
           class="form-control"
         >
           <option
@@ -178,6 +180,7 @@ exports[`CDataTable renders correctly 2`] = `
             </div>
              
             <svg
+              aria-label="change column sorting"
               class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position rotate-icon"
               role="img"
               viewBox="0 0 512 512"
@@ -200,6 +203,7 @@ exports[`CDataTable renders correctly 2`] = `
             </div>
              
             <svg
+              aria-label="change column sorting"
               class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
               role="img"
               viewBox="0 0 512 512"
@@ -222,6 +226,7 @@ exports[`CDataTable renders correctly 2`] = `
             </div>
              
             <svg
+              aria-label="change column sorting"
               class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
               role="img"
               viewBox="0 0 512 512"
@@ -244,6 +249,7 @@ exports[`CDataTable renders correctly 2`] = `
             </div>
              
             <svg
+              aria-label="change column sorting"
               class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
               role="img"
               viewBox="0 0 512 512"
@@ -276,27 +282,31 @@ exports[`CDataTable renders correctly 2`] = `
             class="user-custom-class"
           >
             <input
+              aria-label="column name: username filter input"
               class="form-control form-control-sm"
             />
           </th>
           <th
             class=""
           >
             <input
+              aria-label="column name: registered filter input"
               class="form-control form-control-sm"
             />
           </th>
           <th
             class=""
           >
             <input
+              aria-label="column name: role filter input"
               class="form-control form-control-sm"
             />
           </th>
           <th
             class=""
           >
             <input
+              aria-label="column name: status filter input"
               class="form-control form-control-sm"
             />
           </th>
@@ -625,7 +635,7 @@ exports[`CDataTable renders correctly 2`] = `
           </th>
         </tr>
       </tfoot>
-       
+        
     </table>
      
     <!---->