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.
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])