React Review Audit

Score: 95/100 · 1 error · 7 warnings

Fix the following React Review diagnostics in my codebase.

## Errors (1)

1. [error] require-reduced-motion — package.json:0
   Project uses a motion library but has no prefers-reduced-motion handling — required for accessibility (WCAG 2.3.3)

## Warnings (7)

2. [warning] no-react19-deprecated-apis — src/App.js:4
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

3. [warning] click-events-have-key-events — src/Pages/Home/Home.jsx:35
   Enforce a clickable non-interactive element has at least one keyboard event listener.

4. [warning] no-static-element-interactions — src/Pages/Home/Home.jsx:35
   Static HTML elements with event handlers require a role.

5. [warning] label-has-associated-control — src/components/Login/Login.jsx:95
   A form label must have accessible text.

6. [warning] no-react19-deprecated-apis — src/components/Login/Login.jsx:1
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

7. [warning] rerender-state-only-in-handlers — src/components/Login/Login.jsx:18
   useState "passwordError" is updated but never read in the component's return — use useRef so updates don't trigger re-renders

8. [warning] rerender-state-only-in-handlers — src/components/Login/Login.jsx:19
   useState "emailError" is updated but never read in the component's return — use useRef so updates don't trigger re-renders

❌ Errors (1)

require-reduced-motion

Project uses a motion library but has no prefers-reduced-motion handling — required for accessibility (WCAG 2.3.3)

Add useReducedMotion() from your animation library, or a @media (prefers-reduced-motion: reduce) CSS query

package.json:0

⚠️ Warnings (7)

no-react19-deprecated-apis

useContext is superseded by use() on React 19+ — use() reads context conditionally inside hooks, branches, and loops; switch to import { use } from 'react'

Pass ref as a regular prop on function components — forwardRef is no longer needed in React 19+. Replace useContext(X) with use(X) for branch-aware context reads. Only enabled on projects detected as React 19+.

src/App.js:4
src/components/Login/Login.jsx:1

rerender-state-only-in-handlers

useState "passwordError" is updated but never read in the component's return — use useRef so updates don't trigger re-renders

Replace useState with useRef when the value is only mutated and never read in render — ref.current = ... updates without re-rendering the component

src/components/Login/Login.jsx:18
src/components/Login/Login.jsx:19

click-events-have-key-events

Enforce a clickable non-interactive element has at least one keyboard event listener.

Visible, non-interactive elements with click handlers must have one of keyup, keydown, or keypress listener.

src/Pages/Home/Home.jsx:35

no-static-element-interactions

Static HTML elements with event handlers require a role.

Add a role attribute to this element, or use a semantic HTML element instead.

src/Pages/Home/Home.jsx:35

label-has-associated-control

A form label must have accessible text.

Ensure the label either has text inside it or is accessibly labelled using an attribute such as aria-label, or aria-labelledby. You can mark more attributes as accessible labels by configuring the labelAttributes option.

src/components/Login/Login.jsx:95

_{Last scored May 14, 2026 at 7:35 AM UTC. Maintained by React Review.}