chore: enable no-static-element-interactions eslint rule (#10351)

2020-07-17 09:19:16 -07:00 · 2020-07-17 09:19:16 -07:00 · 5984df3522
parent aaad4522f0
commit 5984df3522
16 changed files with 43 additions and 6 deletions
--- a/superset-frontend/.eslintrc.js
+++ b/superset-frontend/.eslintrc.js
@ -76,7 +76,6 @@ module.exports = {
        indent: 0,
        'jsx-a11y/anchor-has-content': 0,
        'jsx-a11y/href-no-hash': 0,
-        'jsx-a11y/no-static-element-interactions': 0,
        'new-cap': 0,
        'no-bitwise': 0,
        'no-confusing-arrow': 0,
@ -136,7 +135,6 @@ module.exports = {
    indent: 0,
    'jsx-a11y/anchor-has-content': 0,
    'jsx-a11y/href-no-hash': 0,
-    'jsx-a11y/no-static-element-interactions': 0,
    'new-cap': 0,
    'no-bitwise': 0,
    'no-confusing-arrow': 0,
--- a/superset-frontend/src/CRUD/CollectionTable.jsx
+++ b/superset-frontend/src/CRUD/CollectionTable.jsx
@ -183,6 +183,8 @@ export default class CRUDCollection extends React.PureComponent {
      tds.push(
        <td key="__expand" className="expand">
          <i
+            role="button"
+            tabIndex={0}
            className={`fa fa-caret-${
              isExpanded ? 'down' : 'right'
            } text-primary pointer`}
@ -200,6 +202,8 @@ export default class CRUDCollection extends React.PureComponent {
      tds.push(
        <td key="__actions">
          <i
+            role="button"
+            tabIndex={0}
            className="fa fa-close text-primary pointer"
            onClick={this.deleteItem.bind(this, record.id)}
          />
--- a/superset-frontend/src/SqlLab/components/TableElement.jsx
+++ b/superset-frontend/src/SqlLab/components/TableElement.jsx
@ -212,6 +212,8 @@ class TableElement extends React.PureComponent {
            <Fade in={this.state.hovered}>{this.renderControls()}</Fade>
          )}
          <i
+            role="button"
+            tabIndex={0}
            onClick={e => {
              this.toggleTable(e);
            }}
--- a/superset-frontend/src/components/Checkbox.jsx
+++ b/superset-frontend/src/components/Checkbox.jsx
@ -29,6 +29,8 @@ export default function Checkbox({ checked, onChange, style }) {
  return (
    <span style={style}>
      <i
+        role="button"
+        tabIndex={0}
        className={`fa fa-check ${
          checked ? 'text-primary' : 'text-transparent'
        }`}
--- a/superset-frontend/src/components/CopyToClipboard.jsx
+++ b/superset-frontend/src/components/CopyToClipboard.jsx
@ -95,7 +95,9 @@ export default class CopyToClipboard extends React.Component {
        throw new Error(t('Not successful'));
      }
    } catch (err) {
-      window.alert(t('Sorry, your browser does not support copying. Use Ctrl / Cmd + C!')); // eslint-disable-line
+      window.alert(
+        t('Sorry, your browser does not support copying. Use Ctrl / Cmd + C!'),
+      ); // eslint-disable-line
    }

    document.body.removeChild(span);
@ -164,7 +166,12 @@ export default class CopyToClipboard extends React.Component {
        trigger={['hover']}
      >
        <MenuItem>
-          <span onClick={this.onClick} onMouseOut={this.onMouseOut}>
+          <span
+            role="button"
+            tabIndex={0}
+            onClick={this.onClick}
+            onMouseOut={this.onMouseOut}
+          >
            {this.props.copyNode}
          </span>
        </MenuItem>
--- a/superset-frontend/src/components/PopoverSection.jsx
+++ b/superset-frontend/src/components/PopoverSection.jsx
@ -37,7 +37,7 @@ export default function PopoverSection({
 }) {
  return (
    <div className={`PopoverSection ${!isSelected ? 'dimmed' : ''}`}>
-      <div onClick={onSelect} className="pointer">
+      <div role="button" tabIndex={0} onClick={onSelect} className="pointer">
        <strong>{title}</strong> &nbsp;
        {info && (
          <InfoTooltipWithTrigger tooltip={info} label="date-free-tooltip" />
--- a/superset-frontend/src/components/RefreshLabel.jsx
+++ b/superset-frontend/src/components/RefreshLabel.jsx
@ -32,6 +32,8 @@ class RefreshLabel extends React.PureComponent {
    return (
      <TooltipWrapper tooltip={this.props.tooltipContent} label="cache-desc">
        <i
+          role="button"
+          tabIndex={0}
          className="RefreshLabel fa fa-refresh pointer"
          onClick={this.props.onClick}
        />
--- a/superset-frontend/src/explore/components/AdhocFilterEditPopover.jsx
+++ b/superset-frontend/src/explore/components/AdhocFilterEditPopover.jsx
@ -183,6 +183,8 @@ export default class AdhocFilterEditPopover extends React.Component {
            Close
          </Button>
          <i
+            role="button"
+            tabIndex={0}
            onMouseDown={this.onDragDown}
            className="fa fa-expand edit-popover-resize text-muted"
          />
--- a/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx
+++ b/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx
@ -317,6 +317,8 @@ export default class AdhocMetricEditPopover extends React.Component {
            Close
          </Button>
          <i
+            role="button"
+            tabIndex={0}
            onMouseDown={this.onDragDown}
            className="fa fa-expand edit-popover-resize text-muted"
          />
--- a/superset-frontend/src/explore/components/ControlHeader.jsx
+++ b/superset-frontend/src/explore/components/ControlHeader.jsx
@ -86,6 +86,8 @@ export default class ControlHeader extends React.Component {
          <ControlLabel>
            {this.props.leftNode && <span>{this.props.leftNode}</span>}
            <span
+              role="button"
+              tabIndex={0}
              onClick={this.props.onClick}
              className={labelClass}
              style={{ cursor: this.props.onClick ? 'pointer' : '' }}
--- a/superset-frontend/src/explore/components/ControlPanelSection.jsx
+++ b/superset-frontend/src/explore/components/ControlPanelSection.jsx
@ -51,7 +51,9 @@ export default class ControlPanelSection extends React.Component {
      label && (
        <div>
          <span>
-            <span onClick={this.toggleExpand}>{label}</span>{' '}
+            <span role="button" tabIndex={0} onClick={this.toggleExpand}>
+              {label}
+            </span>{' '}
            {description && (
              <InfoTooltipWithTrigger label={label} tooltip={description} />
            )}
@ -64,6 +66,8 @@ export default class ControlPanelSection extends React.Component {
            )}
          </span>
          <i
+            role="button"
+            tabIndex={0}
            className={`float-right fa-lg text-primary expander fa fa-angle-${
              this.state.expanded ? 'up' : 'down'
            }`}
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.jsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.jsx
@ -176,6 +176,8 @@ class ControlPanelsContainer extends React.Component {
            <Alert bsStyle="warning">
              {this.props.alert}
              <i
+                role="button"
+                tabIndex={0}
                className="fa fa-close pull-right"
                onClick={this.removeAlert}
                style={{ cursor: 'pointer' }}
--- a/superset-frontend/src/explore/components/ExploreActionButtons.jsx
+++ b/superset-frontend/src/explore/components/ExploreActionButtons.jsx
@ -76,6 +76,8 @@ export default function ExploreActionButtons({

      {latestQueryFormData && (
        <a
+          role="button"
+          tabIndex={0}
          onClick={doExportChart}
          className="btn btn-default btn-sm"
          title={t('Export to .json')}
@ -87,6 +89,8 @@ export default function ExploreActionButtons({
      )}
      {latestQueryFormData && (
        <a
+          role="button"
+          tabIndex={0}
          onClick={doExportCSV}
          className={exportToCSVClasses}
          title={t('Export to .csv format')}
--- a/superset-frontend/src/explore/components/SaveModal.jsx
+++ b/superset-frontend/src/explore/components/SaveModal.jsx
@ -176,6 +176,8 @@ class SaveModal extends React.Component {
            <Alert>
              {this.state.alert ? this.state.alert : this.props.alert}
              <i
+                role="button"
+                tabIndex={0}
                className="fa fa-close pull-right"
                onClick={this.removeAlert.bind(this)}
                style={{ cursor: 'pointer' }}
--- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx
+++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx
@ -177,6 +177,8 @@ class DatasourceControl extends React.PureComponent {
          >
            <a href="#">
              <i
+                role="button"
+                tabIndex={0}
                className={`fa fa-${
                  this.state.showDatasource ? 'minus' : 'plus'
                }-square m-r-5 m-l-5 m-t-4`}
--- a/superset-frontend/src/explore/components/controls/VizTypeControl.jsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl.jsx
@ -144,6 +144,8 @@ export default class VizTypeControl extends React.PureComponent {

    return (
      <div
+        role="button"
+        tabIndex={0}
        className={`viztype-selector-container ${isSelected ? 'selected' : ''}`}
        onClick={this.onChange.bind(this, key)}
      >