@godxjp/ui 28.7.0 → 28.9.0

package/docs/showcase/table-expandable-rows.tsx

@@ -299,7 +299,10 @@ function DetailPanel({ employee }: { employee: Employee }) {
           {/* Per-day breakdown — quiet nested list, real Card chrome */}
           <Card>
             <CardHeader>
-              <CardTitle level={2} className="text-[length:var(--font-size-xs)]">
+              <CardTitle
+                level={2}
+                className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))]"
+              >
                 今週の打刻
               </CardTitle>
               <CardAction>

package/docs/showcase/table-footer-totals.tsx

@@ -32,6 +32,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  ScrollArea,
   Table,
   TableBody,
   TableCell,
@@ -211,7 +212,16 @@ export default function Demo() {
         {/* flush so the table meets the card edge; vertical scroll inside the
             card with header pinned top and totals pinned bottom. */}
         <CardContent flush>
-          <div className="max-h-80 overflow-auto">
+          {/* A SCROLLPORT IS A COMPONENT, not a `div` with `overflow-auto` (gh#825).
+              This was `<div className="max-h-80 overflow-auto">`, and axe called it correctly:
+              125px of rows below the fold, no tab stop, and — unlike every other scrolling box in
+              these docs — no focusable cell inside to reach them with, so `scrollable-region-focusable`
+              failed. WCAG 2.1.1: content a mouse can reach and a keyboard cannot.
+
+              `ScrollArea` is the fix rather than a bare `tabIndex={0}`, because a named stop is what
+              gh#817/gh#821 settled on: it brings `role="group"` and a localized accessible name, and
+              it withholds all three while there is nothing to scroll. */}
+          <ScrollArea className="max-h-80" label="勤怠集計表">
             <Table>
               <TableHeader className="bg-secondary sticky top-0 z-10">
                 <TableRow>
@@ -285,7 +295,7 @@ export default function Demo() {
                 </TableRow>
               </tfoot>
             </Table>
-          </div>
+          </ScrollArea>
         </CardContent>
       </Card>