Skip to content

Add accessibility landmarks and ARIA attributes #57

Description

@ryuhmanov-m

Parent issue: #21

Context

The app lacks semantic HTML landmarks, making it difficult for screen readers and keyboard-only users to navigate.

Scope

  1. Add landmark roles to layout:
    • <main> for the chat/content area
    • <nav> for the sidebar
    • <aside> for panels (history, knowledge)
    • <header> for the top bar
  2. Add role="treeitem" to sidebar tree items (conversations, files)
  3. Wrap settings sections in <fieldset> with <legend>
  4. Add skip navigation link (hidden, visible on focus): "Skip to chat input"
  5. Ensure focus order follows visual order

References

  • Layout: src/app/layout.tsx, src/features/layout/
  • Sidebar: src/components/sidebar/Sidebar.tsx
  • Settings: src/components/settings/SettingsPanel.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilitya11y, keyboard nav, screen readersenhancementNew feature or requestfrontendNext.js / React frontendgood first issueGood for newcomers

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions