Skip to content

Move the plan bookmark out of the <h1> accessible name #162

Description

@HamptonMakes

Follow-up from #160.

The save-bookmark button mounts into #plan-bookmark-slot, which lives inside the <h1 class="page-header__title"> so the icon flows inline after the title's last word and lands sensibly on every wrap.

That's valid HTML (buttons are phrasing content), but it has an accessibility cost: the button's content contributes to the heading's accessible name, so screen readers announce the plan title with the bookmark control mixed in, and an interactive control lives inside the document heading.

Suggested direction: keep the visual behavior (bookmark trailing the final word at any wrap width) but restructure so the <h1> contains only the title text — e.g. an inline-flow wrapper where the <h1> and the bookmark slot are siblings sharing the same inline formatting context, or display: contents on a wrapper. Needs care: the current layout relies on the slot being in the same line box as the title's last word, and the slot is re-stamped by plan_bookmark_controller after every #plan-header Turbo replacement, so whatever structure replaces it must survive header broadcasts the same way.

Acceptance: VoiceOver announces the <h1> as just the plan title; bookmark still hugs the last word at 1440 → 390px; bookmark still re-mounts after a header broadcast.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions