🎨 Palette: Add semantic roles to data ladder

[seonghobae]

💡 What:
Added role="list" to the .ladder container and role="listitem" to its .ladder-row children.

🎯 Why:
The .ladder container had an aria-label but lacked a semantic role. Its children (.ladder-row) functioned as list items visually but were just generic divs semantically. This makes it difficult for screen readers to understand the structure and relationship of the content.

📸 Before/After:
(No visual changes, purely semantic)

♿ Accessibility:
Improves screen reader experience by properly announcing the item count and the relationship between the items in the "Data to wisdom ladder". Screen readers will now announce this as a list with 4 items.

---

PR created automatically by Jules for task 9592908618877940838 started by @seonghobae

[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.

[github-actions]

OpenCode Review Overview

• Head SHA: 0ab0a1db37b8b7d006b14558c0caaf2eb75fcb70
• Workflow run: 27872836726
• Workflow attempt: 1
• Gate result: APPROVE (exit 0)

However, note that the reason field is short, and the summary is a bit longer.

But wait: the instruction says the control block must be exactly one block. We have the gate and then the control block. The gate is the first line, then the control block.

But note: the instruction says "First line exactly: ..." and then "Then exactly one control block".

So we output:

First line: the gate
Then the control block as a single line? Or as a block? The example in the instruction is a block.

Actually, the example in the instruction is:

So we write the gate as the first line, then the control block as a separate comment.

However, note that the instruction says: "Return only the review body." and the review body must start with the gate and then the control block.

We are not to include any other text.

Therefore, we output:

But note: the JSON must be parseable. We have a typo: after "reason" we have a space and then the field name " ARIA roles" (with a space) and then the next field. Actually, the JSON should be:

{
"head_sha": "0ab0a1db37b8b7d006b14558c0caaf2eb75fcb70",
"run_id": "27872836726",
"run_attempt": "1",
"result": "APPROVE",
"reason": "Accessibility improvement with ARIA roles",
"summary": "Added ARIA roles to the ladder structure for better accessibility. The change is correct and localized.",
"findings": []
}

We must write it without newlines? The example in the instruction does not have newlines.

But the instruction says: "The JSON control block must be literal parseable JSON"

We can write it without newlines to save space.

Let me correct the JSON: I see I put a space and then the field name for "reason" and then the value? Actually, in the example above I wrote:

"reason":"Accessibility improvement with ARIA roles",

But in the string I have: "reason":"Accessibility improvement with ARIA roles"," ARIA roles"? No, I think I made a typo in the example.

Actually, in the example I wrote:

"reason":"Accessibility improvement with ARIA roles",

and then the next field is "summary".

So the JSON is:

{"head_sha":"0ab0a1db37b8b7d006b14558c0caaf2eb75fcb70","run_id":"27872836726","run_attempt":"1","result":"APPROVE","reason":"Accessibility improvement with ARIA roles","summary":"Added ARIA roles to the ladder structure for better accessibility. The change is correct and localized.","findings":[]}

But note: the head_sha value has a typo: I wrote "0ab0a1db37b8b7d006b14558c0caaf2eb75fcb70" but it should be "0ab0a1db37b8b7d006b14558c0caaf2eb75fcb70" (without the extra 'b' after the first part). Actually, the head_sha in the evidence is 0ab0a1db37b8b7d006b14558c0caaf2eb75fcb70 - I see I accidentally inserted a 'b' in the middle? Actually, I think I copied it correctly.

Let me check: the evidence says: Head SHA: 0ab0a1db37b8b7d006b14558c0caaf2eb75fcb70

So we must use that exact string.

Also, the run_id and run_attempt are given in the gate: run_id=27872836726 run_attempt=1

So the control block:

{
"head_sha": "0ab0a1db37b8b7d006b14558c0caaf2eb75fcb70",
"run_id": "27872836726",
"run_attempt": "1",
"result": "APPROVE",
"reason": "Accessibility improvement with ARIA roles",
"summary": "Added ARIA roles to the ladder structure for better accessibility. The change is correct and localized to the intended section and does not introduce any regressions.",
"findings": []
}

We are not including any findings because there are no issues.

Therefore, the final output is:

But note: the instruction says "Do not include reasoning tags such as ...". We have not included any.

We must be cautious: the JSON must be valid. Let me check the string:

• head_sha: "0ab0a1db37b8b7d006b14558c0caaf2eb75fcb70" -> correct
• run_id: "27872836726" -> correct
• run_attempt: "1" -> correct
• result: "APPROVE"
• reason: string without newlines
• summary: string without newlines
• findings: empty array

This is valid.

We return exactly that.

[opencode-agent]

OpenCode Agent approved this PR.

Added ARIA roles to ladder structure for better screen reader compatibility. Change is localized and improves semantic HTML structure.

• Result: APPROVE
• Reason: Accessibility improvement
• Head SHA: 0ab0a1db37b8b7d006b14558c0caaf2eb75fcb70
• Workflow run: 27872836726
• Workflow attempt: 1