Home screen keyboard focus

[glastonbridge]

Addresses the lack of contrast on some of focus-visible highlights on the home screen, as well as making the carousel buttons a single tab stop, which brings it closer to the WAI-ARIA recommendations for tabbed carousels.

Demo

Before

Using tab to navigate

Screen.Recording.2025-03-13.at.17.10.38.mov

After

smnew.mov

High contrast theme

Screen.Recording.2025-03-13.at.16.59.47.hc.mov

Pull Request Overview

This pull request improves the accessibility of the home screen by enhancing keyboard navigation and focus handling on the hero banner and carousel controls.

• Adds ARIA roles and labels to the hero banner and carousel controls
• Updates tabIndex values to consolidate focus behavior for carousel buttons

Files not reviewed (1)

• theme/home.less: Language not supported

Comments suppressed due to low confidence (3)

webapp/src/projects.tsx:532

• [nitpick] Consider whether 'Banner' provides enough context for users of assistive technologies. A more descriptive label (e.g., 'Home page hero banner') may further improve accessibility.

aria-label={lf("Banner")}

webapp/src/projects.tsx:555

• [nitpick] Ensure that making the carousel container focusable via tabIndex={0} aligns with the intended keyboard navigation behavior. Confirm that users can navigate the carousel controls in an intuitive manner.

{isGallery && <div key="cards" className="dots" tabIndex={0} role="group" aria-label={lf("Carousel controls")}>

webapp/src/projects.tsx:557

• [nitpick] Verify that setting tabIndex={-1} on individual carousel buttons does not hinder keyboard interaction and that the overall focus management meets accessibility standards.

onClick={handleSetCard(i)} aria-label={lf("View {0} hero image", card.title || card.name)} tabIndex={-1} title={lf("View {0} hero image", card.title || card.name)}

Tip: Copilot only keeps its highest confidence comments to reduce noise and keep you focused. Learn more

[thsparks]

Changes look great, thank you!

[thsparks]

Took a second look and a few comments came up. LMK what you think and we can get this checked in :)

[thsparks]

For this one, I'm wondering if var(--pxt-focus-border) would be a more appropriate color. Would you be open to trying that and seeing if it still aligns to standards?

If we add more themes in the future, the primary color may vary, but the "focus border" should remain a fairly blue across all themes.

It makes sense to deviate in the other areas of this PR, since the content being outlined is also blue (or on a blue background), so a white outline makes more sense there. But in this particular case I think the focus border may work well. But LMK if you disagree!

[thsparks]

Same here, wondering if var(--pxt-focus-border) would work.