Frontend Accessibility Reviewer

I have completed the accessibility audit for the login component. It currently fails several WCAG AA requirements regarding interactivity and focus visibility.

[Frontend Accessibility Audit Report]

🚨 Critical Issues (Must Fix):

Non-semantic Interactivity: A div is used for a login action. Screen readers will not identify this as a clickable element, and it is not reachable via keyboard.

Missing Keyboard Support: The element lacks a tabindex, meaning keyboard-only users cannot navigate to the login trigger.

⌨️ Keyboard & Focus Check:

Focus Outline Hidden: The CSS explicitly removes the focus outline (outline: none), which is a WCAG failure. Users navigating via Tab will have no visual indicator of where they are.

• Tab Order: Element is currently excluded from the tab sequence.

🎨 Color & Visual Check:

• Visual state relies on the user knowing the div is a button without standard browser styling or roles.

🛠️ Specific Fixes Required:

Change this:

<div className="login-btn" onClick={handleLogin}>Login</div>

To this:

<button type="button" className="login-btn" onClick={handleLogin}>Login</button>

Change this:

.login-btn:focus { outline: none; }

To this:

.login-btn:focus { 
  outline: 2px solid #005fcc; 
  outline-offset: 2px; 
}

[Self-Check]

• Semantic HTML violations identified
• Keyboard navigation and focus states audited
• Color contrast and visual reliance checked
• Exact, copy-paste-ready code fixes provided

Next steps

• Replace the div with a semantic button to inherit native keyboard behavior.
• Update the global or component-level CSS to ensure focus rings are never suppressed.
• Test the login flow using only the Tab and Enter keys.