Skip to content

[MM-61647]: Upgraded react-select to v5#58

Open
ayush-chauhan233 wants to merge 1 commit intomasterfrom
MM-61647
Open

[MM-61647]: Upgraded react-select to v5#58
ayush-chauhan233 wants to merge 1 commit intomasterfrom
MM-61647

Conversation

@ayush-chauhan233
Copy link

Summary

  • Migrated react-select v3 to v5 to get accessibility support for input elements.
  • TypeScript types now come packaged with react-select so no longer needed to have @types/react-select installed.
  • Updated the type definitions accordingly, Please refer.
  • This PR addresses issue MM-61647 and MM-61651

Steps to reproduce (MM-61647)

  • Locate the "Message notification sounds: Bing" combobox.
  • Inspect it with Chrome DevTools.
  • In the Accessibility tab, expand the Computed Properties section.
  • Review the values for "Name", "Role", "Has autocomplete", "hasPopup", "Expanded", "Active descendant", and "Controls".

Steps to reproduce (MM-61651)

  • Navigate to the Desktop and mobile notifications edit button and select it.
  • Now navigate to the Trigger mobile notifications when I am combobox and inspect it with Chrome DevTools.(If not enabled then please enable the push notifications through system console).
  • In the Accessibility tab, expand the Computed Properties section.
  • Review the values for "Name", "Role", "Has autocomplete", "hasPopup", "Expanded", "Active descendant", and "Controls".

Expected behaviour

  • The input should have appropriate ARIA properties such as role="combobox".
  • The combobox must have aria-controls set to the ID of its suggestion popup. - The popup container must have role="listbox"
  • The combobox element must have aria-expanded="true". Otherwise, it must be set to "false"
  • For more information please refer.

Ticket Link

Jira
(MM-61647) https://mattermost.atlassian.net/browse/MM-61647
(MM-61651) https://mattermost.atlassian.net/browse/MM-61651

Screenshots

MM-61647

Before After

MM-61651

Before After

Release Note

Updgrade react-select v3.0.3 to v5.9.0

- Updated old type definitions with new v5 packaged type definitions.
- Removed some unused props
- Updated onBlur, onFocus and handleInputChange methods in user_input_email component
@thisisankur0 thisisankur0 added Approved Dev approved, ready to be reviewed by MM team On External labels Jan 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Approved Dev approved, ready to be reviewed by MM team On External

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants