IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-25 02:10:45 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
enabling remaining a11y rules + ignore existing violations
This commit is contained in:
Ashley Harrison 2023-06-30 16:58:16 +01:00 committed by GitHub
parent f32f1859a0
commit 7a2a5dde8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 63 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc
View File

@ -74,20 +74,18 @@
},
{
"extends": ["plugin:jsx-a11y/recommended"],
"files": ["**/*"],
"excludedFiles": ["**/*.{spec,test}.{ts,tsx}"],
"files": ["**/*.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",
{

2
packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
View File

@ -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'} />{' '}

2
packages/grafana-ui/src/components/Table/FilterPopup.tsx
View File

@ -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">

2
packages/grafana-ui/src/components/Tooltip/Popover.tsx
View File

@ -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}

2
public/app/core/components/Layers/LayerDragDropList.tsx
View File

@ -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}

4
public/app/core/components/OptionsUI/color.tsx
View File

@ -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>

2
public/app/core/components/RolePicker/RoleMenuGroupOption.tsx
View File

@ -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}

2
public/app/core/components/RolePicker/RoleMenuOption.tsx
View File

@ -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}

2
public/app/core/components/RolePicker/RolePickerInput.tsx
View File

@ -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} />

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

@ -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

2
public/app/features/canvas/runtime/ables.tsx
View File

@ -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'}

2
public/app/features/canvas/runtime/element.tsx
View File

@ -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}

4
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
View File

@ -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>

2
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx
View File

@ -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>

2
public/app/features/datasources/components/picker/DataSourceDropdown.tsx
View File

@ -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}

2
public/app/features/dimensions/editors/ResourceCards.tsx
View File

@ -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}

2
public/app/features/dimensions/editors/ResourcePicker.tsx
View File

@ -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()}

2
public/app/features/explore/TraceView/components/TracePageHeader/NewTracePageSearchBar.tsx
View File

@ -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>

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

@ -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) => {

4
public/app/features/logs/components/LogRowMessage.tsx
View File

@ -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

2
public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx
View File

@ -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)}

2
public/app/features/search/page/components/FolderSection.tsx
View File

@ -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}

4
public/app/features/search/page/components/columns.tsx
View File

@ -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) => {

2
public/app/features/storage/Breadcrumb.tsx
View File

@ -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>

2
public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx
View File

@ -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(

2
public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
View File

@ -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}

2
public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
View File

@ -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={() => {

2
public/app/plugins/panel/xychart/ManualEditor.tsx
View File

@ -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}`}