feat: lint accessibility

awslabs · Dec 18, 2023 · 0db36ef · 0db36ef
1 parent 10b057a
commit 0db36ef
Show file tree

Hide file tree

Showing 19 changed files with 665 additions and 112 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/dashboard/.eslintrc.js b/packages/dashboard/.eslintrc.js
@@ -1,4 +1,5 @@
 module.exports = {
   root: true,
-  extends: ['iot-app-kit', 'plugin:react-hooks/recommended'],
+  extends: ['iot-app-kit', 'plugin:react-hooks/recommended', 'plugin:jsx-a11y/recommended'],
+  plugins: ['jsx-a11y'],
 };
diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
@@ -68,6 +68,7 @@
     "css-loader": "6.8.1",
     "dotenv": "^16.3.1",
     "eslint-config-iot-app-kit": "9.11.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-extended": "^3.2.4",

diff --git a/packages/dashboard/src/components/contextMenu/option.tsx b/packages/dashboard/src/components/contextMenu/option.tsx
@@ -36,11 +36,13 @@ const ContextMenuOption: React.FC<ContextMenuOptionProps> = ({ disabled, text, h
 
   const disabledStyle = { color: colorBackgroundControlDisabled, cursor: 'not-allowed' };
   return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     <li
       onKeyDown={(e) => {
         if (disabled || !isHotkey('enter', e)) return;
         action();
       }}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex={0}
       onClick={() => {
         if (disabled) return;

diff --git a/packages/dashboard/src/components/grid/grid.tsx b/packages/dashboard/src/components/grid/grid.tsx
@@ -52,6 +52,7 @@ export type GridProps = PropsWithChildren<{
 export const Grid: React.FC<GridProps> = ({ highlighted, showGuides, width, height, cellSize, children }) => (
   <div
     id={DASHBOARD_CONTAINER_ID}
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex={0}
     className={`container ${highlighted ? 'grid-container-border-highlighted' : ''}`}
     style={{

diff --git a/packages/dashboard/src/components/internalDashboard/collapsiblePanel.tsx b/packages/dashboard/src/components/internalDashboard/collapsiblePanel.tsx
@@ -69,6 +69,7 @@ export function CollapsiblePanel(props: CollapsiblePanelProps) {
       content={borderSide === 'Left' ? 'Configuration' : 'Resource explorer'}
       position={borderSide === 'Left' ? 'left' : 'right'}
     >
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <div
         style={{
           backgroundColor: colorBackgroundButtonPrimaryDefault,

diff --git a/packages/dashboard/src/components/resizablePanes/index.tsx b/packages/dashboard/src/components/resizablePanes/index.tsx
@@ -207,6 +207,7 @@ export const ResizablePanes: FC<ResizablePanesProps> = ({ leftPane, centerPane,
   }, [leftPaneWidth, resizeSidePanes]);
 
   return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       className='iot-resizable-panes'
       ref={panes}
@@ -229,6 +230,7 @@ export const ResizablePanes: FC<ResizablePanesProps> = ({ leftPane, centerPane,
 
       <div
         className={!isLeftPaneCollapsed ? 'iot-resizable-panes-handle iot-resizable-panes-handle-left' : ''}
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex={0}
       />
 
@@ -238,6 +240,7 @@ export const ResizablePanes: FC<ResizablePanesProps> = ({ leftPane, centerPane,
 
       <div
         className={!isRightPaneCollapsed ? 'iot-resizable-panes-handle iot-resizable-panes-handle-right' : ''}
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex={0}
       />
 

diff --git a/packages/dashboard/src/components/widgets/tile/tile.tsx b/packages/dashboard/src/components/widgets/tile/tile.tsx
@@ -32,6 +32,7 @@ const DeletableTileAction = ({ handleDelete }: DeletableTileActionProps) => {
   };
 
   return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div onMouseDown={handleMouseDown}>
       <Button onClick={handleDelete} ariaLabel='delete widget' variant='icon' iconName='close' />
     </div>

diff --git a/packages/dashboard/src/customization/propertiesSections/shared/expandableSectionHeader.tsx b/packages/dashboard/src/customization/propertiesSections/shared/expandableSectionHeader.tsx
@@ -22,6 +22,7 @@ const ExpandableSectionHeader: FC<PropsWithChildren<ExpandableSectionHeaderProps
       {children}
       {onClickButton && (
         <span className='expandable-section-header-icon'>
+          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
           <div onClick={handleClickButton}>
             <Icon variant={buttonEnabled ? 'normal' : 'disabled'} name={iconName} />
           </div>

diff --git a/...customization/propertiesSections/shared/styleExpandableSection/styleExpandableSection.tsx b/...customization/propertiesSections/shared/styleExpandableSection/styleExpandableSection.tsx
@@ -11,6 +11,7 @@ type StyleExpandableSectionProps = {
 };
 
 const StyleToggle = ({ visible = true, setVisible }: Pick<StyleExpandableSectionProps, 'visible' | 'setVisible'>) => (
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
   <div
     onClick={(e) => {
       e.stopPropagation();

diff --git a/packages/dashboard/src/customization/propertiesSections/textSettings/link.tsx b/packages/dashboard/src/customization/propertiesSections/textSettings/link.tsx
@@ -25,6 +25,7 @@ const LinkSettings: FC<LinkSettingsProps> = ({ href = '', updateHref, isUrl = fa
     <div className='expandable-section-header'>
       <SpaceBetween size='m' direction='horizontal'>
         <span>{defaultMessages.title}</span>
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div onClick={(e) => e.stopPropagation()}>
           <Toggle
             checked={isUrl}

diff --git a/packages/dashboard/src/customization/widgets/components/widgetIcon.tsx b/packages/dashboard/src/customization/widgets/components/widgetIcon.tsx
@@ -9,6 +9,7 @@ interface widgetIconProps {
 const WidgetIcon = ({ widget, defaultIcon, darkIcon }: widgetIconProps) => {
   const [over, setOver] = useState(false);
   return (
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     <span onMouseOver={() => setOver(true)} onMouseOut={() => setOver(false)}>
       <img src={over ? darkIcon : defaultIcon} alt={`${widget} widget`} />
     </span>

diff --git a/packages/dashboard/src/customization/widgets/table/component.tsx b/packages/dashboard/src/customization/widgets/table/component.tsx
@@ -57,7 +57,7 @@ const TableWidgetComponent: React.FC<TableWidget> = (widget) => {
   const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
     const target = e.target as HTMLDivElement;
 
-    /* Condition to check table column resizer className to stop onMouseDouwn event 
+    /* Condition to check table column resizer className to stop onMouseDouwn event
       propagation to fix widget dragging issue while column resizing */
     if (target.className.includes('resizer')) {
       e.stopPropagation();
@@ -74,6 +74,7 @@ const TableWidgetComponent: React.FC<TableWidget> = (widget) => {
 
   return (
     <WidgetTile widget={widget} removeable>
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
         data-testid='table-widget-component'
         onMouseDown={handleMouseDown}

diff --git a/packages/react-components/.eslintrc.js b/packages/react-components/.eslintrc.js
@@ -1,6 +1,7 @@
 module.exports = {
   root: true,
-  extends: ['iot-app-kit', 'plugin:react-hooks/recommended'],
+  extends: ['iot-app-kit', 'plugin:react-hooks/recommended', 'plugin:jsx-a11y/recommended'],
+  plugins: ['jsx-a11y'],
   overrides: [
     {
       // Disabling explicit any rule for graph-view component since types are defined in 3p component.

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -86,6 +86,7 @@
     "copyfiles": "^2.4.1",
     "cytoscape": "^3.25.0",
     "eslint-config-iot-app-kit": "9.11.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "flush-promises": "^1.0.2",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",

diff --git a/packages/react-components/src/components/chart/baseChart.tsx b/packages/react-components/src/components/chart/baseChart.tsx
@@ -210,6 +210,7 @@ const BaseChart = ({ viewport, queries, size = { width: 500, height: 500 }, ...o
           <div className='base-chart-left-legend' ref={leftLegendRef}>
             <MultiYAxisLegend datastreams={dataStreams} height={chartHeight} />
           </div>
+          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
           <div
             ref={ref}
             onMouseDown={handleMouseDown}

diff --git a/packages/react-components/src/components/chart/legend/useChartsLegend.tsx b/packages/react-components/src/components/chart/legend/useChartsLegend.tsx
@@ -34,6 +34,7 @@ const LegendCell = (e: { datastream: DataStream; lineColor: string; name: string
   };
 
   const [lineIcon] = useHover((isHovering) => (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
       style={{
         backgroundColor: isHovering ? colorBackgroundDropdownItemHover : undefined,

diff --git a/packages/react-components/src/components/menu/option.tsx b/packages/react-components/src/components/menu/option.tsx
@@ -85,7 +85,9 @@ export const MenuOption: React.FC<PropsWithChildren<MenuOptionProps>> = ({
 
   const disabledStyle = { color: colorBackgroundControlDisabled, cursor: 'not-allowed' };
   return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     <li
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex={0}
       onKeyDown={handleAction}
       onClick={handleAction}

diff --git a/packages/react-components/src/components/tooltip/tooltip.tsx b/packages/react-components/src/components/tooltip/tooltip.tsx
@@ -51,6 +51,7 @@ export const Tooltip = ({
     <div className='tooltip-container' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
       {children}
       {content && (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <span
           className={`tooltip-text ${position}`}
           style={{