🎨 Palette: Improve table accessibility in telemetry timeline#96
🎨 Palette: Improve table accessibility in telemetry timeline#96igor-holt wants to merge 12 commits into
Conversation
Implements the QuantumGPUClient architecture to enable direct, zero-orchestration communication between GPUs and QPUs. This includes: - `IHardwareQPUInterface`: Abstract base class for QPU hardware interaction (DMA setup, event registration). - `QuantumGPUClient`: Client class to manage shared buffers and event creation. - `QPUEvent` and `GPUCompletionEvent`: Classes representing hardware synchronization signals. - `tests/test_quantum_gpu_client.py`: Unit tests verifying the API and workflow using a mock interface. This implementation lays the groundwork for ultra-low latency hybrid quantum-classical computing by removing CPU orchestration overheads.
…n-11725920309534026459
Co-authored-by: igor-holt <125706350+igor-holt@users.noreply.github.com>
Co-authored-by: igor-holt <125706350+igor-holt@users.noreply.github.com>
Co-authored-by: igor-holt <125706350+igor-holt@users.noreply.github.com>
Co-authored-by: igor-holt <125706350+igor-holt@users.noreply.github.com>
…elemetry Add Next.js telemetry visualization dashboard with Recharts integration
Links to Igor Holt, AI Architecture, Genesis Conductor ecosystem. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Added a visually hidden `<caption>` to the table in `TelemetryTimeline.tsx` to provide a clear summary for screen reader users. Also explicitly added `scope="col"` to `<th>` elements to ensure appropriate relationships between header and data cells. Documented the learning about inline styles for visually hidden components when utility classes are absent in `.Jules/palette.md`. Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request improves the accessibility of the telemetry data table by adding a visually hidden caption and defining column scopes for table headers. It also updates the project's accessibility documentation to reflect these practices. The review feedback identifies that the clip CSS property used in the inline styles is deprecated and should be replaced or supplemented with clipPath: 'inset(50%)'. Additionally, it is recommended to use a global .sr-only CSS class instead of verbose inline styles to improve code maintainability.
| {/* Optional: Raw Table for Details */} | ||
| <div style={{ overflowX: 'auto' }}> | ||
| <table style={{ width: '100%', borderCollapse: 'collapse' }}> | ||
| <caption style={{ position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', whiteSpace: 'nowrap', borderWidth: 0 }}>Detailed list of telemetry logs including event names and predictions</caption> |
There was a problem hiding this comment.
The clip CSS property is deprecated. For better compatibility with modern browsers and adherence to current standards, it is recommended to use clipPath: 'inset(50%)' alongside it. Additionally, consider defining a reusable .sr-only class in app/globals.css instead of using verbose inline styles to improve maintainability and keep the JSX clean.
| <caption style={{ position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', whiteSpace: 'nowrap', borderWidth: 0 }}>Detailed list of telemetry logs including event names and predictions</caption> | |
| <caption style={{ position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', clipPath: 'inset(50%)', whiteSpace: 'nowrap', borderWidth: 0 }}>Detailed list of telemetry logs including event names and predictions</caption> |
| @@ -0,0 +1,3 @@ | |||
| ## 2024-05-15 - Data Table Accessibility | |||
| **Learning:** For Next.js projects lacking utility classes like `.sr-only` (e.g., Tailwind not configured), data tables must use explicit inline CSS styles for visually hidden `<caption>` elements to ensure screen reader accessibility without breaking layout. | |||
| **Action:** Always verify the availability of `.sr-only` utility classes in `globals.css` or equivalent files. If absent, apply the standard visually hidden inline style block `{{ position: "absolute", width: "1px", height: "1px", padding: 0, margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: 0 }}` to `<caption>` tags. | |||
There was a problem hiding this comment.
This action item promotes the use of inline styles for accessibility, which is a maintainability anti-pattern when a global stylesheet is available. A better practice is to define a .sr-only class in globals.css. Furthermore, the suggested style block should be updated to include clipPath: "inset(50%)" as clip is deprecated.
💡 What: Added a visually hidden
<caption>element and explicitscope="col"attributes to table headers incomponents/TelemetryTimeline.tsx. Also added a.Jules/palette.mdjournal entry detailing the approach for styling visually hidden elements in Next.js applications without utility classes.🎯 Why: To improve screen reader accessibility for the telemetry data table without affecting the visual layout.
📸 Before/After: No visual changes.
♿ Accessibility: Provides necessary semantic structure (
scopeandcaption) to help assistive technologies navigate and describe the table contents.PR created automatically by Jules for task 13250069957008179780 started by @igor-holt