Detail state screen

canon

Minimal record-detail frame (back button + one line) for loading and not-found; same header geometry as the loaded detail.

Coupled to person-record.css: a detail route that does not load that sheet renders this frame unstyled.

Used in 2 files · 2 areas · 2× — pages/ProjectDetailPage, pages/UkolDetailPage

@acrm/ui <DetailStateScreen>.pr .pr-top .pr-ico .pr-name-topSource Story Legacy card Loading (skeleton).html

Keyboard

The back button is a real <button>, so it is the first and only tab stop in the frame, and Enter or Space fires it.
Because it sits at the same place and index as the back button of the loaded detail, keyboard focus does not jump when the record lands.
Nothing traps focus and nothing moves it automatically.

No role and no live region: this is a page, not an announcement.
The back button is named by its title (Zpět by default), which is what a screen reader reads. Change backLabel when back leads somewhere the word does not describe.
.pr-name-top is plain text, not a heading. A screen-reader user navigating by headings finds nothing on this screen — the host route should provide the document title.
Nothing announces the transition from Načítám… to the loaded record.

The back button takes the foundation ring from ds.css (outline: 2px solid var(--accent); outline-offset: 1px); person-record.css does not switch it off.
Focus ring --accent: 4.44:1 light, 3.83:1 dark.

Computed from packages/ui/src/tokens/tokens.css:

.pr-name-top uses the ink tone — 17.59:1 light, 14.53:1 dark.
The back arrow inherits the icon tone of the detail header, at or above the 3:1 non-text threshold in both themes.

The title is not a heading, so heading navigation skips this screen entirely.
The state change (loading → loaded, loading → not found) is silent.
The component is coupled to person-record.css; on a route that does not load that sheet it renders unstyled, and the visual promise of an unmoving header does not hold.