Adding scope to all table headers, fix elastic#12401 (elastic#15079)

* Add scope for all th in Kibana * Add scope to <th> in ui framework * Update jest snapshots with scope * Fix wrong usage of colgroup
timroes · Nov 21, 2017 · 5d7d9c4 · 5d7d9c4
1 parent 425239e
commit 5d7d9c4
Show file tree

Hide file tree

Showing 26 changed files with 75 additions and 56 deletions.
diff --git a/src/core_plugins/dev_mode/public/vis_debug_spy_panel.html b/src/core_plugins/dev_mode/public/vis_debug_spy_panel.html
@@ -13,15 +13,15 @@
         <label>Details</label>
         <table class="table">
           <tr>
-            <th>
+            <th scope="row">
               Type Name
             </th>
             <td>
               {{vis.type.name}}
             </td>
           </tr>
           <tr>
-            <th>
+            <th scope="row">
               Hierarchical Data
             </th>
             <td>
@@ -32,4 +32,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
@@ -109,10 +109,10 @@
       <div class="kuiSideBarSection">
         <table class="vis-editor-agg-editor-ranges form-group" ng-show="vis.params.gauge.colorsRange.length">
           <tr>
-            <th>
+            <th scope="col">
               <label id="gaugeOptionsCustomRangeFrom">From</label>
             </th>
-            <th colspan="2">
+            <th scope="col" colspan="2">
               <label id="gaugeOptionsCustomRangeTo">To</label>
             </th>
           </tr>

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html
@@ -116,10 +116,10 @@
       <div class="kuiSideBarSection">
         <table class="vis-editor-agg-editor-ranges form-group" ng-show="vis.params.colorsRange.length">
           <tr>
-            <th>
+            <th scope="col">
               <label id="heatmapCustomRangeFrom">From</label>
             </th>
-            <th colspan="2">
+            <th scope="col" colspan="2">
               <label id="heatmapCustomRangeTo">To</label>
             </th>
           </tr>

diff --git a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
@@ -128,7 +128,11 @@
     <table class="kuiTable" ng-if="listingController.items.length">
       <thead>
         <tr>
-          <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox" ng-if="!listingController.hideWriteControls">
+          <th
+            class="kuiTableHeaderCell kuiTableHeaderCell--checkBox"
+            ng-if="!listingController.hideWriteControls"
+            scope="col"
+          >
             <div class="kuiTableHeaderCell__liner">
               <input
                 type="checkbox"
@@ -140,7 +144,7 @@
             </div>
           </th>
 
-          <th class="kuiTableHeaderCell">
+          <th scope="col" class="kuiTableHeaderCell">
             <button
               class="kuiTableHeaderCellButton"
               ng-class="{'kuiTableHeaderCellButton-isSorted': listingController.getSortedProperty().name == 'title'}"
@@ -157,7 +161,7 @@
             </button>
           </th>
 
-          <th class="kuiTableHeaderCell">
+          <th scope="col" class="kuiTableHeaderCell">
             <button
               class="kuiTableHeaderCellButton"
               ng-class="{'kuiTableHeaderCellButton-isSorted': listingController.getSortedProperty().name == 'description'}"

diff --git a/src/core_plugins/kibana/public/management/sections/objects/_objects.html b/src/core_plugins/kibana/public/management/sections/objects/_objects.html
@@ -131,7 +131,7 @@ <h1 class="kuiTitle">
       <table class="kuiTable" ng-if="service.data.length" data-test-subj="objectsTable-{{service.title}}">
         <thead>
           <tr>
-            <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
+            <th scope="col" class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
               <div class="kuiTableHeaderCell__liner">
                 <input
                   type="checkbox"
@@ -144,7 +144,7 @@ <h1 class="kuiTitle">
               </div>
             </th>
 
-            <th class="kuiTableHeaderCell">
+            <th scope="col" class="kuiTableHeaderCell">
               <div class="kuiTableHeaderCell__liner">
                 Title
               </div>

diff --git a/src/core_plugins/kibana/public/management/sections/settings/index.html b/src/core_plugins/kibana/public/management/sections/settings/index.html
@@ -43,17 +43,18 @@
     <table class="kuiTable kuiVerticalRhythm">
       <thead>
         <tr>
-          <th class="kuiTableHeaderCell">
+          <th scope="col" class="kuiTableHeaderCell">
             <div class="kuiTableRowCell__liner">
               Name
             </div>
           </th>
-          <th class="kuiTableHeaderCell">
+          <th scope="col" class="kuiTableHeaderCell">
             <div class="kuiTableRowCell__liner">
               Value
             </div>
           </th>
           <th
+            scope="col"
             class="kuiTableHeaderCell kuiTableHeaderCell--alignRight"
             style="width: 180px"
           >

diff --git a/src/core_plugins/metrics/public/components/markdown_editor.js b/src/core_plugins/metrics/public/components/markdown_editor.js
@@ -115,8 +115,8 @@ class MarkdownEditor extends Component {
           <table className="table">
             <thead>
               <tr>
-                <th>Name</th>
-                <th>Value</th>
+                <th scope="col">Name</th>
+                <th scope="col">Value</th>
               </tr>
             </thead>
             <tbody>{rows}</tbody>

diff --git a/src/core_plugins/metrics/public/components/vis_types/table/vis.js b/src/core_plugins/metrics/public/components/vis_types/table/vis.js
@@ -111,6 +111,7 @@ class TableVis extends Component {
           className="tsvb-table__columnName"
           onClick={handleClick}
           key={item.id}
+          scope="col"
         >
           {headerContent}
         </th>
@@ -137,7 +138,7 @@ class TableVis extends Component {
     };
     return (
       <tr>
-        <th onClick={handleSortClick}>{label} {sortComponent}</th>
+        <th scope="col" onClick={handleSortClick}>{label} {sortComponent}</th>
         { columns }
       </tr>
     );

diff --git a/src/core_plugins/status_page/public/status_page.html b/src/core_plugins/status_page/public/status_page.html
@@ -28,8 +28,8 @@ <h4 ng-if="!ui.statuses && !ui.loading" class="statuses_missing">
 
     <table class="statuses" data-test-subj="statusBreakdown" ng-if="ui.statuses">
       <tr class="row">
-        <th class="col-xs-4">ID</th>
-        <th class="col-xs-8">Status</th>
+        <th class="col-xs-4" scope="col">ID</th>
+        <th class="col-xs-8" scope="col">Status</th>
       </tr>
       <tr
         ng-repeat="status in ui.statuses"

diff --git a/...on/public/directives/timelion_expression_suggestions/timelion_expression_suggestions.html b/...on/public/directives/timelion_expression_suggestions/timelion_expression_suggestions.html
@@ -43,9 +43,9 @@ <h4>
           <div class="suggestion-details" ng-show="suggestions.length === 1">
             <table class="table table-striped table-condensed table-bordered">
             <thead>
-              <th>Argument Name</th>
-              <th>Accepted Types</th>
-              <th>Information</th>
+              <th scope="col">Argument Name</th>
+              <th scope="col">Accepted Types</th>
+              <th scope="col">Information</th>
             </thead>
             <tr ng-repeat="arg in suggestion.args" ng-hide="$index < 1 && suggestion.chainable">
               <td>{{arg.name}}</td>

diff --git a/src/core_plugins/timelion/public/directives/timelion_help/timelion_help.html b/src/core_plugins/timelion/public/directives/timelion_help/timelion_help.html
@@ -409,9 +409,9 @@ <h2 class="kuiLocalDropdownTitle">
                     ng-show="function.args.length > (function.chainable ? 1: 0)"
                   >
                     <thead>
-                      <th>Argument Name</th>
-                      <th>Accepted Types</th>
-                      <th>Information</th>
+                      <th scope="col">Argument Name</th>
+                      <th scope="col">Accepted Types</th>
+                      <th scope="col">Information</th>
                     </thead>
                     <tr
                       ng-repeat="arg in function.args"

diff --git a/src/ui/public/agg_response/hierarchical/_tooltip.html b/src/ui/public/agg_response/hierarchical/_tooltip.html
@@ -1,9 +1,9 @@
 <table>
   <thead>
     <tr class="tooltip-label">
-      <th>field</th>
-      <th>value</th>
-      <th>{{metricCol.label}}</th>
+      <th scope="col">field</th>
+      <th scope="col">value</th>
+      <th scope="col">{{metricCol.label}}</th>
     </tr>
   </thead>
   <tbody>

diff --git a/src/ui/public/agg_table/agg_table_group.html b/src/ui/public/agg_table/agg_table_group.html
@@ -1,7 +1,7 @@
 <table ng-if="rows" class="table agg-table-group" ng-repeat="table in rows">
   <thead>
     <tr>
-      <th ng-if="table.tables">
+      <th ng-if="table.tables" scope="col">
         <span class="agg-table-group-header">{{ table.title }}</span>
       </th>
     </tr>
@@ -33,7 +33,7 @@
 <table ng-if="columns" class="table agg-table-group">
   <thead>
     <tr>
-      <th ng-repeat="table in columns" ng-if="table.tables">
+      <th ng-repeat="table in columns" ng-if="table.tables" scope="col">
         <span class="agg-table-group-header">{{ table.title }}</span>
       </th>
     </tr>

diff --git a/src/ui/public/agg_types/controls/date_ranges.html b/src/ui/public/agg_types/controls/date_ranges.html
@@ -1,10 +1,10 @@
 <div>
     <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.length">
       <tr>
-        <th>
+        <th scope="col">
           <label id="visEditorDateRangeFrom{{agg.id}}">From</label>
         </th>
-        <th colspan="2">
+        <th scope="col" colspan="2">
           <label id="visEditorDateRangeTo{{agg.id}}">To</label>
         </th>
       </tr>

diff --git a/src/ui/public/agg_types/controls/ip_ranges.html b/src/ui/public/agg_types/controls/ip_ranges.html
@@ -7,10 +7,10 @@
   <div ng-show="agg.params.ipRangeType != 'mask'">
     <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.fromTo.length">
       <tr>
-        <th>
+        <th scope="col">
           <label id="visEditorIpRangeFromLabel{{agg.id}}">From</label>
         </th>
-        <th colspan="2">
+        <th scope="col" colspan="2">
           <label id="visEditorIpRangeToLabel{{agg.id}}">To</label>
         </th>
       </tr>
@@ -65,7 +65,7 @@
   <div ng-show="agg.params.ipRangeType == 'mask'">
     <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.mask.length">
       <tr>
-        <th>
+        <th scope="col">
           <label id="visEditorIpRangeCidrLabel{{agg.id}}">CIDR Mask</label>
         </th>
       </tr>

diff --git a/src/ui/public/agg_types/controls/ranges.html b/src/ui/public/agg_types/controls/ranges.html
@@ -1,9 +1,9 @@
 <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.length">
   <tr>
-    <th>
+    <th scope="col">
       <label id="visEditorRangeFrom{{agg.id}}">From</label>
     </th>
-    <th colspan="2">
+    <th scope="col" colspan="2">
       <label id="visEditorRangeTo{{agg.id}}">To</label>
     </th>
   </tr>

diff --git a/src/ui/public/field_editor/field_editor.html b/src/ui/public/field_editor/field_editor.html
@@ -241,8 +241,8 @@ <h4>
       The type of this field changes across indices. It is unavailable for many analysis functions. The indices per type are as follows:
       <table class="table">
       <thead>
-        <th> Field Type </th>
-        <th> Index Names </th>
+        <th scope="col"> Field Type </th>
+        <th scope="col"> Index Names </th>
       </thead>
       <tbody>
       <tr ng-repeat="(type, indices) in editor.field.conflictDescriptions">

diff --git a/src/ui/public/field_format_editor/editors/url/url.html b/src/ui/public/field_format_editor/editors/url/url.html
@@ -15,7 +15,7 @@
       type="checkbox"
       ng-model="editor.formatParams.openLinkInCurrentTab"
     ></input>
-    
+
     <span class="kuiCheckBoxLabel__text">
       Open link in current tab
     </span>
@@ -50,9 +50,9 @@ <h4 class="hintbox-heading">
       <caption>Examples</caption>
       <thead>
         <tr>
-          <th>Value</th>
-          <th>Template</th>
-          <th>Result</th>
+          <th scope="col">Value</th>
+          <th scope="col">Template</th>
+          <th scope="col">Result</th>
         </tr>
       </thead>
       <tbody>
@@ -110,10 +110,10 @@ <h4 class="hintbox-heading">
       <caption>Examples</caption>
       <thead>
         <tr>
-          <th>Value</th>
-          <th>Url Template</th>
-          <th>Label Template</th>
-          <th>Result</th>
+          <th scope="col">Value</th>
+          <th scope="col">Url Template</th>
+          <th scope="col">Label Template</th>
+          <th scope="col">Result</th>
         </tr>
       </thead>
       <tbody>

diff --git a/src/ui/public/field_format_editor/samples/samples.html b/src/ui/public/field_format_editor/samples/samples.html
@@ -14,10 +14,10 @@ <h4 class="hintbox-heading">
   <table class="table">
     <thead>
       <tr>
-        <th>
+        <th scope="col">
           Input
         </th>
-        <th>
+        <th scope="col">
           Formatted
         </th>
       </tr>

diff --git a/src/ui/public/paginated_table/paginated_table.html b/src/ui/public/paginated_table/paginated_table.html
@@ -8,6 +8,7 @@
       <thead data-test-subj="paginated-table-header">
         <tr>
           <th
+            scope="col"
             ng-repeat="col in columns"
             ng-click="paginatedTable.sortColumn($index)"
             kbn-accessible-click
@@ -35,7 +36,7 @@
       </tbody>
       <tfoot ng-if="showTotal">
         <tr>
-          <th ng-repeat="col in columns" class="numeric-value">{{col.total}}</th>
+          <th scope="col" ng-repeat="col in columns" class="numeric-value">{{col.total}}</th>
         </tr>
       </tfoot>
     </table>

diff --git a/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox_content.js b/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox_content.js
@@ -77,19 +77,19 @@ export default () => {
             <table className="kuiTable">
               <thead>
                 <tr>
-                  <th className="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
+                  <th scope="col" className="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
                     <input type="checkbox" className="kuiCheckBox"/>
                   </th>
-                  <th className="kuiTableHeaderCell">
+                  <th scope="col" className="kuiTableHeaderCell">
                     Title
                   </th>
-                  <th className="kuiTableHeaderCell">
+                  <th scope="col" className="kuiTableHeaderCell">
                     Status
                   </th>
-                  <th className="kuiTableHeaderCell">
+                  <th scope="col" className="kuiTableHeaderCell">
                     Date created
                   </th>
-                  <th className="kuiTableHeaderCell kuiTableHeaderCell--alignRight">
+                  <th scope="col" className="kuiTableHeaderCell kuiTableHeaderCell--alignRight">
                     Orders of magnitude
                   </th>
                 </tr>

diff --git a/ui_framework/src/components/table/__snapshots__/table.test.js.snap b/ui_framework/src/components/table/__snapshots__/table.test.js.snap
@@ -10,6 +10,7 @@ exports[`renders KuiTable 1`] = `
     <tr>
       <th
         class="kuiTableHeaderCell"
+        scope="col"
       >
         <div
           class="kuiTableHeaderCell__liner"
@@ -19,6 +20,7 @@ exports[`renders KuiTable 1`] = `
       </th>
       <th
         class="kuiTableHeaderCell"
+        scope="col"
       >
         <div
           class="kuiTableHeaderCell__liner"

diff --git a/ui_framework/src/components/table/__snapshots__/table_header_cell.test.js.snap b/ui_framework/src/components/table/__snapshots__/table_header_cell.test.js.snap
@@ -5,6 +5,7 @@ exports[`renders KuiTableHeaderCell 1`] = `
   aria-label="aria-label"
   class="kuiTableHeaderCell testClass1 testClass2"
   data-test-subj="test subject string"
+  scope="col"
 >
   <div
     class="kuiTableHeaderCell__liner"

diff --git a/ui_framework/src/components/table/__snapshots__/table_header_check_box_cell.test.js.snap b/ui_framework/src/components/table/__snapshots__/table_header_check_box_cell.test.js.snap
@@ -5,6 +5,7 @@ exports[`renders KuiTableHeaderCheckBoxCell 1`] = `
   aria-label="aria-label"
   class="kuiTableHeaderCell kuiTableHeaderCell--checkBox testClass1 testClass2"
   data-test-subj="test subject string"
+  scope="col"
 >
   <div
     class="kuiTableHeaderCell__liner"