🎨 Palette: Improve accessibility of project links and accordion

[RootDeveloperDS]

🎨 UX Enhancement

💡 What:

• Added aria-label attributes to external project links in ProjectsTab and AccordionMatrix.
• Added aria-controls, aria-labelledby, role="region", and aria-pressed structural attributes to the Accordion component and filter buttons in AccordionMatrix.
• Fixed data properties in AccordionMatrix telemetry calls (project.name and project.tagline).

🎯 Problem:

• Screen readers previously had no clear context for icon-based links or links with generic text like "Repository" and "Execute".
• Accordion content panes lacked the required semantic relationships for screen readers to associate the toggle button with its content.

✨ Experience Impact:

• Makes navigation significantly more intuitive for users relying on screen readers.
• Improves structural understanding of the matrix filter logic.

♿ Accessibility:

• Comprehensive mapping of ARIA relationships (aria-controls, aria-labelledby, role="region", aria-expanded).
• Added descriptive contextual labels for link components.

✅ Verification:

• Lint passed
• Tests passed
• Build passed

---

PR created automatically by Jules for task 6012584936826662474 started by @RootDeveloperDS

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
devanshsharma-portfolio	Ready	Preview	Aug 4, 2026 2:25am

[RootDeveloperDS]

@coderabbitai what it done in accordian file exactly

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '=== Accordion-related files ==='
fd -i 'accordion' . -t f

printf '%s\n' '=== Changed accordion-related files ==='
git diff --name-only HEAD^ HEAD | grep -i 'accordion' || true

printf '%s\n' '=== Diff ==='
git diff --find-renames HEAD^ HEAD -- ':(icase)*accordion*'

Length of output: 4982

---

@RootDeveloperDS In src/components/portfolio/AccordionMatrix.tsx, this PR makes these changes:

• It adds aria-pressed to each category filter button. Screen readers can now identify the active filter.
• It gives each accordion toggle button an ID: accordion-${project.id}.
• It adds aria-controls to each toggle button. The attribute points to the related content panel: panel-${project.id}.
• It gives each open content panel the matching ID.
• It adds role="region" and aria-labelledby to each content panel. Screen readers can associate the panel with its toggle button.
• It keeps aria-expanded={isOpen} on the toggle button. This reports whether the panel is open or closed.
• It adds clear labels to the external project links:
  • Repository: View repository for ${project.name}
  • Live demo: Execute live demo for ${project.name}
• It changes telemetry data from project.title and project.subtitle to project.name and project.tagline.

The PR does not change src/components/ui/accordion.tsx. It only updates AccordionMatrix.tsx.

🐇🔎

_{You are interacting with an AI system.}

[RootDeveloperDS]

@coderabbitai should merge it why or why not? What happens after change in project telemetry data ??? Will I receive same data

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '=== PR diff for AccordionMatrix ==='
git diff --find-renames HEAD^ HEAD -- src/components/portfolio/AccordionMatrix.tsx

printf '%s\n' '=== AccordionMatrix structure ==='
ast-grep outline src/components/portfolio/AccordionMatrix.tsx --items all

printf '%s\n' '=== Project type/data and telemetry references ==='
rg -n -C 4 -P '\b(title|subtitle|name|tagline)\b|\b(track|telemetry|analytics|event)\w*\s*\(' \
  src 2>/dev/null || true

Length of output: 68052

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

ast-grep outline src/lib/telegram.ts --items all
sed -n '1,180p' src/lib/telegram.ts

Length of output: 7183

---

@RootDeveloperDS I recommend that you merge this PR.

The accessibility changes improve screen-reader support without changing user flows. The accordion buttons now identify their related content panels. The filter buttons now report their active state. The project links now have descriptive labels.

The telemetry change is a correction.

Project defines these fields:

• project.name
• project.tagline

Project does not define these fields:

• project.title
• project.subtitle

Before this PR, the AccordionMatrix notification attempted to use the nonexistent fields. The Telegram formatter omits undefined and empty values. Therefore, affected notifications did not include the project title, subtitle, or clicked-project value.

After this PR, you receive the same notification actions and the same detail keys:

• Expanded Project Accordion
  • projectId
  • projectTitle
  • subtitle
• Clicked Project Repository
  • project
  • repo
• Clicked Live Project Link
  • project
  • url

The values now contain valid data:

• projectTitle contains project.name.
• subtitle contains project.tagline.
• project contains project.name.

Existing Telegram messages will not change. New messages will include the missing project information.

_{You are interacting with an AI system.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3f78a4c8-76af-4a98-b96b-cb30a9e33db9

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}