[Editor] Improve accessibility, responsive navigation, and browser regression coverage

[milos-plavsic]

Summary

Now that the Security Insights Editor/Wizard from #186 is merged, this issue proposes a focused follow-up to improve usability and prevent regressions.

Proposed scope

• Improve keyboard navigation, visible focus states, semantic labels, validation announcements, and screen-reader behavior.
• Improve responsive layout across desktop, tablet, and mobile widths.
• Make section and submenu navigation reliable when moving between menu items.
• Add browser-level regression coverage for opening the editor, navigating sections, importing YAML, editing fields, exporting, and downloading the result.
• Include representative malformed-input and round-trip import/export cases where appropriate.

Acceptance criteria

• The primary editor workflow is usable with keyboard-only input.
• Focus order and error states are visible and understandable.
• Navigation remains usable at supported viewport sizes without accidental submenu closure or clipped content.
• CI exercises the critical browser workflow in addition to the existing unit/integration tests and schema-fallback drift guard from ci: run editor test suite in CI workflow #193.
• Tests cover at least one valid import/export round trip and representative invalid input.

Notes

This is intended as a bounded follow-up to #165 and #186. Before implementation, maintainers can prioritize the accessibility, responsive-layout, and browser-testing parts or split them into separate issues.

I am happy to prepare a small technical plan and submit an incremental PR after the scope is confirmed.

[jmeridth]

This looks good to me. Each proposed scope bullet point could be its own pull request, correct? I'm good with the PR descriptions describing purpose/change/why instead of a full blown technical plan. wdyt? /cc @eddie-knight

[milos-plavsic]

Yes, exactly — I think separate, incremental pull requests will make the changes easier to review and validate.

I would split the work into:

1. keyboard navigation, focus states, semantic labels and accessible validation announcements;
2. responsive layout and reliable section/submenu navigation;
3. browser-level coverage for the primary editor workflow; and
4. malformed-input and import/export round-trip regression cases, either as a separate PR or alongside the browser coverage where they naturally overlap.

I’ll start with the accessibility and keyboard-navigation PR, keeping it narrowly scoped and including focused regression coverage. Each PR description will explain the purpose, change and rationale, without a separate full technical plan.

Thanks — this gives me a clear way forward.