chore: Add eslint-plugin-jsx-a11y plugin

packages/eslint-config-alt/package.json

@@ -51,6 +51,7 @@
     "eslint-config-prettier": "~8.8.0",
     "eslint-import-resolver-typescript": "~3.5.5",
     "eslint-plugin-import": "~2.26.0",
+    "eslint-plugin-jsx-a11y": "~6.8.0",
     "eslint-plugin-prettier": "~4.2.1",
     "eslint-plugin-react": "~7.32.2",
     "eslint-plugin-react-hooks": "~4.6.0"

packages/eslint-config-alt/react/index.js

@@ -1,7 +1,7 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: '../minimal',
-  plugins: ['react', 'react-hooks'],
+  plugins: ['react', 'react-hooks', 'jsx-a11y'],
+  extends: ['../minimal', 'plugin:jsx-a11y/recommended'],
   parser: '@babel/eslint-parser',
   rules: {
     'jsx-quotes': ['error', 'prefer-single'],

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 React, { useState, useRef, forwardRef } from 'react';
 
 import { Box, Button, IconButton, Margins } from '../..';
@@ -54,22 +55,22 @@ const getDurationForInfinityDurationAudioFile = (
   });
 };
 
-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,
@@ -83,6 +84,7 @@ export const AudioPlayer = forwardRef<
       audioPlaybackRangeLabel = 'Audio Playback Range',
       changePlaybackSpeedLabel = 'Change Playback Speed',
       downloadAudioFileLabel = 'Download Audio File',
+      trackProps,
     },
     ref
   ) => {
@@ -219,6 +221,7 @@ export const AudioPlayer = forwardRef<
           controls
         >
           <source src={src} type={type} />
+          <track kind='captions' {...trackProps} />
         </audio>
       </Box>
     );

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

@@ -16,6 +16,7 @@ export const Avatar = ({
   objectFit = false,
   url,
   className,
+  alt,
   ...props
 }: AvatarProps) => {
   const innerClass = [
@@ -29,7 +30,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

@@ -54,11 +54,11 @@ i.storyName = 'i';
 export const a: ComponentStory<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,25 +1,28 @@
-import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import type { AnchorHTMLAttributes, HTMLAttributes } from 'react';
 import React 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/Sidebar/SidebarBanner.tsx

@@ -31,13 +31,16 @@ export const SidebarBanner = ({
       {text && <div className='rcx-sidebar-banner--text'>{text}</div>}
       {description && (
         <div
+          role='link'
+          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>