d01d6501f7
* 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
Mattermost Web App
This folder contains the client code for the Mattermost web app. It's broken up into multiple packages each of which either contains an area of the app (such as playbooks) or shared logic used across other packages (such as the packages located in the platform directory). For anyone who's used to working in the mattermost/mattermost-webapp repo, most of that is now located in channels.
npm Workspaces
To interact with a workspace using npm, such as to add a dependency or run a script, use the --workspace (or --workspaces) flag. This can be done when using built-in npm commands such as npm add or when running scripts. Those commands should be run from this directory.
# Add a dependency to a single package
npm add react --workspace=playbooks
# Build multiple packages
npm run build --workspace=platform/client --workspace=platform/components
# Test all workspaces
npm test --workspaces
# Clean all workspaces that have a clean script defined
npm run clean --workspaces --if-present
To install dependencies for a workspace, simply run npm install from this folder as you would do normally. Most packages' dependencies will be included in the root node_modules, and all packages' dependencies will appear in the package-lock.json. A node_modules will only be created inside a package if one of its dependencies conflicts with that of another package.
Useful Links
- Developer setup, now included with the Mattermost server developer setup
- Web app developer documentation