TehRiehlDeal
889cdda83f
eslint-plugin-jsx-a11y joins the lint step and found 19 violations on arrival - 15 orphaned labels, a clickable div, a combobox missing its required attributes, an autoFocus. All fixed, none suppressed, and the rule set stays enforcing so the next one fails CI. The two hand-rolled overlays were the worst of it. The notification bell was a div with div-onClick rows: nothing focusable, nothing announced, no way to close it from the keyboard. It is a real popover now - the trigger reports its state and the unread count, the panel is a labelled dialog, every row is a button with its actions beside it rather than nested inside it, Escape closes and returns focus. The Challenge Friend overlay had no role, no focus trap and no Escape, so Tab went straight through it into the page behind; it is the UI kit's Dialog now, which supplies all of that. Every form control has a label, including the three change-password fields that had only placeholders and a game-night join-password field that had nothing at all. Every icon-only button says what it does, including three versus buttons whose content collapsed to a bare spinner while loading. The search combobox follows the ARIA 1.2 pattern, with the role on the input; verified live that aria-expanded flips and aria-controls resolves to the listbox. State that changed silently is announced: link validation, both lobby countdowns (assertively - a 3-2-1 that launches the game is not something to miss), the game-night player list. The game header's "Passed Movie B" read identically in both states and only the icon differed, so a screen reader heard the wrong thing until B was reached. A skip-to-content link on every page, and a global reduced-motion rule that collapses every animation when the OS asks; the confetti overlay does not render at all under it. Addresses audit section 2.8.
47 lines
1.6 KiB
JavaScript
47 lines
1.6 KiB
JavaScript
import js from '@eslint/js'
|
|
import globals from 'globals'
|
|
import reactHooks from 'eslint-plugin-react-hooks'
|
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
|
import jsxA11y from 'eslint-plugin-jsx-a11y'
|
|
import tseslint from 'typescript-eslint'
|
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
|
|
|
export default defineConfig([
|
|
globalIgnores(['dist']),
|
|
{
|
|
files: ['**/*.{ts,tsx}'],
|
|
extends: [
|
|
js.configs.recommended,
|
|
tseslint.configs.recommended,
|
|
reactHooks.configs.flat.recommended,
|
|
reactRefresh.configs.vite,
|
|
// Accessibility at lint time. Before this, an orphaned <label>, an
|
|
// icon-only button with no name, or a clickable <div> with no role
|
|
// passed CI - which is how the whole login form, three password fields
|
|
// and a hand-rolled dialog ended up unreachable to a screen reader.
|
|
jsxA11y.flatConfigs.recommended,
|
|
],
|
|
languageOptions: {
|
|
// Matches the ES2022 target in tsconfig.app.json.
|
|
ecmaVersion: 2022,
|
|
globals: globals.browser,
|
|
},
|
|
rules: {
|
|
// Left at their recommended 'error' severity. These were previously
|
|
// downgraded to 'warn' so CI would pass, which meant every violation was
|
|
// invisible in CI, including the stale-closure and cascading-render bugs
|
|
// that downgrade was hiding. The underlying violations are fixed, so the
|
|
// rules stay enforcing.
|
|
'@typescript-eslint/no-unused-vars': [
|
|
'error',
|
|
{
|
|
argsIgnorePattern: '^_',
|
|
varsIgnorePattern: '^_',
|
|
caughtErrorsIgnorePattern: '^_',
|
|
destructuredArrayIgnorePattern: '^_',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
])
|