feat: add WCAG 2.1 AA accessibility improvements to webapp

[devin-ai-integration]

feat: add WCAG 2.1 AA accessibility improvements to webapp

Summary

Adds accessibility improvements to the owner dashboard webapp (docs/index.html) to improve WCAG 2.1 AA compliance. Changes include semantic HTML structure, ARIA roles for dynamic content, keyboard navigation support, and screen reader improvements.

Key changes:

• Skip-to-content link for keyboard users
• Semantic headings (<h1> for logo, <h2> for panel titles) and <main> landmark
• Label/input associations with for/id attributes
• Tablist pattern with role="tablist", role="tab", role="tabpanel" for action buttons
• Live regions: role="log" on activity log, role="alert" on warning box
• Help icon converted from <span> to focusable <button>
• Decorative icons hidden from screen readers with aria-hidden="true"
• External link has rel="noopener noreferrer" and "(opens in new tab)" screen reader text
• JavaScript updated to manage aria-selected state and focus on tab change

Review & Testing Checklist for Human

• Test keyboard navigation: Tab through the entire page and verify skip link appears, all interactive elements are reachable, and focus order is logical
• Test with a screen reader (VoiceOver on Mac, NVDA on Windows): Verify action buttons announce as tabs, log updates are announced, and form labels are read correctly
• Verify tablist behavior: Click each action button and confirm the correct panel shows, aria-selected updates, and focus moves to the panel's first input/button

Recommended Test Plan

1. Open the webapp in Chrome
2. Press Tab - skip link should appear at top left
3. Continue tabbing through all elements - verify logical order
4. Click Deposit button - verify focus moves to amount input
5. Run Lighthouse accessibility audit in DevTools

Notes

• Arrow key navigation between tabs is not implemented (would require additional JS)
• Color contrast was not audited - muted text colors may need verification
• The srAnnounce div was added for future use but is not currently populated by JS

Link to Devin run: https://app.devin.ai/sessions/861106c4151b439ebcb344694d9b611a
Requested by: Player 53627 (github.stagnate430@passmail.com) / @igor53627

[devin-ai-integration]

Original prompt from Player 53627

is there anything we can make better in the repo?


You only need to look in the following repo: igor53627/liq

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1b90d30

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}