[A11Y] Accent color picker buttons never update aria-pressed — screen readers cannot identify the selected color #361

📌 Bug Description

The accent color picker in the options page uses <button> elements with aria-pressed="false" to indicate toggle state. However, the JavaScript handler only toggles the .active CSS class and never updates the aria-pressed attribute. Screen reader users cannot determine which color is currently selected.

Affected files:

• src/options.html — lines 88–131 (color dot buttons with aria-pressed="false")
• src/options.ts — lines 126–139 (click handler only toggles CSS class)

<!-- options.html -->
<button type="button" class="color-dot" data-color="210, 100%, 50%"
  aria-label="Accent color: Blue" aria-pressed="false"
  style="background-color: hsl(210, 100%, 50%)">
</button>

// options.ts — click handler
dot.addEventListener("click", () => {
  document.querySelectorAll(".color-dot").forEach((d) => d.classList.remove("active"));
  dot.classList.add("active");
  // aria-pressed is NEVER updated
});

On page load, the initial active color also only gets .active class added — aria-pressed remains "false" for all buttons.

🔄 Steps to Reproduce

1. Open the Late-Meet options page
2. Enable a screen reader (VoiceOver on macOS, NVDA on Windows)
3. Navigate to the "Accent Focus Color" section
4. Click on a color (e.g., Purple)
5. Screen reader still announces all buttons as "not pressed"
6. Navigate away and back — no button is announced as "pressed"

✅ Expected Behavior

When a color is selected:

• The selected button should have aria-pressed="true"
• All other buttons should have aria-pressed="false"
• Screen readers should announce the selected color as "pressed" or "selected"

❌ Actual Behavior

All color buttons permanently have aria-pressed="false" regardless of selection state. The visual .active class provides no information to assistive technology.

💻 Environment

• Chrome Version: Any
• Operating System: Any
• Extension Version: 1.2.0
• Transcription Provider: N/A (accessibility issue)

🛠️ Suggested Fix

Update the click handler and initial load logic to sync aria-pressed:

// On page load
document.querySelectorAll(".color-dot").forEach((dot) => {
  const dotColor = dot.getAttribute("data-color");
  const isActive = dotColor === currentAccent;
  if (isActive) dot.classList.add("active");
  dot.setAttribute("aria-pressed", String(isActive));
});

// Click handler
dot.addEventListener("click", () => {
  document.querySelectorAll(".color-dot").forEach((d) => {
    d.classList.remove("active");
    d.setAttribute("aria-pressed", "false");
  });
  dot.classList.add("active");
  dot.setAttribute("aria-pressed", "true");
});