Skip to content

Conversation

@m1aw
Copy link
Contributor

@m1aw m1aw commented Dec 2, 2025

📋 Pull Request Checklist

  • I have added unit tests to cover my changes.
  • I have added or updated Storybook stories where applicable.
  • I have tested the changes manually in the local environment.
  • I have checked that no PII data is being sent on analytics events
  • All E2E tests are passing, and I have added new tests if necessary.
  • All interfaces and types introduced or updated are strictly typed.

📝 Summary

This PR implements several accessibility improvements for the Select component to enhance screen reader support and keyboard navigation:

Key Changes:

  • Focus behavior: Select no longer automatically expands on keyboard focus (CW-24)
  • Label association: Fixed label association for filterable selects including PayTo identifier (CW-28)
  • Readonly state: Added aria-disabled="true" for readonly mode on both button and input elements (CW-25/CW-26)
  • Expanded state: Added aria-expanded attribute on Select Button for non-filterable selects (CW-27)
  • No options feedback: Implemented ARIA live regions to announce "No options found" when filtering results in no matches (CW-37)
  • Status message fix: Fixed status message state management to use null instead of empty string for better screen reader compatibility

Technical Improvements:

  • Added dedicated live region with role="status" and aria-live="polite"
  • Live region is present on page load but empty initially, only populated when no options are found
  • Comprehensive test coverage for all accessibility features

🧪 Tested scenarios

  • Keyboard navigation: Verified focus behavior doesn't auto-expand dropdown
  • Screen reader testing: Confirmed proper label associations and live region announcements
  • Filtering scenarios: Tested "No options found" message with various filter inputs
  • Readonly mode: Verified aria-disabled attributes are properly set
  • Cross-browser compatibility: Tested accessibility features across different browsers
  • All existing functionality: Ensured no regression in existing Select behavior

🔗 Related GitHub Issue / Internal Ticket number

Addresses: COSDK-744, CW-24, CW-25, CW-26, CW-27, CW-28, CW-37


@changeset-bot
Copy link

changeset-bot bot commented Dec 2, 2025

🦋 Changeset detected

Latest commit: 30177ab

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@adyen/adyen-web Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link

netlify bot commented Dec 2, 2025

Deploy Preview for adyen-web ready!

Name Link
🔨 Latest commit 30177ab
🔍 Latest deploy log https://app.netlify.com/projects/adyen-web/deploys/694a91da06605400086219ae
😎 Deploy Preview https://deploy-preview-3698.checkout-web-dev.adyen.com
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 3, 2025

size-limit report 📦

Path Size
UMD 113.9 KB (-0.01% 🔽)
Auto 120.13 KB (-0.07% 🔽)
ESM - Core 25.45 KB (0%)
ESM - Core + Card 64.65 KB (-0.06% 🔽)
ESM - Core + Dropin with Card 71.23 KB (-0.06% 🔽)

@m1aw m1aw force-pushed the fix/select-a11y-behaviour branch from ce89ac2 to ece9725 Compare December 9, 2025 16:58
@m1aw m1aw marked this pull request as ready for review December 9, 2025 19:37
@m1aw m1aw requested a review from a team as a code owner December 9, 2025 19:37
@m1aw m1aw requested a review from ScottiBR December 9, 2025 19:37
@m1aw m1aw force-pushed the fix/select-a11y-behaviour branch from 5e75dff to 9f8946b Compare December 10, 2025 14:32
Copy link
Contributor

@ScottiBR ScottiBR left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, I've also tested the click to pay card list, working as expected announcing the label

Copy link
Contributor

@ScottiBR ScottiBR left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some unit tests are failing

@m1aw m1aw requested a review from ScottiBR December 18, 2025 14:19
@m1aw m1aw force-pushed the fix/select-a11y-behaviour branch 2 times, most recently from 54beb09 to f665d58 Compare December 19, 2025 12:37
ScottiBR
ScottiBR previously approved these changes Dec 19, 2025
@ScottiBR ScottiBR force-pushed the fix/select-a11y-behaviour branch from 24b3be0 to 30177ab Compare December 23, 2025 12:58
@sonarqubecloud
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants