Accessible Ghost card menus: Ember-layer key handlers or upstream Lexical changes?

Recommendation

Ghost should adopt a hybrid approach: keep Ember‑specific ARIA roles and key handlers in the admin layer for immediate control, while moving generic focus‑management and navigation logic into a reusable Lexical plugin.

Why the hybrid approach is preferred

Likely explanation

By separating concerns, Ghost gains fast iteration on card‑menu chrome (Ember) without waiting for Lexical releases, and the shared editor core receives upstream‑friendly focus handling that reduces duplicate code and future re‑work when Lexical evolves.

Confirmed facts

• Ghost 5.x uses Lexical as the editor core; the Ember admin still renders card insertion and reordering menus.
• Lexical currently provides limited ARIA semantics for custom card UI, so Ghost must supply its own roles and key handlers to meet WCAG 2.1 AA.
• A pure Ember patch can be shipped quickly but risks divergence as Lexical changes.
• Contributing generic focus support to Lexical improves the shared core but depends on an upstream review cycle.

Implementation steps for the hybrid path

1. Identify Ember components that render card menus (e.g., gh-card-menu) and add the necessary ARIA roles (role="menu", role="menuitem") and keyboard handlers (arrow keys, Enter, Escape).
2. Develop a Lexical plugin (@ghost/lexical-card-menu-focus) that:
   • Provides a focus trap for the menu.
   • Exposes arrow‑key navigation via Lexical’s command system.
   • Uses ARIA live regions to announce state changes.
3. In the Ember component, initialize the Lexical plugin when the menu opens and delegate key events to it after handling Ember‑specific chrome (e.g., closing the menu on Escape).
4. Ensure that only one set of ARIA attributes is rendered: Ember adds the roles; the Lexical plugin should avoid duplicating them and only manage focus.
5. Run Ghost’s internal accessibility audit (axe‑core) after each change and verify no ARIA violations in card menus.
6. Manually test with NVDA or VoiceOver: open a card menu, navigate with arrow keys, activate items, close with Escape, and confirm that focus returns to the triggering button.
7. Inspect the rendered DOM (via browser devtools) to confirm that each menu element has a single role attribute and that key‑event listeners are attached either to the Ember component or the Lexical plugin, but not both.
8. Optionally, temporarily disable the Ember handlers (e.g., by commenting out the keydown listener) and observe that the Lexical plugin still provides functional navigation; then re‑enable and verify that no duplicate listeners cause focus traps.

Missing diagnostic detail

If the Lexical roadmap includes built‑in ARIA roles for custom block menus in the next release, the balance could shift toward pushing more semantics upstream. Confirming Lexical’s planned support for card‑menu ARIA would change the recommendation.