🎨 Palette: Improve data table accessibility

[igor-holt]

🎨 Palette: Improve data table accessibility

💡 What: Added a visually hidden <caption> to the raw data table in TelemetryTimeline.tsx and added scope="col" attributes to all table headers (<th>).
🎯 Why: To make the data table more accessible for screen reader users by providing a clear description of the table's contents and explicitly associating headers with their respective columns.
♿ Accessibility:

• The <caption> provides context before a screen reader enters the table. Since the app lacks a .sr-only utility, inline CSS was used to visually hide it without removing it from the accessibility tree.
• scope="col" helps assistive technologies properly announce column headers when navigating data cells.

---

PR created automatically by Jules for task 6774318436958403667 started by @igor-holt

[google-labs-jules]

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

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]

Code Review

This pull request improves data table accessibility by adding a visually hidden caption and explicit column scopes to the telemetry timeline. It also documents these patterns in a new learning log. Feedback suggests replacing the deprecated clip property with clipPath and centralizing the screen-reader-only styles into a global CSS class to avoid maintenance overhead and technical debt.

[gemini-code-assist]

The clip property is deprecated. For better compatibility with modern browsers and adherence to current standards, clipPath: 'inset(50%)' should be included. Additionally, using a large inline style object for a common utility like 'screen-reader only' text is a maintenance burden. It is highly recommended to define a .sr-only class in app/globals.css and use it via the className prop instead of repeating these styles inline.

              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,
              }}

[gemini-code-assist]

This action encourages the use of inline styles for a standard accessibility pattern, which increases technical debt and makes global updates difficult. A more sustainable approach is to add a .sr-only utility class to app/globals.css. Furthermore, the recommended style should include clipPath: 'inset(50%)' as the clip property is deprecated.

[Copilot]

Pull request overview

Improves accessibility of the telemetry “raw data” table so screen readers have clearer table context and header associations.

Changes:

• Added a visually hidden <caption> to the telemetry data table to describe its contents for assistive technologies.
• Added scope="col" to each column header <th> to improve header-to-cell associations.
• Added a palette note documenting the approach/constraints used for visually hidden table captions in this app.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
components/TelemetryTimeline.tsx	Adds a hidden table caption and scope="col" on column headers for better screen reader support.
.Jules/palette.md	Documents the project constraint (no .sr-only) and prescribes an inline visually-hidden pattern for captions.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.