47 Accessibility (#58)

* #47 main block

* #47 remove tabindex

* #47 use buttons for kbd navigation

* #47 adjust colors

* #47 colors

* #47 tests

* #47 language selector

Author: mwarman

src/components/Badge/Badge.tsx

@@ -8,7 +8,7 @@ const Badge = ({ children, className, testId = 'badge' }: BadgeProps): JSX.Eleme
   return (
     <div
       className={classNames(
-        'rounded-full bg-red-600 px-1 py-0.5 text-[10px] font-bold leading-none text-white dark:opacity-75',
+        'rounded-full bg-red-600 px-1 py-0.5 text-[10px] font-bold leading-none text-white dark:bg-red-700 dark:opacity-75',
         className,
       )}
       data-testid={testId}

src/components/Button/LanguageToggle.tsx

@@ -1,4 +1,4 @@
-import { PropsWithClassName } from '@leanstacks/react-common';
+import { ButtonVariant, PropsWithClassName } from '@leanstacks/react-common';
 import { useTranslation } from 'react-i18next';
 
 import { StorageKeys } from 'utils/constants';
@@ -7,6 +7,7 @@ import Dropdown from 'components/Dropdown/Dropdown';
 import Icon from 'components/Icon/Icon';
 import DropdownContent from 'components/Dropdown/DropdownContent';
 import DropdownItem from 'components/Dropdown/DropdownItem';
+import Button from './Button';
 
 /**
  * Properties for the `LanguageToggle` component.
@@ -34,17 +35,27 @@ const LanguageToggle = ({ className }: LanguageToggleProps): JSX.Element => {
 
   return (
     <Dropdown
-      toggle={<Icon name="language" className="px-2 py-1" />}
+      toggle={
+        <Button variant={ButtonVariant.Text}>
+          <Icon name="language" />
+        </Button>
+      }
       content={
         <DropdownContent className="text-sm">
           <DropdownItem onClick={() => setLanguage('en')} testId="dropdown-item-en">
-            English
+            <Button variant={ButtonVariant.Text} className="!p-0">
+              English
+            </Button>
           </DropdownItem>
           <DropdownItem onClick={() => setLanguage('fr')} testId="dropdown-item-fr">
-            French
+            <Button variant={ButtonVariant.Text} className="!p-0">
+              French
+            </Button>
           </DropdownItem>
           <DropdownItem onClick={() => setLanguage('es')} testId="dropdown-item-es">
-            Spanish
+            <Button variant={ButtonVariant.Text} className="!p-0">
+              Spanish
+            </Button>
           </DropdownItem>
         </DropdownContent>
       }

src/components/Layout/StandardLayout.tsx

@@ -25,7 +25,9 @@ const StandardLayout = ({
   return (
     <div className={className} data-testid={testId}>
       <Header />
-      <Outlet />
+      <main>
+        <Outlet />
+      </main>
       <Footer />
       <Toasts />
     </div>

src/components/Link/Link.tsx

@@ -20,7 +20,10 @@ interface LinkProps extends RouterLinkProps, PropsWithTestId {}
 const Link = ({ children, className, testId = 'link', ...props }: LinkProps): JSX.Element => {
   return (
     <RouterLink
-      className={classNames('text-blue-600 hover:underline hover:opacity-75', className)}
+      className={classNames(
+        'text-blue-600 hover:underline hover:opacity-75 dark:text-blue-400',
+        className,
+      )}
       data-testid={testId}
       {...props}
     >

src/components/Text/CodeSnippet.tsx

@@ -1,6 +1,37 @@
 import { SandpackProvider, SandpackLayout, SandpackCodeEditor } from '@codesandbox/sandpack-react';
 import { PropsWithClassName, PropsWithTestId } from '@leanstacks/react-common';
 import { useSettings } from 'hooks/useSettings';
+
+/**
+ * The GitHub light Sandpack theme.
+ * @see {@link https://sandpack.codesandbox.io/theme}
+ */
+const themeLight = {
+  colors: {
+    surface1: '#ffffff',
+    surface2: '#F3F3F3',
+    surface3: '#f5f5f5',
+    clickable: '#959da5',
+    base: '#24292e',
+    disabled: '#d1d4d8',
+    hover: '#24292e',
+    accent: '#24292e',
+  },
+  syntax: {
+    keyword: '#d73a49',
+    property: '#005cc5',
+    plain: '#24292e',
+    static: '#032f62',
+    string: '#032f62',
+    definition: '#6f42c1',
+    punctuation: '#24292e',
+    tag: '#22863a',
+    comment: {
+      color: '#6a737d',
+    },
+  },
+};
+
 /**
  * Properties for the `CodeSnippet` React component.
  * @param {string} code - The code snippet.
@@ -29,7 +60,11 @@ const CodeSnippet = ({
 
   return (
     <div className={className} data-testid={testId}>
-      <SandpackProvider template="react" theme={theme} files={files}>
+      <SandpackProvider
+        template="react"
+        theme={theme === 'light' ? themeLight : 'dark'}
+        files={files}
+      >
         <SandpackLayout>
           <SandpackCodeEditor
             className="!h-fit rounded-lg"

src/components/Text/__tests__/CodeSnippet.test.tsx

@@ -1,8 +1,17 @@
-import { describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from 'test/test-utils';
+
+import * as UseSettings from 'hooks/useSettings';
+
 import CodeSnippet from '../CodeSnippet';
 
 describe('CodeSnippet', () => {
+  const useSettingsSpy = vi.spyOn(UseSettings, 'useSettings');
+
+  beforeEach(() => {
+    useSettingsSpy.mockReturnValue({ theme: 'light' });
+  });
+
   it('should render successfully', async () => {
     // ARRANGE
     render(<CodeSnippet code="<></>" />);
@@ -38,4 +47,14 @@ describe('CodeSnippet', () => {
     // ASSERT
     expect(screen.getByTestId('code-snippet').textContent).toBe('<div>content</div>');
   });
+
+  it('should use dark theme', async () => {
+    // ARRANGE
+    useSettingsSpy.mockReturnValue({ theme: 'dark' });
+    render(<CodeSnippet code="<></>" />);
+    await screen.findByTestId('code-snippet');
+
+    // ASSERT
+    expect(screen.getByTestId('code-snippet').querySelector('.dark')).not.toBeNull();
+  });
 });

src/pages/ComponentsPage/components/AvatarComponents.tsx

@@ -47,7 +47,9 @@ const AvatarComponents = ({
   const columnHelper = createColumnHelper<ComponentProperty>();
   const columns = [
     columnHelper.accessor('name', {
-      cell: (info) => <span className="font-mono text-sky-600">{info.getValue()}</span>,
+      cell: (info) => (
+        <span className="font-mono text-sky-700 dark:text-sky-500">{info.getValue()}</span>
+      ),
       header: () => 'Name',
     }),
     columnHelper.accessor('description', {

src/pages/ComponentsPage/components/BadgeComponents.tsx

@@ -41,7 +41,9 @@ const BadgeComponents = ({
   const columnHelper = createColumnHelper<ComponentProperty>();
   const columns = [
     columnHelper.accessor('name', {
-      cell: (info) => <span className="font-mono text-sky-600">{info.getValue()}</span>,
+      cell: (info) => (
+        <span className="font-mono text-sky-700 dark:text-sky-500">{info.getValue()}</span>
+      ),
       header: () => 'Name',
     }),
     columnHelper.accessor('description', {
@@ -86,25 +88,31 @@ const BadgeComponents = ({
 
       <div className="my-8">
         <div className="mb-2 flex place-content-center rounded border border-neutral-500/10 p-4 dark:bg-neutral-700/25">
-          <Badge className="!bg-blue-500" testId="my-badge">
+          <Badge className="!bg-blue-600 dark:!bg-blue-700" testId="my-badge">
             19
           </Badge>
         </div>
         <CodeSnippet
           className="my-2"
-          code={`<Badge className='!bg-blue-500' testId='my-badge'>19</Badge>`}
+          code={`<Badge className='!bg-blue-600 dark:!bg-blue-700' testId='my-badge'>19</Badge>`}
         />
       </div>
 
       <div className="my-8">
         <div className="mb-2 flex place-content-center rounded border border-neutral-500/10 p-4 dark:bg-neutral-700/25">
-          <Badge className="!bg-neutral-500 uppercase" testId="badge-status-closed">
+          <Badge
+            className="!bg-neutral-500 uppercase dark:!bg-neutral-300 dark:text-black"
+            testId="badge-status-closed"
+          >
             Closed
           </Badge>
         </div>
         <CodeSnippet
           className="my-2"
-          code={`<Badge className="!bg-neutral-500 uppercase" testId="badge-status-closed">
+          code={`<Badge
+  className="!bg-neutral-500 uppercase dark:!bg-neutral-300 dark:text-black"
+  testId="badge-status-closed"
+>
   Closed
 </Badge>`}
         />

src/pages/ComponentsPage/components/ButtonComponents.tsx

@@ -49,7 +49,9 @@ const ButtonComponents = ({
   const columnHelper = createColumnHelper<ComponentProperty>();
   const columns = [
     columnHelper.accessor('name', {
-      cell: (info) => <span className="font-mono text-sky-600">{info.getValue()}</span>,
+      cell: (info) => (
+        <span className="font-mono text-sky-700 dark:text-sky-500">{info.getValue()}</span>
+      ),
       header: () => 'Name',
     }),
     columnHelper.accessor('description', {

src/pages/ComponentsPage/components/CardComponents.tsx

@@ -64,7 +64,9 @@ const CardComponents = ({
   ];
   const columns = [
     columnHelper.accessor('name', {
-      cell: (info) => <span className="font-mono text-sky-600">{info.getValue()}</span>,
+      cell: (info) => (
+        <span className="font-mono text-sky-700 dark:text-sky-500">{info.getValue()}</span>
+      ),
       header: () => 'Name',
     }),
     columnHelper.accessor('description', {