🎨 Palette: Add accessible data table attributes in Telemetry Timeline

[igor-holt]

💡 What: Added a visually hidden <caption> element and scope="col" attributes to the data table in TelemetryTimeline.tsx.
🎯 Why: To improve accessibility for screen readers navigating the telemetry data table, ensuring the table's purpose is announced and column headers are explicitly associated with their respective data cells.
📸 Before/After: The visual appearance remains identical due to the inline sr-only styling pattern used for the caption.
♿ Accessibility: Significant improvement in screen reader navigation and compliance.

---

PR created automatically by Jules for task 18297350507240726525 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 the accessibility of data tables by introducing captions and column scopes in the TelemetryTimeline component, along with corresponding documentation in the palette guide. The review feedback points out the use of the deprecated 'clip' CSS property and recommends updating it to 'clipPath: inset(50%)' in both the implementation and the documentation to align with modern standards.

[gemini-code-assist]

The clip property is deprecated. For modern browsers, it is recommended to use clipPath: 'inset(50%)' to visually hide elements while maintaining accessibility.

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 style={{ position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clipPath: 'inset(50%)', whiteSpace: 'nowrap', borderWidth: 0 }}>Telemetry Data Details</caption>

[gemini-code-assist]

The recommended CSS pattern in the documentation uses the deprecated clip property. It should be updated to use clipPath: 'inset(50%)' to align with modern best practices.

Suggested change

**Action:** Always include a `<caption>` and `scope="col"`/`scope="row"` attributes on data tables. If a visually hidden caption is required for design reasons and utility classes are missing, use the specific inline CSS pattern: `style={{ position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', whiteSpace: 'nowrap', borderWidth: 0 }}`.

**Action:** Always include a `<caption>` and `scope="col"`/`scope="row"` attributes on data tables. If a visually hidden caption is required for design reasons and utility classes are missing, use the specific inline CSS pattern: `style={{ position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clipPath: 'inset(50%)', whiteSpace: 'nowrap', borderWidth: 0 }}`.