ESLint: Re-enable rule control-has-associated-label (#10866)

* Re-enable rule control-has-associated-label

* Change aria-label message in DatasourceControl

Co-authored-by: Evan Rusackas <evan@preset.io>

Co-authored-by: Evan Rusackas <evan@preset.io>

superset-frontend/.eslintrc.js

@@ -83,7 +83,6 @@ module.exports = {
         'jsx-a11y/anchor-has-content': 0,
         'jsx-a11y/anchor-is-valid': 0, // disabled temporarily
         'jsx-a11y/click-events-have-key-events': 0, // re-enable up for discussion
-        'jsx-a11y/control-has-associated-label': 0, // disabled temporarily
         'jsx-a11y/mouse-events-have-key-events': 0, // re-enable up for discussion
         'lines-between-class-members': 0, // disabled temporarily
         'new-cap': 0,
@@ -198,7 +197,6 @@ module.exports = {
     'jsx-a11y/anchor-has-content': 0,
     'jsx-a11y/anchor-is-valid': 0, // disabled temporarily
     'jsx-a11y/click-events-have-key-events': 0, // re-enable up for discussion
-    'jsx-a11y/control-has-associated-label': 0, // disabled temporarily
     'jsx-a11y/mouse-events-have-key-events': 0, // re-enable up for discussion
     'lines-between-class-members': 0, // disabled temporarily
     'new-cap': 0,

superset-frontend/src/CRUD/CollectionTable.tsx

@@ -159,12 +159,14 @@ export default class CRUDCollection extends React.PureComponent<
     return (
       <thead>
         <tr>
-          {expandFieldset && <th className="tiny-cell" />}
+          {expandFieldset && <th aria-label="Expand" className="tiny-cell" />}
           {cols.map(col => (
             <th key={col}>{this.getLabel(col)}</th>
           ))}
           {extraButtons}
-          {allowDeletes && !allowAddItem && <th className="tiny-cell" />}
+          {allowDeletes && !allowAddItem && (
+            <th aria-label="Delete" className="tiny-cell" />
+          )}
           {allowAddItem && (
             <th>
               <Button buttonStyle="primary" onClick={this.onAddItem}>
@@ -206,6 +208,7 @@ export default class CRUDCollection extends React.PureComponent<
         <td key="__expand" className="expand">
           <i
             role="button"
+            aria-label="Toggle expand"
             tabIndex={0}
             className={`fa fa-caret-${
               isExpanded ? 'down' : 'right'
@@ -228,6 +231,7 @@ export default class CRUDCollection extends React.PureComponent<
         <td key="__actions">
           <i
             role="button"
+            aria-label="Delete item"
             tabIndex={0}
             className="fa fa-trash text-primary pointer"
             onClick={this.deleteItem.bind(this, record.id)}

superset-frontend/src/SqlLab/components/TableElement.jsx

@@ -213,6 +213,7 @@ class TableElement extends React.PureComponent {
           )}
           <i
             role="button"
+            aria-label="Toggle table"
             tabIndex={0}
             onClick={e => {
               this.toggleTable(e);

superset-frontend/src/components/Checkbox.tsx

@@ -29,6 +29,7 @@ export default function Checkbox({ checked, onChange, style }: CheckboxProps) {
     <span style={style}>
       <i
         role="button"
+        aria-label="Checkbox"
         tabIndex={0}
         className={`fa fa-check ${
           checked ? 'text-primary' : 'text-transparent'

superset-frontend/src/components/RefreshLabel.jsx

@@ -32,6 +32,7 @@ class RefreshLabel extends React.PureComponent {
     return (
       <TooltipWrapper tooltip={this.props.tooltipContent} label="cache-desc">
         <i
+          aria-label="Icon"
           role="button"
           tabIndex={0}
           className="RefreshLabel fa fa-refresh pointer"

superset-frontend/src/dashboard/components/FilterIndicatorTooltip.jsx

@@ -48,6 +48,7 @@ export default function FilterIndicatorTooltip({
 
       {clickIconHandler && (
         <i
+          aria-label="Icon"
           className="fa fa-pencil filter-edit"
           onClick={clickIconHandler}
           role="button"

superset-frontend/src/explore/components/AdhocFilterEditPopover.jsx

@@ -192,6 +192,7 @@ export default class AdhocFilterEditPopover extends React.Component {
             </Button>
             <i
               role="button"
+              aria-label="Resize"
               tabIndex={0}
               onMouseDown={this.onDragDown}
               className="fa fa-expand edit-popover-resize text-muted"

superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx

@@ -327,6 +327,7 @@ export default class AdhocMetricEditPopover extends React.Component {
             </Button>
             <i
               role="button"
+              aria-label="Resize"
               tabIndex={0}
               onMouseDown={this.onDragDown}
               className="fa fa-expand edit-popover-resize text-muted"

superset-frontend/src/explore/components/ControlPanelSection.jsx

@@ -67,6 +67,7 @@ export default class ControlPanelSection extends React.Component {
           </span>
           <i
             role="button"
+            aria-label="Toggle expand"
             tabIndex={0}
             className={`float-right fa-lg text-primary expander fa fa-angle-${
               this.state.expanded ? 'up' : 'down'

superset-frontend/src/explore/components/ControlPanelsContainer.jsx

@@ -200,6 +200,7 @@ class ControlPanelsContainer extends React.Component {
             {this.props.alert}
             <i
               role="button"
+              aria-label="Remove alert"
               tabIndex={0}
               className="fa fa-close pull-right"
               onClick={this.removeAlert}

superset-frontend/src/explore/components/SaveModal.jsx

@@ -135,6 +135,7 @@ class SaveModal extends React.Component {
               {this.state.alert ? this.state.alert : this.props.alert}
               <i
                 role="button"
+                aria-label="Remove alert"
                 tabIndex={0}
                 className="fa fa-close pull-right"
                 onClick={this.removeAlert.bind(this)}

superset-frontend/src/explore/components/controls/DatasourceControl.jsx

@@ -178,6 +178,7 @@ class DatasourceControl extends React.PureComponent {
             <a href="#">
               <i
                 role="button"
+                aria-label="Toggle datasource visibility"
                 tabIndex={0}
                 className={`fa fa-${
                   this.state.showDatasource ? 'minus' : 'plus'