add a label to the select all checkbox and to each of the items in th…

…e table to make the table more accessible
plone · Apr 8, 2020 · 777cc0c · 777cc0c
1 parent f7b7385
commit 777cc0c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/mockup/patterns/structure/templates/table.xml b/mockup/patterns/structure/templates/table.xml
@@ -18,7 +18,7 @@
        data-pat-datatables="<%- datatables_options %>">
   <thead>
     <tr>
-      <th class="selection"><input type="checkbox" class="select-all" /></th>
+      <th class="selection"><label for="selectAllInputCheckbox" class="hiddenStructure" aria-label="<%- _t('Select all') %>"><%- _t('Select all') %></label><input id="selectAllInputCheckbox" type="checkbox" class="select-all" /></th>
       <th class="title"><%- _t('Title') %></th>
       <% _.each(activeColumns, function(column){ %>
         <% if(column !== 'Description' && _.has(availableColumns, column)) { %>

diff --git a/mockup/patterns/structure/templates/tablerow.xml b/mockup/patterns/structure/templates/tablerow.xml
@@ -1,4 +1,4 @@
-<td class="selection" data-order="<%- attributes['_sort'] %>"><input type="checkbox" <% if(selected){ %> checked="checked" <% } %>/></td>
+<td class="selection" data-order="<%- attributes['_sort'] %>"><label for="select<%- attributes['_sort'] %>InputCheckbox" class="hiddenStructure" aria-label="<%- _t('Select') %>"><%- _t('Select') %></label><input id="select<%- attributes['_sort'] %>InputCheckbox" <% if(selected){ %> checked="checked" <% } %> type="checkbox"/></td>
 
 <td class="title">
   <div class="pull-left">

diff --git a/news/957.bugfix b/news/957.bugfix
@@ -0,0 +1,3 @@
+add a label to the select all checkbox and to each of the items in the table to make the table more accessible
+[erral & ionlizarazu]
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		add a label to the select all checkbox and to each of the items in the table to make the table more accessible
		[erral & ionlizarazu]