fix: improve accessibility for screen reader users

[arturbent0]

• Enable Monaco editor accessibility support (accessibilitySupport: 'on') to allow screen readers to read typed text and prevent focus jumping to autocomplete suggestions
• Add aria-label and aria-keyshortcuts to Run button to announce keyboard shortcut to screen readers
• Add role, aria-sort, tabIndex and keyboard support to DataGrid column headers
• Add aria-live region to connection test result message
• Add aria-label and aria-expanded to sidebar expand buttons, convert clickable divs to semantic button elements

Fixes #86

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (1 file)

• src/pages/Editor.tsx

Previous Review Summaries (3 snapshots, latest commit 6267fb8)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit 6267fb8)

Status: 1 Issue Found | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	0
WARNING	1
SUGGESTION	0

Issue Details (click to expand)

WARNING

File	Line	Issue
src/pages/Editor.tsx	2682	Run button announces Ctrl+Enter on macOS while the actual shortcut is Cmd+Enter

Files Reviewed (3 files)

• src/components/ui/DataGrid.tsx - previous issue resolved
• src/components/ui/SqlEditorWrapper.tsx - 0 issues
• src/pages/Editor.tsx - 1 issue

Fix these issues in Kilo Cloud

Previous review (commit 9ad5b6c)

Status: 1 Issue Found | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	0
WARNING	1
SUGGESTION	0

Issue Details (click to expand)

WARNING

File	Line	Issue
src/components/ui/DataGrid.tsx	706	Sort state is no longer communicated to assistive technologies

Files Reviewed (1 file)

• src/components/ui/DataGrid.tsx - 1 issue

Fix these issues in Kilo Cloud

Previous review (commit ce2a141)

Status: 1 Issue Found | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	0
WARNING	1
SUGGESTION	0

Issue Details (click to expand)

WARNING

File	Line	Issue
src/components/ui/DataGrid.tsx	708	aria-sort used on invalid role (role="button"). Should be on columnheader or native <th>.

Files Reviewed (14 files)

• src-tauri/Cargo.lock — 0 issues
• src/components/layout/sidebar/SidebarTableItem.tsx — 0 issues
• src/components/modals/NewConnectionModal.tsx — 0 issues
• src/components/ui/DataGrid.tsx — 1 issue
• src/components/ui/SqlEditorWrapper.tsx — 0 issues
• src/i18n/locales/de.json — 0 issues
• src/i18n/locales/en.json — 0 issues
• src/i18n/locales/es.json — 0 issues
• src/i18n/locales/fr.json — 0 issues
• src/i18n/locales/it.json — 0 issues
• src/i18n/locales/ja.json — 0 issues
• src/i18n/locales/ru.json — 0 issues
• src/i18n/locales/zh.json — 0 issues
• src/pages/Editor.tsx — 0 issues

Fix these issues in Kilo Cloud

---

_{Reviewed by kimi-k2.7-code-20260612 · Input: 42.3K · Output: 5.6K · Cached: 272.6K}

[kilo-code-bot]

Code Review Summary

Status: 1 Issue Found | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	0
WARNING	1
SUGGESTION	0

Issue Details (click to expand)

WARNING

File	Line	Issue
src/components/ui/DataGrid.tsx	708	aria-sort used on invalid role (role="button"). Should be on columnheader or native <th>.

Files Reviewed (14 files)

• src-tauri/Cargo.lock — 0 issues
• src/components/layout/sidebar/SidebarTableItem.tsx — 0 issues
• src/components/modals/NewConnectionModal.tsx — 0 issues
• src/components/ui/DataGrid.tsx — 1 issue
• src/components/ui/SqlEditorWrapper.tsx — 0 issues
• src/i18n/locales/de.json — 0 issues
• src/i18n/locales/en.json — 0 issues
• src/i18n/locales/es.json — 0 issues
• src/i18n/locales/fr.json — 0 issues
• src/i18n/locales/it.json — 0 issues
• src/i18n/locales/ja.json — 0 issues
• src/i18n/locales/ru.json — 0 issues
• src/i18n/locales/zh.json — 0 issues
• src/pages/Editor.tsx — 0 issues

Fix these issues in Kilo Cloud

[NewtTheWolf]

Thanks for tackling this — solid accessibility work! 🙏 The div→button conversions, the always-mounted aria-live region (exactly the right pattern so it actually gets announced), and the keyboard support on sort headers are all good, and the i18n is complete across all 8 locales. Typechecks clean.

Three small things — all optional, none blocking. Happy to merge as-is if you'd rather leave them:

1. aria-sort (mentioned in the description but not in the diff) — src/components/ui/DataGrid.tsx sort headers get role/tabIndex/aria-label, but not aria-sort="ascending|descending|none", which is what actually announces the current sort state to a screen reader. Would round out exactly what the PR set out to do.
2. Monaco accessibilitySupport: 'on' forces screen-reader rendering for every user; the default 'auto' already enables it when a screen reader is detected and is the recommended setting — worth considering 'auto' instead.
3. aria-keyshortcuts="Control+Enter" is hardcoded, so on macOS (Cmd+Enter) the announced shortcut won't match.

Want to fold these in? Otherwise it's good to go from my side. 👍

[arturbent0]

Thanks for the review @NewtTheWolf

1. I intentionally used aria-label with the sort state description instead of aria-sort, since the bot flagged that aria-sort is invalid on role="button" elements. The aria-label dynamically reflects the current sort state, which communicates the same information to screen readers without the invalid ARIA.
2. switched to auto
3. Fixed for mac users

[debba]

Thanks a lot for this, Artur. Accessibility is something we really care about and these are exactly the kind of changes that make a real difference for people, so I appreciate you taking the time.

I'll merge this shortly. Please keep them coming, improvements like this are genuinely important to us.

If you feel like it, come hang out on our Discord: https://discord.com/invite/K2hmhfHRSt