fix: Restore accessibility focus states across palette and global inputs

[Kr-Utkarsh-01]

Problem

Two accessibility issues prevent keyboard users from seeing focus indicators:

1. Palette keyboard navigation applies hover highlights using inline style.backgroundColor assignments tied to platformColor.hoverColor. This couples visual state to JS-driven color values, making highlights impossible to theme via CSS.

2. Global outline: none overrides on #search:focus (activities.css:239) and input[type="range"]:focus (style.css:12) suppress the *:focus-visible outline ring for keyboard users, violating WCAG 2.4.7 (Focus Visible).

addresses #6606

Solution

Commit 1 — Replace the 4 inline style.backgroundColor assignments in _updateKeyboardFocus and _clearKeyboardFocus with classList.add/remove("palette-keyboard-hover"). This decouples the keyboard focus highlight from hardcoded JS color values, enabling theming through CSS:

.palette-keyboard-hover {
    background-color: var(--color-state-hover);
}

Commit 2 — Narrow the blanket :focus { outline: none } rules to :focus:not(:focus-visible) so that:

• Mouse/touch clicks still suppress the outline (no visual regression)
• Keyboard Tab focus preserves the 2px solid #0066ff outline from the global *:focus-visible rule

Changes

File	Change
js/palette.js	4 lines: style.backgroundColor → classList.add/remove("palette-keyboard-hover") in _updateKeyboardFocus and _clearKeyboardFocus
css/activities.css	#search:focus → #search:focus:not(:focus-visible)
css/style.css	input[type="range"]:focus → input[type="range"]:focus:not(:focus-visible)

PR Category

• Bug Fix
• Feature
• Performance
• Tests
• Documentation

Testing

• npm test — 5187/5187 passing
• npm run lint — 0 errors
• npx prettier --check — all modified files formatted

Browser Testing Required

1. Run npm run serve:dev
2. Open http://127.0.0.1:3000
3. Palette keyboard nav: Press Tab to focus the palette → use arrow keys → verify a visible highlight follows the focused row
4. Search input: Click the search icon → Tab into the search box → verify a blue outline ring appears around it
5. Range sliders: Open any widget with a slider (e.g., Tempo) → Tab to the slider → verify a blue outline ring appears
6. Mouse clicks: Click the search box and sliders → verify no outline ring appears (clean mouse UX preserved)

---

Upstream Test Regression Fixes

• Fixed js/widgets/__tests__/aidebugger.test.js where the _sendMessage unit tests failed because of a recent upstream master commit d7e16bc81 introducing a consent flow check. The tests have been updated to mock _consentGiven = true and assert on the correct behavior when consent is not granted.

---

[github-actions]

🧪 Jest Test Results

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Coverage: Statements: 47.05% | Branches: 38.51% | Functions: 51.53% | Lines: 47.47%

Note: These failures may be introduced by this PR or may already exist in the master branch.
Tip: Update your branch with the latest master and rerun tests.
If the same failures are present on master, they are likely not introduced by this PR.

Failed Tests:

palette.test.js

[github-actions]

🧪 Jest Test Results

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Coverage: Statements: 47.55% | Branches: 38.79% | Functions: 52.45% | Lines: 47.95%

Note: These failures may be introduced by this PR or may already exist in the master branch.
Tip: Update your branch with the latest master and rerun tests.
If the same failures are present on master, they are likely not introduced by this PR.

Failed Tests:

LocalCard.test.js
palette.test.js

[github-actions]

This PR has merge conflicts with master.

Please rebase your branch:

# Add upstream remote (one-time setup)
git remote add upstream https://github.com/sugarlabs/musicblocks.git

# Fetch latest master and rebase
git fetch upstream
git rebase upstream/master

# Resolve any conflicts, then:
git push --force-with-lease origin YOUR_BRANCH

Tip: Enable "Allow edits from maintainers" on this PR so we can auto-rebase for you next time. This only grants access to your PR branch. Your fork's other branches are not affected.

[github-actions]

🧪 Jest Test Results

✅ All Jest tests passed! This PR is ready to merge.

Coverage: Statements: 47.57% | Branches: 38.82% | Functions: 52.47% | Lines: 47.97%
Master Coverage: Statements: 47.62% | Branches: 38.86% | Functions: 52.45% | Lines: 48.03%

[github-actions]

🧪 Jest Test Results

✅ All Jest tests passed! This PR is ready to merge.

Coverage: Statements: 47.62% | Branches: 38.87% | Functions: 52.45% | Lines: 48.03%
Master Coverage: Statements: 47.62% | Branches: 38.86% | Functions: 52.45% | Lines: 48.03%

[github-actions]

🧪 Jest Test Results

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Coverage: Statements: 48.11% | Branches: 39.52% | Functions: 52.84% | Lines: 48.52%
Master Coverage: Statements: 48.11% | Branches: 39.52% | Functions: 52.84% | Lines: 48.52%

Note: These failures may be introduced by this PR or may already exist in the master branch.
Tip: Update your branch with the latest master and rerun tests.
If the same failures are present on master, they are likely not introduced by this PR.

Failed Tests:

aidebugger.test.js

[github-actions]

🧪 Jest Test Results

✅ All Jest tests passed! This PR is ready to merge.

Coverage: Statements: 48.04% | Branches: 39.53% | Functions: 52.82% | Lines: 48.44%
Master Coverage: Statements: 48.11% | Branches: 39.52% | Functions: 52.84% | Lines: 48.52%