Harrison Healey d01d6501f7 MM-63050 Improve screen reader support for SuggestionList (#31228)
* Remove aria-live from SuggestionBox

aria-live isn't the idiomatic way to make the autocomplete accessible to
screen readers. Instead, we should've used aria-activedescendant which
was done for the at-mention autocomplete in a previous ticket, but that
didn't apply to other types of autocompletes. That lead to the
at-mention autocomplete being too noisy (as there were two different
things telling the user what the results were), and it meant that other
types of autocompletes didn't function.

This needs a couple direct followups:
1. The E2E tests need to be updated since they test for aria-live.
2. The Suggestion items for other types of autocompletes need IDs for
   the aria-activedescendant to work.

* Consistently set IDs for all SuggestionList items

Instead of leaving it up to the individual Suggestion components,
this'll ensure that a11y support works for all of them going forward as
long as they properly forward other props to the underlying li element.

I would've preferred if each instance of SuggestionList had unique IDs,
but they currently all use the ID suggestionList, and I didn't want to
update that ID across 55 different Cypress tests. There's should only be
a single SuggestionList visible at a time, so the current situation is
fine enough.

* Remove textboxId from AtMentionProvider

* Change suggestion list to scroll using IDs instead of findDOMNode and refs

* Add an aria-label to SuggestionList

* Make all Suggestion components use the option role

* Add number of results to SuggestionList readout

* Change SuggestionBox to only set aria-expanded with results

* Add tests for ARIA of SuggestionBox

* Address feedback
2025-06-10 12:56:25 -04:00
2018-05-30 10:23:25 -04:00

Mattermost logo

Mattermost is an open core, self-hosted collaboration platform that offers chat, workflow automation, voice calling, screen sharing, and AI integration. This repo is the primary source for core development on the Mattermost platform; it's written in Go and React, runs as a single Linux binary, and relies on PostgreSQL. A new compiled version is released under an MIT license every month on the 16th.

Deploy Mattermost on-premises, or try it for free in the cloud.

mattermost user interface

Learn more about the following use cases with Mattermost:

Other useful resources:

Table of contents

Install Mattermost

Other install guides:

Native mobile and desktop apps

In addition to the web interface, you can also download Mattermost clients for Android, iOS, Windows PC, macOS, and Linux.

Get Mattermost on Google Play Get Mattermost on the App Store Get Mattermost on Windows PC Get Mattermost on Mac OSX Get Mattermost on Linux

Get security bulletins

Receive notifications of critical security updates. The sophistication of online attackers is perpetually increasing. If you're deploying Mattermost it's highly recommended you subscribe to the Mattermost Security Bulletin mailing list for updates on critical security releases.

Subscribe here

Get involved

Learn more

License

See the LICENSE file for license rights and limitations.

Get the latest news

Contributing

Small Image

Please see CONTRIBUTING.md. Join the Mattermost Contributors server to join community discussions about contributions, development, and more.

Описание
No description provided
Readme 636 MiB
Languages
TypeScript 47%
Go 40.2%
JavaScript 8.6%
SCSS 2.8%
HTML 1.1%
Разное 0.2%