mirror of
https://github.com/supabase/supabase.git
synced 2026-09-07 02:20:52 +08:00
f09d35cfd5
Closes DOCS-1283 https://github.com/user-attachments/assets/6e55a27f-6f73-453b-b98f-e91d3c14a9e4 ## Problem Three defects in the docs code block: - The scroll container has no `tabindex`. On `/guides/database/tables`, 18 blocks, none focusable, 2 overflowing at 1280px. Tab skips the scroll region, so a keyboard-only user cannot scroll code that runs off the edge. - The container has `role="group"` with no accessible name, so it announces as bare "group". - The line-number gutter has no `aria-hidden`, so digits are read inline with the code. A block linearizes as `1import { createClient } from '@supabase/supabase-js'23const supabase = ...`, with lines 2 and 3 collapsing into "23". Four more surfaced while testing the fix: - The wrap and copy buttons were absolutely positioned inside the element that scrolls, so `right-2` measured against the scrollable content box. Scrolling dragged them out of the corner into the middle of the code. This one predates the PR. - The buttons preceded the code in the DOM, so a screen reader read two actions before naming what they act on. - `focus-within` only fired for the buttons, so focusing the block left the controls invisible. - Both buttons set an `aria-label` identical to their tooltip text, and Radix points `aria-describedby` at the tooltip on focus, producing "Copy code, button, Copy code". ## Solution Keyboard: - Split the scroll region out of the positioning container, so the controls stay pinned. - Give the scroll region a `tabIndex` and a focus ring. - Reveal the controls on `group-focus-within`. Screen reader: - Name the region `<language>, <n> lines`. Code content stays readable; the summary goes in the name so the group can be skipped or stepped into. - Map fence aliases to spoken names, so `ts` announces as TypeScript. Only the ambiguous ones; `bash`, `python`, `kotlin`, `dart`, `swift` already read fine. - `aria-hidden` the gutter. The numbers are already `select-none`, and copy takes its content from the source string rather than the DOM, so copy behavior is unchanged. - Order the controls after the code. - Announce the word wrap toggle through a live region, matching the copy button. - Opt both buttons out of Radix's generated description. Also moved the `data-wrapped` side effect out of the `setIsWrapped` updater, since React calls updaters twice under StrictMode. ## Manual testing 1. Open `/docs/guides/database/tables`. 2. Run `document.querySelectorAll('.code-scroll[tabindex="0"]').length` in the console. Expect `18`. 3. Run `[...document.querySelectorAll('.code-scroll')].map(b => b.getAttribute('aria-label'))`. Expect entries like `SQL, 11 lines` and `bash, 2 lines`, plus one bare `2 lines` for the fence with no language. 4. Tab to a code block. Expect a visible focus ring, and the wrap and copy buttons to appear. 5. Press ArrowRight on the block under "Basic data loading", which overflows. Expect it to scroll, and the buttons to stay in the top-right corner. 6. Press Enter on the wrap button. Expect the code to wrap and a screen reader to announce "Word wrap enabled". 7. With VoiceOver on, focus a code block. Expect "SQL, 11 lines, code block", then the code read without line numbers interleaved. Focus each button and expect its name once, not twice. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Accessibility** - Improved code block labels for screen readers, including programming language and line count. - Added announcements when word wrap is enabled or disabled. - Enhanced keyboard focus behavior for code block controls. - **Usability** - Kept code block controls visible while scrolling through code. - Improved wrapped-code overflow handling. - Removed redundant tooltip descriptions for copy and word-wrap controls. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import { type CSSProperties } from 'react'
|
|
|
|
// As defined in @shikijs/core/dist/chunk-tokens.d.mts
|
|
enum FontStyle {
|
|
NotSet = -1,
|
|
None = 0,
|
|
Italic = 1,
|
|
Bold = 2,
|
|
Underline = 4,
|
|
}
|
|
|
|
export function getFontStyle(styleFlags: number): CSSProperties {
|
|
let style: CSSProperties = {}
|
|
|
|
if (styleFlags & FontStyle.Italic) {
|
|
;(style ??= {}).fontStyle = 'italic'
|
|
}
|
|
|
|
if (styleFlags & FontStyle.Bold) {
|
|
;(style ??= {}).fontWeight = 'bold'
|
|
}
|
|
|
|
if (styleFlags & FontStyle.Underline) {
|
|
;(style ??= {}).textDecoration = 'underline'
|
|
}
|
|
|
|
return style
|
|
}
|
|
|
|
// Fence aliases a screen reader would otherwise read letter by letter
|
|
const LANGUAGE_LABELS: Record<string, string> = {
|
|
c: 'C',
|
|
html: 'HTML',
|
|
js: 'JavaScript',
|
|
json: 'JSON',
|
|
jsx: 'JavaScript',
|
|
py: 'Python',
|
|
sh: 'Shell',
|
|
shell: 'Shell',
|
|
sql: 'SQL',
|
|
toml: 'TOML',
|
|
ts: 'TypeScript',
|
|
tsx: 'TypeScript',
|
|
yaml: 'YAML',
|
|
}
|
|
|
|
export function getCodeBlockLabel(lang: string | null, lineCount: number): string {
|
|
const lines = `${lineCount} ${lineCount === 1 ? 'line' : 'lines'}`
|
|
if (!lang) return lines
|
|
return `${LANGUAGE_LABELS[lang] ?? lang}, ${lines}`
|
|
}
|