Skip to content

[Select] Pointer Cancellation (WCAG 2.5.2) failure #45301

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
stormojm opened this issue Feb 13, 2025 · 7 comments · May be fixed by #45789
Open

[Select] Pointer Cancellation (WCAG 2.5.2) failure #45301

stormojm opened this issue Feb 13, 2025 · 7 comments · May be fixed by #45789
Assignees
@aarongarciah
Labels
accessibility a11y component: select This is the name of the generic UI component, not the React module! ready to take Help wanted. Guidance available. There is a high chance the change will be accepted
Milestone
Material UI with ...

Comments

@stormojm
Copy link

stormojm commented Feb 13, 2025 •
edited by github-actions bot
Loading

Steps to reproduce

Steps:

  1. Open this link to live example: https://codesandbox.io/embed/jkw2qf?module=/src/Demo.tsx&fontsize=12
  2. Mouse Down and hold down for the menu to open.

Current behavior

Currently the Select component is failing the WCAG 2.5.2 success criterion, which requires functionality to be operated using a single pointer. In this case the combination of "No Down-event" and "Up reversal".

Currently the menu opens up on the mouse down, and it remains open even if moving away and releasing the mouse.

Expected behavior

A key aspect to meeting the Pointer Cancellation criteria is providing a way to easily undo or abort the functionality. So I would expect one of two behaviors:

It is also how apps like Github and Microsoft Teams work for their select-like operations.

  • Mouse Down continues to open the menu, but navigating away from the menu and releasing the mouse click should cause the menu to dismiss. This matches the behavior of the native select input (at least on Mac)

Context

This was identified in as a accessibility concern for users of our software.

Your environment

npx @mui/envinfo Currently on MUI5, but in process of upgrading, but issue remains in Mui6.

System:
OS: macOS 15.3
Binaries:
Node: 22.14.0 - /private/var/folders/jv/xsd25_n518v97x_98dbjbmn40000gp/T/xfs-d414690d/node
npm: 10.9.2 - ~/.local/state/fnm_multishells/44298_1739490378994/bin/npm
pnpm: Not Found
Browsers:
Chrome: 133.0.6943.98
Edge: 133.0.3065.59
Safari: 18.3
npmPackages:
@emotion/react: 11.9.0
@emotion/styled: 11.13.0
@mui/core-downloads-tracker: 5.16.7
@mui/material: 5.16.7
@mui/private-theming: 5.16.6
@mui/styled-engine: 5.16.6
@mui/styles: 5.16.7
@mui/system: 5.16.7
@mui/types: 7.2.21
@mui/utils: 5.16.6
@mui/x-date-pickers: 7.24.1
@mui/x-internals: 7.24.1
@types/react: ^17.0.80 => 17.0.80
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
styled-components: 5.3.0
typescript: ~5.5.4 => 5.5.4

Search keywords: select wcag pointer cancellation
@stormojm stormojm added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 13, 2025
@aarongarciah aarongarciah self-assigned this Feb 14, 2025
@aarongarciah aarongarciah added accessibility a11y component: select This is the name of the generic UI component, not the React module! ready to take Help wanted. Guidance available. There is a high chance the change will be accepted and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 14, 2025
@aarongarciah
Copy link
Member

Hi @stormojm, thanks for opening the issue. You're absolutely right. The Select from Base UI follows this behavior:

Mouse Down continues to open the menu, but navigating away from the menu and releasing the mouse click should cause the menu to dismiss. This matches the behavior of the native select input (at least on Mac)

I'm marking this issue as "ready to take" in case someone wants to tackle it.

@yermartee
Copy link
Contributor

Hi @aarongarciah I would like to work on this. Thanks in advance.

@aarongarciah
Copy link
Member

@yermartee feel free to work on it

@Ashish-619
Copy link

@stormojm or @aarongarciah Could you please attach the video of the issue you're observing, and simplify more on the expected behavior, so that I could get clear understanding before I start working on it?

@stormojm
Copy link
Author

@Ashish-619 I made a video, but I don't have the ability to capture my mouse clicks visually.

Screen.Recording.2025-02-26.at.10.48.27.PM.mov

In the video, current MUI documentation is on the left, and the base-ui documentation is on the right.

The behavior as specified before:

  1. Click and hold down to open the dropdown
  2. Mouse away from the component
  3. Release click (aka mouse up).

@yermartee
Copy link
Contributor

Hey @Ashish-619 are you working on this?

@Ashish-619
Copy link

Hey @yermartee you can work if you want, I've not understood the problem exactly.

Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 2, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
cbb9faa 
- Fixed onFocus being triggered excessively (mui#44505)
- Enabled drag-and-release to select items (mui#45374)
- Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 2, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
74a4a03 
- Fixed onFocus being triggered excessively (mui#44505)
- Enabled drag-and-release to select items (mui#45374)
- Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 3, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
410a31a 
- Fixed onFocus being triggered excessively (mui#44505)
- Enabled drag-and-release to select items (mui#45374)
- Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 3, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
ed8ea2d 
- Fixed onFocus being triggered excessively (mui#44505)
- Enabled drag-and-release to select items (mui#45374)
- Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 3, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
7cacdce 
- Fixed onFocus being triggered excessively (mui#44505)
- Enabled drag-and-release to select items (mui#45374)
- Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 4, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
5ef2ffd 
- Fixed onFocus being triggered excessively (mui#44505)
- Enabled drag-and-release to select items (mui#45374)
- Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 5, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
8d8692a 
- Fixed onFocus being triggered excessively (mui#44505)
- Enabled drag-and-release to select items (mui#45374)
- Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 7, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
4226593 
- Fixed onFocus being triggered excessively (mui#44505)
- Enabled drag-and-release to select items (mui#45374)
- Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 8, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
da184fd 
- Fixed onFocus being triggered excessively (mui#44505)
- Enabled drag-and-release to select items (mui#45374)
- Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 10, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
d2e7bb1 
- Fixed onFocus being triggered excessively (mui#44505)
- Enabled drag-and-release to select items (mui#45374)
- Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)
@ZeeshanTamboli ZeeshanTamboli linked a pull request Apr 15, 2025 that will close this issue
Open
1 task
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 15, 2025
@Kartik-Murthy
fix(Select): resolve pointer cancellation issues for WCAG 2.5.2 compl…
863f35e 
…iance (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 15, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
fd25d41 
- Fixed onFocus being triggered excessively (mui#44505)
- Enabled drag-and-release to select items (mui#45374)
- Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 15, 2025
@Kartik-Murthy
fix(Select): resolve pointer cancellation issues for WCAG 2.5.2 compl…
7a58f33 
…iance (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 16, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
d31b95c 
- Fixed onFocus being triggered excessively (mui#44505)
- Enabled drag-and-release to select items (mui#45374)
- Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 16, 2025
@Kartik-Murthy
fix(Select): resolve pointer cancellation issues for WCAG 2.5.2 compl…
5a7a06a 
…iance (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 17, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
0dd1041 
- Fixed onFocus being triggered excessively (mui#44505)
- Enabled drag-and-release to select items (mui#45374)
- Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 17, 2025
@Kartik-Murthy
fix(Select): resolve pointer cancellation issues for WCAG 2.5.2 compl…
57aac66 
…iance (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 18, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
2874b92 
- Fixed onFocus being triggered excessively (mui#44505)
- Enabled drag-and-release to select items (mui#45374)
- Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)
Kartik-Murthy added a commit to Kartik-Murthy/material-ui that referenced this issue Apr 18, 2025
@Kartik-Murthy
fix(Select): resolve pointer cancellation issues for WCAG 2.5.2 compl…
8f7e282 
…iance (mui#45301)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@aarongarciah aarongarciah

Labels
accessibility a11y component: select This is the name of the generic UI component, not the React module! ready to take Help wanted. Guidance available. There is a high chance the change will be accepted
Projects
None yet
Milestone
Material UI with Base UI
Development

Successfully merging a pull request may close this issue.

[Select] Implement pointer cancellation Kartik-Murthy/material-ui
4 participants
@stormojm @aarongarciah @Ashish-619 @yermartee