refactor(storybook): hide page headers and preserve accessibility

StoryPageHeader no longer shows the page title, kicker, description or the SW group notice; it renders only a visually hidden H1 with the Story title, so the preview keeps a page heading for screen readers while the first section starts at the top gutter (unchanged position).

- OrgChart verify-p8 / p9 / p9-1 / p9-2-composition wait for the first visible StoryPage content block and read the page H1 instead of .sb-page-title; existing expectations are unchanged.
- SW overview browser test clicks the page gutter as its outside-click target.
- Drop the unused .sb-page-description from the SW Storybook hide rules.
- Update the Storybook page frame rule in the project guideline.
This commit is contained in:
shkim4 committed 2026-11-11 15:50:39 +09:00
1 parent f22428548a
commit 63b3ab010b
11 files changed
+59 -105

No files matched your search

+13 -31
View File
@@ -1,9 +1,9 @@
import { createContext, useContext, type ReactNode } from "react"
import { createContext, type ReactNode } from "react"
import "./story-page.css"
// Storybook presentation only (not part of @hm-design/ui): the common frame of a representative Story page.
// Page → Header (title, description) → Sections (title, description, specimen). It never styles the component being reviewed.
// Inner and title follow Foundation / Color; the section header → content split follows Center Graphic / 교량.
// Page → Sections (title, description, specimen). It never styles the component being reviewed.
// Inner follows Foundation / Color; the section header → content split follows Center Graphic / 교량.
// A Story using it sets `parameters.layout: "fullscreen"` so the page owns its inner padding.
// Lets StateBoard render its specimen labels one level below the section heading.
@@ -13,36 +13,18 @@ export function StoryPage({ className, children }: { className?: string; childre
return <div className={className ? `sb-page ${className}` : "sb-page"}><div className="sb-page-inner">{children}</div></div>
}
// Group notice shown directly under the page title (H1 → notice → description). A Story group opts in through a decorator
// that provides this context (e.g. src/sw/sw-story-notice.tsx); without a provider nothing is rendered.
// Group notice context. Still provided by src/sw/sw-story-notice.tsx, but nothing renders it since the page header was
// removed from the Storybook frame (2026-11-11).
export const StoryNoticeContext = createContext<ReactNode>(null)
// Representative (sidebar) Stories omit `kicker`: the sidebar path already names the category.
// Hidden verification Stories keep passing it so their page structure stays unchanged.
export function StoryPageHeader({ kicker, title, description }: { kicker?: string; title: string; description?: ReactNode }) {
const notice = useContext(StoryNoticeContext)
return (
<header className="sb-page-header">
{kicker ? <p className="sb-page-kicker">{kicker}</p> : null}
<h1 className="sb-page-title">{title}</h1>
{notice ? <StoryNotice>{notice}</StoryNotice> : null}
{description ? <p className="sb-page-description">{description}</p> : null}
</header>
)
}
// Notice row (icon + text) under the page title, one level below it (Page Header description type and color).
// No box, background or border. Icon: Group 1171290812.svg (circle + "!"), colors via currentColor.
export function StoryNotice({ children }: { children: ReactNode }) {
return (
<p className="sb-notice" data-story-notice="">
<svg className="sb-notice-icon" width="14" height="14" viewBox="0 0 29 29" fill="none" aria-hidden="true" focusable="false">
<path d="M15.7415 6L15.5383 17.3984H13.3743L13.1711 6H15.7415ZM14.4602 22.1484C14.0279 22.1484 13.6581 21.9974 13.3508 21.6953C13.0435 21.388 12.8925 21.0182 12.8977 20.5859C12.8925 20.1589 13.0435 19.7943 13.3508 19.4922C13.6581 19.1849 14.0279 19.0312 14.4602 19.0312C14.8821 19.0312 15.2467 19.1849 15.554 19.4922C15.8612 19.7943 16.0175 20.1589 16.0227 20.5859C16.0175 20.8724 15.942 21.1354 15.7961 21.375C15.6555 21.6094 15.468 21.7969 15.2336 21.9375C14.9993 22.0781 14.7415 22.1484 14.4602 22.1484Z" fill="currentColor" />
<circle cx="14.5" cy="14.5" r="13.5" stroke="currentColor" strokeWidth="2" />
</svg>
<span className="sb-notice-text">{children}</span>
</p>
)
// 2026-11-11 (user request): the Storybook page header (kicker, description and group notice) is no longer shown, so every
// page visually starts with its first section. Only the title stays, as a visually hidden H1 (no box, no space), so the
// preview document keeps one page heading above its H2 sections: the preview's own document title is the Story ID and the
// iframe title is generic, so this is the only place a screen reader can identify the page.
// Stories keep their calls and props, so the visible header can be restored here.
// The product Page Header component (@hm-design/ui PageHeader) is unrelated and unchanged.
export function StoryPageHeader({ title }: { kicker?: string; title: string; description?: ReactNode }) {
return <h1 className="sb-page-a11y-title">{title}</h1>
}
// Headings and specimens share StoryPage's single Inner. Wide specimens own their local scroll frame.