🎨 Palette: Improve table accessibility in telemetry timeline#99
🎨 Palette: Improve table accessibility in telemetry timeline#99igor-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>
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 introduces documentation for a screen-reader-only text pattern and implements it within the TelemetryTimeline component by adding a visually hidden table caption and column scopes. The review feedback recommends using a global utility class instead of inline styles to enhance maintainability, updating the deprecated 'clip' property to 'clip-path', and shortening the caption text for a better screen reader experience.
| @@ -0,0 +1,3 @@ | |||
| ## 2024-05-24 - Screen Reader Only Text Pattern | |||
| **Learning:** The application does not define utility classes like `.sr-only` for visually hiding text for screen readers without breaking layout. | |||
| **Action:** Use an explicit inline CSS object with styles like `position: absolute`, `width: 1px`, `height: 1px`, `padding: 0`, `margin: -1px`, `overflow: hidden`, `clip: rect(0, 0, 0, 0)`, `whiteSpace: nowrap`, and `borderWidth: 0` when adding accessibility captions or text that needs to be visually hidden. | |||
There was a problem hiding this comment.
Promoting the use of a large inline CSS object for a recurring pattern like sr-only (screen reader only) is a maintainability risk. It leads to code duplication and makes the JSX harder to read. A better approach is to define a utility class in the global stylesheet (e.g., app/globals.css). Additionally, the clip property is deprecated; modern implementations should include clip-path: inset(50%) for better compatibility.
| **Action:** Use an explicit inline CSS object with styles like `position: absolute`, `width: 1px`, `height: 1px`, `padding: 0`, `margin: -1px`, `overflow: hidden`, `clip: rect(0, 0, 0, 0)`, `whiteSpace: nowrap`, and `borderWidth: 0` when adding accessibility captions or text that needs to be visually hidden. | |
| **Action:** Define a utility class (e.g., .sr-only) in app/globals.css to handle visually hiding elements. This ensures consistency across the codebase and keeps component styles clean. The class should include position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;. |
| <caption style={{ position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', whiteSpace: 'nowrap', borderWidth: 0 }}> | ||
| Telemetry timeline details including log ID, UTC time, event name, and prediction probabilities. | ||
| </caption> |
There was a problem hiding this comment.
Using a verbose inline style object for accessibility is difficult to maintain. It is recommended to use a CSS utility class. Furthermore, the clip property is deprecated. Adding clipPath: 'inset(50%)' provides better support for modern browsers. Also, consider making the caption text more concise, as it will be announced by screen readers every time the table is accessed.
| <caption style={{ position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', whiteSpace: 'nowrap', borderWidth: 0 }}> | |
| Telemetry timeline details including log ID, UTC time, event name, and prediction probabilities. | |
| </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', border: 0 }}> | |
| Telemetry timeline details | |
| </caption> |
There was a problem hiding this comment.
Pull request overview
Improves accessibility of the telemetry timeline “raw details” table by ensuring header cells are correctly associated with columns and by adding a descriptive (visually hidden) table caption for screen readers.
Changes:
- Added a visually hidden
<caption>to the telemetry details table to provide an accessible table description. - Added
scope="col"to table header cells to improve header-to-cell association. - Documented the visually-hidden inline style approach in the Palette journal.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| components/TelemetryTimeline.tsx | Adds accessible caption + column header scoping for the telemetry details table. |
| .Jules/palette.md | Records the repo pattern for visually hidden, screen-reader-only text (since no global utility exists). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
💡 What: Added
scope="col"to<th>elements and an inline visually-hidden<caption>to the data table inTelemetryTimeline.tsx. Recorded the inline visual-hide style pattern to the Palette journal.🎯 Why: To improve the table's accessibility for screen reader users by properly associating headers with cells and providing a descriptive caption without breaking visual layout.
♿ Accessibility: Improved screen reader support for the raw details data table.
PR created automatically by Jules for task 363365765798755857 started by @igor-holt