chore: Add eslint-plugin-jsx-a11y plugin (#1348)

Author: dougfabris

eslint.config.mjs

@@ -1,6 +1,7 @@
 // @ts-check
 
 import pluginImport from 'eslint-plugin-import';
+import pluginJsxA11y from 'eslint-plugin-jsx-a11y';
 import * as mdx from 'eslint-plugin-mdx';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import pluginReact from 'eslint-plugin-react';
@@ -450,7 +451,18 @@ export default tseslint.config(
     },
   },
   {
-    plugins: { 'react': pluginReact, 'react-hooks': pluginReactHooks },
+    plugins: {
+      'jsx-a11y': pluginJsxA11y,
+    },
+    rules: {
+      ...pluginJsxA11y.configs.recommended.rules,
+    },
+  },
+  {
+    plugins: {
+      'react': pluginReact,
+      'react-hooks': pluginReactHooks,
+    },
     languageOptions: {
       globals: {
         ...globals.browser,

package.json

@@ -14,6 +14,7 @@
     "eslint": "~9.14.0",
     "eslint-import-resolver-typescript": "~3.7.0",
     "eslint-plugin-import": "~2.31.0",
+    "eslint-plugin-jsx-a11y": "~6.10.2",
     "eslint-plugin-mdx": "~3.1.5",
     "eslint-plugin-prettier": "~5.2.1",
     "eslint-plugin-react": "~7.37.2",

packages/fuselage/src/components/AudioPlayer/AudioPlayer.tsx

@@ -1,4 +1,5 @@
 import { useMergedRefs, useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import type { TrackHTMLAttributes } from 'react';
 import { useState, useRef, forwardRef } from 'react';
 
 import { Box, Button, IconButton, Margins } from '../..';
@@ -57,22 +58,22 @@ const getDurationForInfinityDurationAudioFile = (
 /**
  * A Fuselage’s custom AudioPlayer.
  */
-export const AudioPlayer = forwardRef<
-  HTMLAudioElement,
-  {
-    src: string;
-    type?: string;
-    maxPlaybackSpeed?: number;
-    minPlaybackSpeed?: number;
-    playbackSpeedStep?: number;
-    download?: boolean;
-    playLabel?: string;
-    pauseLabel?: string;
-    audioPlaybackRangeLabel?: string;
-    changePlaybackSpeedLabel?: string;
-    downloadAudioFileLabel?: string;
-  }
->(
+type AudioPlayerProps = {
+  src: string;
+  type?: string;
+  maxPlaybackSpeed?: number;
+  minPlaybackSpeed?: number;
+  playbackSpeedStep?: number;
+  download?: boolean;
+  playLabel?: string;
+  pauseLabel?: string;
+  audioPlaybackRangeLabel?: string;
+  changePlaybackSpeedLabel?: string;
+  downloadAudioFileLabel?: string;
+  trackProps?: TrackHTMLAttributes<HTMLTrackElement>;
+};
+
+export const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerProps>(
   (
     {
       src,
@@ -86,6 +87,7 @@ export const AudioPlayer = forwardRef<
       audioPlaybackRangeLabel = 'Audio Playback Range',
       changePlaybackSpeedLabel = 'Change Playback Speed',
       downloadAudioFileLabel = 'Download Audio File',
+      trackProps,
     },
     ref,
   ) => {
@@ -222,6 +224,7 @@ export const AudioPlayer = forwardRef<
           controls
         >
           <source src={src} type={type} />
+          <track kind='captions' {...trackProps} />
         </audio>
       </Box>
     );

packages/fuselage/src/components/AutoComplete/__snapshots__/AutoComplete.spec.tsx.snap

@@ -53,6 +53,7 @@ exports[`[AutoComplete Rendering] renders CustomSelected without crashing 1`] =
             class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x20"
           >
             <img
+              alt=""
               aria-hidden="true"
               class="rcx-avatar__element rcx-avatar__element--x20"
               src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAA
@@ -257,6 +258,7 @@ exports[`[AutoComplete Rendering] renders MultipleCustomSelected without crashin
                 class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x20"
               >
                 <img
+                  alt=""
                   aria-hidden="true"
                   class="rcx-avatar__element rcx-avatar__element--x20"
                   src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAA
@@ -340,6 +342,7 @@ v/L21v8BT/ZVoe1UItsAAAAASUVORK5CYII="
                 class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x20"
               >
                 <img
+                  alt=""
                   aria-hidden="true"
                   class="rcx-avatar__element rcx-avatar__element--x20"
                   src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAA

packages/fuselage/src/components/Avatar/Avatar.tsx

@@ -15,6 +15,7 @@ export const Avatar = ({
   objectFit = false,
   url,
   className,
+  alt,
   ...props
 }: AvatarProps) => {
   const innerClass = [
@@ -28,7 +29,7 @@ export const Avatar = ({
 
   return (
     <AvatarContainer size={size} className={className}>
-      <img src={`${url}`} className={`${innerClass}`} {...props} />
+      <img src={url} className={innerClass} alt={alt || ''} {...props} />
     </AvatarContainer>
   );
 };

packages/fuselage/src/components/Banner/Banner.tsx

@@ -76,13 +76,17 @@ const Banner = ({
   );
 
   return (
-    <section
+    <div
       className={cx('rcx-banner')(
         { [variant]: true, inline, actionable },
         className,
       )}
       ref={ref}
-      role='banner'
+      role={onAction ? 'button' : 'banner'}
+      tabIndex={onAction ? 0 : -1}
+      onKeyDown={(e) =>
+        e.code === 'Enter' || (e.code === 'Space' && handleBannerClick())
+      }
       onClick={handleBannerClick}
       {...props}
     >
@@ -115,7 +119,7 @@ const Banner = ({
           <IconButton small onClick={handleCloseButtonClick} icon='cross' />
         </div>
       )}
-    </section>
+    </div>
   );
 };
 

packages/fuselage/src/components/Box/richContentInline.stories.tsx

@@ -35,11 +35,11 @@ i.storyName = 'i';
 export const a: StoryFn<typeof Box> = () => (
   <>
     <div>
-      <a href='#'>Normal</a>
+      <a href='#any'>Normal</a>
     </div>
     <br />
     <div>
-      <a href='#' className='is-focused'>
+      <a href='#any' className='is-focused'>
         Focused
       </a>
     </div>

packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewTitle.tsx

@@ -1,24 +1,27 @@
-import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import type { AnchorHTMLAttributes, HTMLAttributes } from 'react';
 
 type MessageGenericPreviewTitleProps = {
-  children?: ReactNode;
   externalUrl?: string;
 } & HTMLAttributes<HTMLSpanElement> &
   AnchorHTMLAttributes<HTMLAnchorElement>;
 
 export const MessageGenericPreviewTitle = ({
   externalUrl,
+  children,
   ...props
-}: MessageGenericPreviewTitleProps) =>
-  externalUrl ? (
-    <span>
+}: MessageGenericPreviewTitleProps) => {
+  if (externalUrl) {
+    return (
       <a
         className='rcx-message-generic-preview__title rcx-message-generic-preview__title-link'
         href={externalUrl}
         target='_blank'
         {...props}
-      />
-    </span>
-  ) : (
-    <span className='rcx-message-generic-preview__title' {...props} />
-  );
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return <span className='rcx-message-generic-preview__title' {...props} />;
+};

packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap

@@ -594,6 +594,7 @@ exports[`[Modal Component] _WithThumb should match the snapshot 1`] = `
                 class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x28 rcx-css-trljwa"
               >
                 <img
+                  alt=""
                   class="rcx-avatar__element rcx-avatar__element--x28"
                   src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
                 />

packages/fuselage/src/components/Sidebar/SidebarBanner.tsx

@@ -30,13 +30,16 @@ export const SidebarBanner = ({
       {text && <div className='rcx-sidebar-banner--text'>{text}</div>}
       {description && (
         <div
+          role={onClick ? 'link' : undefined}
+          tabIndex={0}
           className={[
             'rcx-sidebar-banner--description',
             onClick && 'rcx-sidebar-banner--description--clickable',
           ]
             .filter(Boolean)
             .join(' ')}
           onClick={onClick}
+          onKeyDown={(e) => e.key === 'Enter' && onClick?.()}
         >
           {description}
         </div>