Chore: Enable remaining jsx-a11y rules (#70990)

enabling remaining a11y rules + ignore existing violations

.eslintrc

@@ -74,20 +74,18 @@
     },
     {
       "extends": ["plugin:jsx-a11y/recommended"],
-      "files": ["**/*"],
+      "files": ["**/*.tsx"],
-      "excludedFiles": ["**/*.{spec,test}.{ts,tsx}"],
+      "excludedFiles": ["**/*.{spec,test}.tsx"],
       "rules": {
         // rules marked "off" are those left in the recommended preset we need to fix
         // we should remove the corresponding line and fix them one by one
         // any marked "error" contain specific overrides we'll need to keep
-        "jsx-a11y/click-events-have-key-events": "off",
         "jsx-a11y/no-autofocus": [
           "error",
           {
             "ignoreNonDOM": true
           }
         ],
-        "jsx-a11y/no-static-element-interactions": "off",
         "jsx-a11y/label-has-associated-control": [
           "error",
           {

packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx

@@ -81,6 +81,8 @@ class UnthemedSelectOptionGroup extends PureComponent<ExtendedGroupProps, State>
 
     return (
       <div>
+        {/* TODO: fix keyboard a11y */}
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div className={styles.header} onClick={this.onToggleChildren}>
           <span className={styles.label}>{label}</span>
           <Icon className={styles.icon} name={expanded ? 'angle-up' : 'angle-down'} />{' '}

packages/grafana-ui/src/components/Table/FilterPopup.tsx

@@ -51,7 +51,7 @@ export const FilterPopup = ({ column: { preFilteredRows, filterValue, setFilter
   return (
     <ClickOutsideWrapper onClick={onCancel} useCapture={true}>
       {/* This is just blocking click events from bubbeling and should not have a keyboard interaction. */}
-      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
       <div className={cx(styles.filterContainer)} onClick={stopPropagation}>
         <VerticalGroup spacing="lg">
           <VerticalGroup spacing="xs">

packages/grafana-ui/src/components/Tooltip/Popover.tsx

@@ -66,6 +66,8 @@ class Popover extends PureComponent<Props> {
                 >
                   {({ ref, style, placement, arrowProps, update }) => {
                     return (
+                      // TODO: fix keyboard a11y
+                      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                       <div
                         onMouseEnter={onMouseEnter}
                         onMouseLeave={onMouseLeave}

public/app/core/components/Layers/LayerDragDropList.tsx

@@ -61,6 +61,8 @@ export const LayerDragDropList = <T extends LayerElement>({
                 rows.push(
                   <Draggable key={uid} draggableId={uid} index={rows.length}>
                     {(provided, snapshot) => (
+                      // TODO: fix keyboard a11y
+                      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                       <div
                         className={getRowStyle(isSelected)}
                         ref={provided.innerRef}

public/app/core/components/OptionsUI/color.tsx

@@ -45,10 +45,14 @@ export const ColorValueEditor = ({ value, settings, onChange, details }: Props)
             {details && (
               <>
                 {value ? (
+                  // TODO: fix keyboard a11y
+                  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                   <span className={styles.colorText} onClick={showColorPicker}>
                     {value}
                   </span>
                 ) : (
+                  // TODO: fix keyboard a11y
+                  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                   <span className={styles.placeholderText} onClick={showColorPicker}>
                     {settings?.placeholder ?? 'Select color'}
                   </span>

public/app/core/components/RolePicker/RoleMenuGroupOption.tsx

@@ -81,6 +81,8 @@ export const RoleMenuGroupOption = memo(
 
       return (
         <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+          {/* TODO: fix keyboard a11y */}
+          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
           <div ref={ref} className={wrapperClassName} aria-label="Role picker option" onClick={onClickInternal}>
             <Checkbox
               value={isSelected}

public/app/core/components/RolePicker/RoleMenuOption.tsx

@@ -38,6 +38,8 @@ export const RoleMenuOption = React.forwardRef<HTMLDivElement, React.PropsWithCh
     };
 
     return (
+      // TODO: fix keyboard a11y
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       <div ref={ref} className={wrapperClassName} aria-label="Role picker option" onClick={onChangeInternal}>
         <Checkbox
           value={isSelected}

public/app/core/components/RolePicker/RolePickerInput.tsx

@@ -52,6 +52,8 @@ export const RolePickerInput = ({
   const numberOfRoles = appliedRoles.length;
 
   return !isFocused ? (
+    // TODO: fix keyboard a11y
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div className={cx(styles.wrapper, styles.selectedRoles)} onMouseDown={onOpen}>
       {showBasicRole && <ValueContainer>{basicRole}</ValueContainer>}
       <RolesLabel appliedRoles={appliedRoles} numberOfRoles={numberOfRoles} showBuiltInRole={showBasicRole} />

public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRoute.tsx

@@ -53,6 +53,8 @@ function NotificationRouteHeader({
       />
 
       <Stack flexGrow={1} gap={1}>
+        {/* TODO: fix keyboard a11y */}
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div onClick={() => onExpandRouteClick(!expandRoute)} className={styles.expandable}>
           <Stack gap={1} direction="row" alignItems="center">
             Notification policy

public/app/features/canvas/runtime/ables.tsx

@@ -16,6 +16,8 @@ export const settingsViewable = (scene: Scene) => ({
 
     const rect = moveable.getRect();
     return (
+      // TODO: fix keyboard a11y
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       <div
         key={'settings-viewable'}
         className={'moveable-settings'}

public/app/features/canvas/runtime/element.tsx

@@ -499,6 +499,8 @@ export class ElementState implements LayerElement {
     const isSelected = div && scene && scene.selecto && scene.selecto.getSelectedTargets().includes(div);
 
     return (
+      // TODO: fix keyboard a11y
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
       <div
         key={this.UID}
         ref={this.initElement}

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx

@@ -14,6 +14,8 @@ export const PanelHeaderLoadingIndicator = ({ state, onClick }: Props) => {
 
   if (state === LoadingState.Loading) {
     return (
+      // TODO: fix keyboard a11y
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       <div className="panel-loading" onClick={onClick}>
         <Tooltip content="Cancel query">
           <Icon className="panel-loading__spinner spin-clockwise" name="sync" />
@@ -24,6 +26,8 @@ export const PanelHeaderLoadingIndicator = ({ state, onClick }: Props) => {
 
   if (state === LoadingState.Streaming) {
     return (
+      // TODO: fix keyboard a11y
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       <div className="panel-loading" onClick={onClick}>
         <div title="Streaming (click to stop)" className={styles.streamIndicator} />
       </div>

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx

@@ -35,6 +35,8 @@ export function PanelHeaderMenuTrigger({ children, onOpenMenu, ...divProps }: Pr
   }, []);
 
   return (
+    // TODO: fix keyboard a11y
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <header {...divProps} className="panel-title-container" onClick={onMenuToggle} onMouseDown={onMouseDown}>
       {children({ panelMenuOpen, closeMenu: () => setPanelMenuOpen(false) })}
     </header>

public/app/features/datasources/components/picker/DataSourceDropdown.tsx

@@ -183,6 +183,8 @@ export function DataSourceDropdown(props: DataSourceDropdownProps) {
       {isOpen ? (
         <Portal>
           <div {...underlayProps} />
+          {/* TODO: fix keyboard a11y */}
+          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
           <div
             ref={ref}
             {...overlayProps}

public/app/features/dimensions/editors/ResourceCards.tsx

@@ -32,6 +32,8 @@ const MemoizedCell = memo(function Cell(props: CellProps) {
   return (
     <div style={style}>
       {card && (
+        // TODO: fix keyboard a11y
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <div
           key={card.value}
           className={selected === card.value ? cx(styles.card, styles.selected) : styles.card}

public/app/features/dimensions/editors/ResourcePicker.tsx

@@ -96,6 +96,8 @@ export const ResourcePicker = (props: Props) => {
               />
             )}
 
+            {/* TODO: fix keyboard a11y */}
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
             <div ref={pickerTriggerRef} onClick={showPopper} className={styles.pointer}>
               {size === ResourcePickerSize.SMALL && renderSmallResourcePicker()}
               {size === ResourcePickerSize.NORMAL && renderNormalResourcePicker()}

public/app/features/explore/TraceView/components/TracePageHeader/NewTracePageSearchBar.tsx

@@ -147,6 +147,8 @@ export default memo(function NewTracePageSearchBar(props: TracePageSearchBarProp
                 onChange={(value) => setShowSpanFilterMatchesOnly(value.currentTarget.checked ?? false)}
                 label="Show matches only switch"
               />
+              {/* TODO: fix keyboard a11y */}
+              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
               <span onClick={() => setShowSpanFilterMatchesOnly(!showSpanFilterMatchesOnly)}>Show matches only</span>
             </div>
           </div>

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx

@@ -383,6 +383,8 @@ export default function SpanDetail(props: SpanDetailProps) {
         )}
         {topOfViewRefType === TopOfViewRefType.Explore && (
           <small className={styles.debugInfo}>
+            {/* TODO: fix keyboard a11y */}
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
             <a
               {...focusSpanLink}
               onClick={(e) => {

public/app/features/logs/components/LogRowMessage.tsx

@@ -115,6 +115,8 @@ export class LogRowMessage extends PureComponent<Props> {
         </td>
         <td className={cx('log-row-menu-cell', styles.logRowMenuCell)}>
           {pinned && (
+            // TODO: fix keyboard a11y
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <span className={cx('log-row-menu', 'log-row-menu-visible', styles.rowMenu)} onClick={this.onLogRowClick}>
               <IconButton
                 className={styles.unPinButton}
@@ -127,6 +129,8 @@ export class LogRowMessage extends PureComponent<Props> {
               />
             </span>
           )}
+          {/* TODO: fix keyboard a11y */}
+          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
           <span className={cx('log-row-menu', styles.rowMenu, styles.hidden)} onClick={this.onLogRowClick}>
             {shouldShowContextToggle && (
               <IconButton

public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx

@@ -37,6 +37,8 @@ export const PanelTypeCard = ({
   });
 
   return (
+    // TODO: fix keyboard a11y
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
       className={cssClass}
       aria-label={selectors.components.PluginVisualization.item(plugin.name)}

public/app/features/search/page/components/FolderSection.tsx

@@ -146,6 +146,8 @@ export const FolderSection = ({
       label={
         <>
           {selectionToggle && selection && (
+            // TODO: fix keyboard a11y
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <div onClick={onToggleFolder}>
               <Checkbox
                 className={styles.checkbox}

public/app/features/search/page/components/columns.tsx

@@ -246,6 +246,8 @@ export const generateColumns = (
       Header: () => <div className={styles.sortedHeader}>Score</div>,
       Cell: (p) => {
         return (
+          // TODO: fix keyboard a11y
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
           <div
             {...p.cellProps}
             className={cx(styles.cell, styles.explainItem)}
@@ -298,6 +300,8 @@ function makeDataSourceColumn(
             const icon = settings?.meta?.info?.logos?.small;
             if (icon) {
               return (
+                // TODO: fix keyboard a11y
+                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                 <span
                   key={i}
                   onClick={(e) => {

public/app/features/storage/Breadcrumb.tsx

@@ -27,6 +27,8 @@ export function Breadcrumb({ pathName, onPathChange, rootIcon }: Props) {
         const onClickBreadcrumb = () => onPathChange(url);
         const isLastBreadcrumb = index === paths.length - 1;
         return (
+          // TODO: fix keyboard a11y
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events
           <li key={uniqueId(path)} onClick={isLastBreadcrumb ? undefined : onClickBreadcrumb}>
             {path}
           </li>

public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx

@@ -155,6 +155,8 @@ const Option = (props: React.PropsWithChildren<OptionProps>) => {
   };
 
   return (
+    // TODO: fix keyboard a11y
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
       ref={innerRef}
       className={cx(

public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx

@@ -163,6 +163,8 @@ export function MetricSelect({
       const isFocused = props.isFocused ? styles.focus : '';
 
       return (
+        // TODO: fix keyboard a11y
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         <div
           {...props.innerProps}
           ref={props.innerRef}

public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx

@@ -204,6 +204,8 @@ export const ExemplarMarker = ({
 
   return (
     <>
+      {/* TODO: fix keyboard a11y */}
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <div
         ref={setMarkerElement}
         onClick={() => {

public/app/plugins/panel/xychart/ManualEditor.tsx

@@ -66,6 +66,8 @@ export const ManualEditor = ({
       <div className={style.marginBot}>
         {value.map((series, index) => {
           return (
+            // TODO: fix keyboard a11y
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             <div key={`series/${index}`} className={getRowStyle(index)} onMouseDown={() => setSelected(index)}>
               <LayerName
                 name={series.name ?? `Series ${index + 1}`}