Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Dec 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
35 changes: 19 additions & 16 deletions packages/fuselage/src/components/AudioPlayer/AudioPlayer.tsx
Original file line number Diff line number Diff line change
@@ -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 '../..';
Expand Down Expand Up @@ -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,
Expand All @@ -86,6 +87,7 @@ export const AudioPlayer = forwardRef<
audioPlaybackRangeLabel = 'Audio Playback Range',
changePlaybackSpeedLabel = 'Change Playback Speed',
downloadAudioFileLabel = 'Download Audio File',
trackProps,
},
ref,
) => {
Expand Down Expand Up @@ -222,6 +224,7 @@ export const AudioPlayer = forwardRef<
controls
>
<source src={src} type={type} />
<track kind='captions' {...trackProps} />
</audio>
</Box>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion packages/fuselage/src/components/Avatar/Avatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const Avatar = ({
objectFit = false,
url,
className,
alt,
...props
}: AvatarProps) => {
const innerClass = [
Expand All @@ -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>
);
};
Expand Down
10 changes: 7 additions & 3 deletions packages/fuselage/src/components/Banner/Banner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down Expand Up @@ -115,7 +119,7 @@ const Banner = ({
<IconButton small onClick={handleCloseButtonClick} icon='cross' />
</div>
)}
</section>
</div>
);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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} />;
};
Original file line number Diff line number Diff line change
Expand Up @@ -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=="
/>
Expand Down
3 changes: 3 additions & 0 deletions packages/fuselage/src/components/Sidebar/SidebarBanner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ export const SidebarBanner = ({
{linkText && (
<a
className='rcx-box rcx-box--full rcx-sidebar-v2-banner__link'
tabIndex={0}
{...linkProps}
>
{linkText}
Expand Down
3 changes: 3 additions & 0 deletions packages/fuselage/src/components/SidebarV2/SidebarLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ export const SidebarLink = ({
menu?: ReactNode;
} & LinkHTMLAttributes<HTMLAnchorElement>) => (
<a
role='link'
tabIndex={0}
juliajforesti marked this conversation as resolved.
Show resolved Hide resolved
className={[
'rcx-box rcx-box--full',
'rcx-sidebar-v2-link',
Expand All @@ -27,6 +29,7 @@ export const SidebarLink = ({
.filter(Boolean)
.join(' ')}
onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => e.code === 'Enter' && e.stopPropagation()}
{...props}
>
{icon && (
Expand Down
Loading
Loading