🎨 Palette: Improve telemetry table accessibility

[igor-holt]

💡 What:

Added a visually hidden <caption> element and scope="col" attributes to the telemetry data table in TelemetryTimeline.tsx. Documented the learning about the lack of an .sr-only utility class in .Jules/palette.md.

🎯 Why:

To ensure the telemetry data table is accessible to users with screen readers. The caption provides context for the table, and the scope attributes properly associate the headers with the respective data columns.

📸 Before/After:

No visual changes; these are screen-reader specific accessibility improvements.

♿ Accessibility:

• The table now has a programmatically associated label (caption).
• Data cells are now correctly associated with their column headers.

---

PR created automatically by Jules for task 4608457611777816544 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 enhances the accessibility of the telemetry table by implementing a screen-reader-only caption and adding column scopes to header cells. It also updates the documentation to include these accessibility guidelines. The review feedback suggests replacing the verbose inline styles with a global .sr-only utility class in both the documentation and the component to improve maintainability and readability.

[gemini-code-assist]

Instead of recommending verbose inline styles for accessibility, it is better to define a standard .sr-only utility class in app/globals.css. This promotes reusability and keeps the component code clean. Documenting the use of inline styles as a standard practice can lead to significant technical debt as the project grows. Consider adding the following to your global stylesheet:

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}

Suggested change

	**Learning:** This app lacks utility classes like `.sr-only` for visually hiding elements. To make tables accessible to screen readers without breaking layout, use explicit inline CSS strings (e.g., `style={{ position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', whiteSpace: 'nowrap', borderWidth: 0 }}`) for elements like `<caption>`. Additionally, data tables must include `scope="col"` attributes on header cells (`<th>`).
	**Action:** When adding accessible text that shouldn't be visually displayed, use the verbose inline style object rather than assuming a utility class exists. Always include `caption` and `scope` on table elements.
	**Learning:** This app lacks utility classes like `.sr-only` for visually hiding elements. To maintain clean JSX and ensure consistency, a global utility class should be defined in `app/globals.css` rather than using verbose inline styles.
	**Action:** Add a `.sr-only` class to the global stylesheet and use it for elements like `<caption>` that should only be available to screen readers. Always include `caption` and `scope` on table elements.

[gemini-code-assist]

Using a large inline style object for a common utility like "screen-reader only" text is difficult to maintain. It is recommended to add a .sr-only class to app/globals.css and use className="sr-only" here. This ensures that the accessibility pattern is consistent across the entire application and keeps the JSX readable.

Suggested change

	<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 data details
	</caption>
	<caption className="sr-only">
	Telemetry data details
	</caption>

[Copilot]

Pull request overview

Improves the accessibility of the telemetry “raw details” table by adding programmatic labeling and clearer header associations, and documents the a11y approach used in this codebase.

Changes:

• Added a visually-hidden <caption> to the telemetry table for screen-reader context.
• Added scope="col" to table header cells to strengthen header/data associations.
• Documented the approach (given no .sr-only utility) in .Jules/palette.md.

Reviewed changes

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

File	Description
components/TelemetryTimeline.tsx	Adds a hidden caption and column header scopes for improved table accessibility.
.Jules/palette.md	Documents the visually-hidden styling approach and table a11y requirements for future changes.

---

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

[Copilot]

The visually-hidden caption style object is created inline on every render, which forces a new style object identity each time (and can trigger unnecessary DOM style updates). Consider hoisting this to a const visuallyHiddenStyle (typed as React.CSSProperties) outside the component, or memoizing it, and then referencing it from the caption.

[Copilot]

In the docs, the phrase "inline CSS strings" is a bit misleading here since React style={...} takes a style object (and you’re showing an object literal). Suggest rewording to "inline style objects" / "inline styles" to avoid confusion for future readers.