Skip to content

Commit c39c258

Browse files
rsbhclaude
andcommitted
fix: address CodeRabbit review — a11y, overflow, nested interactive
- Remove nested <a>/<button> — use RouterLink directly for nav arrows - Add aria-labels to settings open/close buttons - Add aria-hidden to decorative card image - Fix content-box overflow with calc() max-width - Add mobile breakpoints for landing page (768px) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 70ca8fc commit c39c258

4 files changed

Lines changed: 54 additions & 19 deletions

File tree

packages/chronicle/src/pages/LandingPage.module.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,3 +144,26 @@
144144
line-height: 1.4;
145145
color: var(--rs-color-foreground-base-primary);
146146
}
147+
148+
@media (max-width: 768px) {
149+
.header {
150+
flex-direction: column;
151+
gap: var(--rs-space-5);
152+
}
153+
154+
.title {
155+
font-size: 36px;
156+
}
157+
158+
.description {
159+
width: 100%;
160+
}
161+
162+
.card {
163+
width: 100%;
164+
}
165+
166+
.cardImage {
167+
max-width: 100%;
168+
}
169+
}

packages/chronicle/src/pages/LandingPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function LandingPage() {
2323
<div className={styles.grid}>
2424
{entries.map((entry, i) => (
2525
<RouterLink key={entry.href} to={entry.href} className={styles.card}>
26-
<div className={styles.cardImage}>
26+
<div className={styles.cardImage} aria-hidden='true'>
2727
<span className={`${styles.cardImageLabel} ${styles.cardImageLabelTop}`}>
2828
Fig_{String(i + 1).padStart(3, '0')}
2929
</span>

packages/chronicle/src/themes/paper/Page.module.css

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
.main {
22
flex: 1;
33
width: 90%;
4-
max-width: 1024px;
5-
box-sizing: content-box;
4+
max-width: calc(1024px + var(--rs-space-17));
65
margin: 0 auto;
76
padding-top: var(--rs-space-12);
87
padding-right: var(--rs-space-17);
@@ -45,10 +44,27 @@
4544
gap: var(--rs-space-2);
4645
}
4746

48-
.arrows a {
47+
.arrowLink {
4948
display: flex;
49+
align-items: center;
50+
justify-content: center;
5051
text-decoration: none;
51-
color: inherit;
52+
color: var(--rs-color-foreground-base-primary);
53+
padding: var(--rs-space-1);
54+
border-radius: var(--rs-radius-2);
55+
}
56+
57+
.arrowLink:hover {
58+
color: var(--rs-color-foreground-accent-primary);
59+
}
60+
61+
.arrowDisabled {
62+
display: flex;
63+
align-items: center;
64+
justify-content: center;
65+
color: var(--rs-color-foreground-base-tertiary);
66+
opacity: 0.4;
67+
padding: var(--rs-space-1);
5268
}
5369

5470
.breadcrumb {

packages/chronicle/src/themes/paper/Page.tsx

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -52,26 +52,22 @@ export function Page({ page, tree }: ThemePageProps) {
5252
<div className={styles.navLeft}>
5353
<div className={styles.arrows}>
5454
{prev ? (
55-
<RouterLink to={prev.url} aria-label='Previous page'>
56-
<IconButton size={2}>
57-
<ArrowLeftIcon width={14} height={14} />
58-
</IconButton>
55+
<RouterLink to={prev.url} className={styles.arrowLink} aria-label='Previous page'>
56+
<ArrowLeftIcon width={14} height={14} />
5957
</RouterLink>
6058
) : (
61-
<IconButton size={2} disabled>
59+
<span className={styles.arrowDisabled} aria-hidden='true'>
6260
<ArrowLeftIcon width={14} height={14} />
63-
</IconButton>
61+
</span>
6462
)}
6563
{next ? (
66-
<RouterLink to={next.url} aria-label='Next page'>
67-
<IconButton size={2}>
68-
<ArrowRightIcon width={14} height={14} />
69-
</IconButton>
64+
<RouterLink to={next.url} className={styles.arrowLink} aria-label='Next page'>
65+
<ArrowRightIcon width={14} height={14} />
7066
</RouterLink>
7167
) : (
72-
<IconButton size={2} disabled>
68+
<span className={styles.arrowDisabled} aria-hidden='true'>
7369
<ArrowRightIcon width={14} height={14} />
74-
</IconButton>
70+
</span>
7571
)}
7672
</div>
7773
<nav className={styles.breadcrumb}>
@@ -107,12 +103,12 @@ export function Page({ page, tree }: ThemePageProps) {
107103
}
108104
</IconButton>
109105
)}
110-
<IconButton size={2} onClick={() => setSettingsOpen(false)}>
106+
<IconButton size={2} onClick={() => setSettingsOpen(false)} aria-label='Close settings'>
111107
<XMarkIcon width={14} height={14} />
112108
</IconButton>
113109
</>
114110
) : (
115-
<IconButton size={2} onClick={() => setSettingsOpen(true)}>
111+
<IconButton size={2} onClick={() => setSettingsOpen(true)} aria-label='Open settings'>
116112
<AdjustmentsHorizontalIcon width={14} height={14} />
117113
</IconButton>
118114
)}

0 commit comments

Comments
 (0)