Feature/axe core

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [Unreleased]
+### Added
+* [#45](https://github.com/shlinkio/shlink-frontend-kit/issues/45) Add a11y tests with axe-core.
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
 ## [0.3.0] - 2023-09-05
 ### Added
 * Add `useToggleTimeout` hook.

package.json

@@ -57,6 +57,7 @@
     "@types/uuid": "^9.0.4",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.34.5",
+    "axe-core": "^4.8.2",
     "bootstrap": "5.2.3",
     "eslint": "^8.50.0",
     "jsdom": "^22.1.0",
@@ -66,7 +67,8 @@
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
     "vite-plugin-dts": "^3.5.4",
-    "vitest": "^0.34.5"
+    "vitest": "^0.34.5",
+    "vitest-canvas-mock": "^0.3.3"
   },
   "browserslist": [
     ">0.2%",

src/block/SimpleCard.tsx

@@ -9,7 +9,7 @@ export type SimpleCardProps = Omit<CardProps, 'title'> & {
 
 export const SimpleCard = ({ title, children, bodyClassName, ...rest }: SimpleCardProps) => (
   <Card {...rest}>
-    {title && <CardHeader role="heading">{title}</CardHeader>}
+    {title && <CardHeader role="heading" aria-level={4}>{title}</CardHeader>}
     <CardBody className={bodyClassName}>{children}</CardBody>
   </Card>
 );

src/form/InputFormGroup.tsx

@@ -19,7 +19,7 @@ export const InputFormGroup: FC<InputFormGroupProps> = (
   const id = useDomId();
 
   return (
-    <LabeledFormGroup label={<>{children}:</>} className={className ?? ''} labelClassName={labelClassName} id={id}>
+    <LabeledFormGroup label={<>{children}:</>} className={className} labelClassName={labelClassName} id={id}>
       <input
         id={id}
         className="form-control"

src/navigation/DropdownBtn.tsx

@@ -26,6 +26,7 @@ export const DropdownBtn: FC<DropdownBtnProps> = ({
   minWidth,
   inline,
   size,
+  ...rest
 }) => {
   const [isOpen, toggle] = useToggle();
   const toggleClasses = classNames('dropdown-btn__toggle', className, {
@@ -36,7 +37,7 @@ export const DropdownBtn: FC<DropdownBtnProps> = ({
 
   return (
     <Dropdown isOpen={isOpen} toggle={toggle} disabled={disabled} className={dropdownClassName}>
-      <DropdownToggle size={size} caret={!noCaret} className={toggleClasses} color="primary">
+      <DropdownToggle size={size} caret={!noCaret} className={toggleClasses} color="primary" {...rest}>
         {text}
       </DropdownToggle>
       <DropdownMenu className="w-100" end={end} style={menuStyle}>{children}</DropdownMenu>

src/navigation/NavPills.tsx

@@ -1,7 +1,7 @@
 import type { FC, PropsWithChildren } from 'react';
 import { Children, isValidElement } from 'react';
 import { NavLink as RouterNavLink } from 'react-router-dom';
-import { Card, Nav, NavLink } from 'reactstrap';
+import { Card, Nav, NavItem, NavLink } from 'reactstrap';
 import './NavPills.scss';
 
 type NavPillsProps = PropsWithChildren<{
@@ -15,9 +15,11 @@ type NavPillItemProps = PropsWithChildren<{
 }>;
 
 export const NavPillItem: FC<NavPillItemProps> = ({ children, ...rest }) => (
-  <NavLink className="nav-pills__nav-link" tag={RouterNavLink} {...rest}>
-    {children}
-  </NavLink>
+  <NavItem>
+    <NavLink className="nav-pills__nav-link" tag={RouterNavLink} {...rest}>
+      {children}
+    </NavLink>
+  </NavItem>
 );
 
 export const NavPills: FC<NavPillsProps> = ({ children, fill = false, className = '' }) => (

src/navigation/RowDropdownBtn.tsx

@@ -5,11 +5,15 @@ import { DropdownBtn } from './DropdownBtn';
 
 export type DropdownBtnMenuProps = PropsWithChildren<{
   minWidth?: number;
+
+  /** Accessible label for screen readers. Defaults to "Options" */
+  label?: string;
 }>;
 
-export const RowDropdownBtn: FC<DropdownBtnMenuProps> = ({ children, minWidth }) => (
+export const RowDropdownBtn: FC<DropdownBtnMenuProps> = ({ children, minWidth, label = 'Options' }) => (
   <DropdownBtn
     text={<FontAwesomeIcon className="px-1" icon={menuIcon} />}
+    aria-label={label}
     size="sm"
     minWidth={minWidth}
     end

test/__helpers__/accessibility.ts

@@ -0,0 +1,6 @@
+import { run } from 'axe-core';
+
+export const checkAccessibility = async ({ container }: { container: HTMLElement }) => {
+  const result = await run(container);
+  expect(result.violations).toStrictEqual([]);
+};

test/block/Message.test.tsx

@@ -2,10 +2,16 @@ import { render, screen } from '@testing-library/react';
 import type { PropsWithChildren } from 'react';
 import type { MessageProps } from '../../src';
 import { Message } from '../../src';
+import { checkAccessibility } from '../__helpers__/accessibility';
 
 describe('<Message />', () => {
   const setUp = (props: PropsWithChildren<MessageProps> = {}) => render(<Message {...props} />);
 
+  it.each([
+    [{ loading: true }],
+    [{ children: 'Something is wrong' }],
+  ])('passes a11y checks', (props: MessageProps) => checkAccessibility(setUp(props)));
+
   it.each([
     [true, 'col-md-12'],
     [false, 'col-md-10 offset-md-1'],
@@ -33,11 +39,11 @@ describe('<Message />', () => {
   });
 
   it.each([
-    ['error', 'border-danger', 'text-danger'],
-    ['default', '', 'text-muted'],
+    ['error' as const, 'border-danger', 'text-danger'],
+    ['default' as const, '', 'text-muted'],
     [undefined, '', 'text-muted'],
   ])('renders proper classes based on message type', (type, expectedCardClass, expectedH3Class) => {
-    const { container } = setUp({ type: type as 'default' | 'error' | undefined });
+    const { container } = setUp({ type });
 
     expect(container.querySelector('.card-body')).toHaveAttribute('class', expect.stringContaining(expectedCardClass));
     expect(screen.getByRole('heading')).toHaveClass(`text-center mb-0 ${expectedH3Class}`);

test/block/Result.test.tsx

@@ -1,14 +1,21 @@
 import { render, screen } from '@testing-library/react';
-import type { ResultProps, ResultType } from '../../src';
+import type { ResultProps } from '../../src';
 import { Result } from '../../src';
+import { checkAccessibility } from '../__helpers__/accessibility';
 
 describe('<Result />', () => {
   const setUp = (props: ResultProps) => render(<Result {...props} />);
 
   it.each([
-    ['success' as ResultType, 'bg-main text-white'],
-    ['error' as ResultType, 'bg-danger text-white'],
-    ['warning' as ResultType, 'bg-warning'],
+    ['success' as const],
+    ['error' as const],
+    ['warning' as const],
+  ])('passes a11y checks', (type) => checkAccessibility(setUp({ children: 'The result', type })));
+
+  it.each([
+    ['success' as const, 'bg-main text-white'],
+    ['error' as const, 'bg-danger text-white'],
+    ['warning' as const, 'bg-warning'],
   ])('renders expected classes based on type', (type, expectedClasses) => {
     setUp({ type });
     expect(screen.getByRole('document')).toHaveClass(expectedClasses);

test/block/SimpleCard.test.tsx

@@ -1,10 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import type { SimpleCardProps } from '../../src';
 import { SimpleCard } from '../../src';
-
-const setUp = ({ children, ...rest }: SimpleCardProps = {}) => render(<SimpleCard {...rest}>{children}</SimpleCard>);
+import { checkAccessibility } from '../__helpers__/accessibility';
 
 describe('<SimpleCard />', () => {
+  const setUp = ({ children, ...rest }: SimpleCardProps = {}) => render(<SimpleCard {...rest}>{children}</SimpleCard>);
+
+  it('passes a11y checks', () => checkAccessibility(setUp({ children: 'Foo', title: 'Bar' })));
+
   it('does not render title if not provided', () => {
     setUp();
     expect(screen.queryByRole('heading')).not.toBeInTheDocument();

test/form/Checkbox.test.tsx

@@ -1,8 +1,11 @@
 import { render, screen } from '@testing-library/react';
 import { Checkbox } from '../../src';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<Checkbox />', () => {
+  it('passes a11y checks', () => checkAccessibility(render(<Checkbox>Hi!</Checkbox>)));
+
   it.each([['foo'], ['bar'], ['baz']])('includes extra class names when provided', (className) => {
     const { container } = render(<Checkbox className={className} />);
     expect(container.firstChild).toHaveAttribute('class', `form-check form-checkbox ${className}`);

test/form/InputFormGroup.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, screen } from '@testing-library/react';
-import type { InputType } from 'reactstrap/types/lib/Input';
 import type { InputFormGroupProps } from '../../src';
 import { InputFormGroup } from '../../src';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<InputFormGroup />', () => {
@@ -10,16 +10,18 @@ describe('<InputFormGroup />', () => {
     <InputFormGroup value="foo" {...props} onChange={onChange} placeholder="The input" />,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp({ children: 'The label' })));
+
   it('renders input with placeholder', () => {
     setUp();
     expect(screen.getByPlaceholderText('The input')).toBeInTheDocument();
   });
 
   it.each([
     [undefined, 'text'],
-    ['text' as InputType, 'text'],
-    ['email' as InputType, 'email'],
-    ['date' as InputType, 'date'],
+    ['text' as const, 'text'],
+    ['email' as const, 'email'],
+    ['date' as const, 'date'],
   ])('renders input with correct type', (type, expectedType) => {
     setUp({ type, children: 'The label' });
     expect(screen.getByLabelText('The label:')).toHaveAttribute('type', expectedType);

test/form/SearchField.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import type { ComponentProps } from 'react';
 import { SearchField } from '../../src';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 type SearchFieldProps = ComponentProps<typeof SearchField>;
@@ -11,6 +12,8 @@ describe('<SearchField />', () => {
     <SearchField onChange={onChange} {...props} />,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp()));
+
   it('displays clear button when value is not empty', () => {
     setUp({ initialValue: 'Foo' });
     expect(screen.getByLabelText('Clear search')).not.toHaveAttribute('hidden');

test/navigation/DropdownBtn.test.tsx

@@ -2,13 +2,16 @@ import { screen } from '@testing-library/react';
 import type { PropsWithChildren } from 'react';
 import type { DropdownBtnProps } from '../../src';
 import { DropdownBtn } from '../../src';
+import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<DropdownBtn />', () => {
   const setUp = (props: PropsWithChildren<DropdownBtnProps>) => renderWithEvents(
     <DropdownBtn children="foo" {...props} />,
   );
 
+  it('passes a11y checks', () => checkAccessibility(setUp({ text: 'Menu' })));
+
   it.each([['foo'], ['bar'], ['baz']])('displays provided text in button', (text) => {
     setUp({ text });
     expect(screen.getByRole('button')).toHaveTextContent(text);