Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit ede894f

Browse filesBrowse files
woothuwoothu
committed
fix: CDataTable: add aria-label attributes to inputs
1 parent 2b1828c commit ede894f
Copy full SHA for ede894f

File tree

Expand file treeCollapse file tree

2 files changed

+18
-8
lines changed
Filter options
Expand file treeCollapse file tree

2 files changed

+18
-8
lines changed

‎src/components/table/CDataTable.vue

Copy file name to clipboardExpand all lines: src/components/table/CDataTable.vue
+6-6Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
@input="tableFilterChange($event.target.value, 'input')"
1414
@change="tableFilterChange($event.target.value, 'change')"
1515
:value="tableFilterState"
16+
aria-label="table filter input"
1617
>
1718
</div>
1819

@@ -26,6 +27,7 @@
2627
<select
2728
class="form-control"
2829
@change="paginationChange"
30+
aria-label="visible items amount change"
2931
>
3032
<option value="" selected disabled hidden>
3133
{{perPageItems}}
@@ -74,6 +76,7 @@
7476
width="18"
7577
:content="$options.icons.cilArrowTop"
7678
:class="iconClasses(index)"
79+
aria-label="change column sorting"
7780
/>
7881
</slot>
7982
</th>
@@ -90,6 +93,7 @@
9093
@input="columnFilterEvent(colName, $event.target.value, 'input')"
9194
@change="columnFilterEvent(colName, $event.target.value, 'change')"
9295
:value="columnFilterState[colName]"
96+
:aria-label="`column name: ${colName} filter input`"
9397
/>
9498
</slot>
9599
</th>
@@ -191,6 +195,7 @@
191195
</template>
192196
</tr>
193197
</tfoot>
198+
<slot name="footer" :itemsAmount="currentItems.length"/>
194199
<slot name="caption"/>
195200
</table>
196201

@@ -346,11 +351,6 @@ export default {
346351
})
347352
return items
348353
},
349-
filterableCols () {
350-
return this.rawColumnNames.filter(name => {
351-
return this.generatedColumnNames.includes(name)
352-
})
353-
},
354354
tableFiltered () {
355355
let items = this.columnFiltered
356356
if (!this.tableFilterState || (this.tableFilter && this.tableFilter.external)) {
@@ -359,7 +359,7 @@ export default {
359359
const filter = this.tableFilterState.toLowerCase()
360360
const hasFilter = (item) => String(item).toLowerCase().includes(filter)
361361
items = items.filter(item => {
362-
return this.filterableCols.filter(key => hasFilter(item[key])).length
362+
return this.rawColumnNames.filter(key => hasFilter(item[key])).length
363363
})
364364
return items
365365
},

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

Copy file name to clipboardExpand all lines: src/components/table/tests/__snapshots__/CDataTable.spec.js.snap
+12-2Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ exports[`CDataTable renders correctly 1`] = `
5252
</tbody>
5353
5454
<!---->
55-
55+
5656
</table>
5757
5858
<!---->
@@ -77,6 +77,7 @@ exports[`CDataTable renders correctly 2`] = `
7777
</label>
7878
7979
<input
80+
aria-label="table filter input"
8081
class="form-control"
8182
placeholder="type string..."
8283
type="text"
@@ -96,6 +97,7 @@ exports[`CDataTable renders correctly 2`] = `
9697
</label>
9798
9899
<select
100+
aria-label="visible items amount change"
99101
class="form-control"
100102
>
101103
<option
@@ -178,6 +180,7 @@ exports[`CDataTable renders correctly 2`] = `
178180
</div>
179181
180182
<svg
183+
aria-label="change column sorting"
181184
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position rotate-icon"
182185
role="img"
183186
viewBox="0 0 512 512"
@@ -200,6 +203,7 @@ exports[`CDataTable renders correctly 2`] = `
200203
</div>
201204
202205
<svg
206+
aria-label="change column sorting"
203207
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
204208
role="img"
205209
viewBox="0 0 512 512"
@@ -222,6 +226,7 @@ exports[`CDataTable renders correctly 2`] = `
222226
</div>
223227
224228
<svg
229+
aria-label="change column sorting"
225230
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
226231
role="img"
227232
viewBox="0 0 512 512"
@@ -244,6 +249,7 @@ exports[`CDataTable renders correctly 2`] = `
244249
</div>
245250
246251
<svg
252+
aria-label="change column sorting"
247253
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
248254
role="img"
249255
viewBox="0 0 512 512"
@@ -276,27 +282,31 @@ exports[`CDataTable renders correctly 2`] = `
276282
class="user-custom-class"
277283
>
278284
<input
285+
aria-label="column name: username filter input"
279286
class="form-control form-control-sm"
280287
/>
281288
</th>
282289
<th
283290
class=""
284291
>
285292
<input
293+
aria-label="column name: registered filter input"
286294
class="form-control form-control-sm"
287295
/>
288296
</th>
289297
<th
290298
class=""
291299
>
292300
<input
301+
aria-label="column name: role filter input"
293302
class="form-control form-control-sm"
294303
/>
295304
</th>
296305
<th
297306
class=""
298307
>
299308
<input
309+
aria-label="column name: status filter input"
300310
class="form-control form-control-sm"
301311
/>
302312
</th>
@@ -625,7 +635,7 @@ exports[`CDataTable renders correctly 2`] = `
625635
</th>
626636
</tr>
627637
</tfoot>
628-
638+
629639
</table>
630640
631641
<!---->

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.