mattermost
Fixed the tabbing twice issue
Summary
Fixed the tabbing twice and the Enter key press issue. The user can now switch to another category without clicking twice. Made the text inside the category not tabbable. Also, when the user presses enter on any category, the functionality is working as expected.
Ticket Link
Fixes: https://github.com/mattermost/mattermost/issues/26488 Jira: https://mattermost.atlassian.net/browse/MM-55273
Screenshots
NA
Release Note
Fixes the tabbing twice and the Enter key press issue.
Hello @adityasoni2019,
Thanks for your pull request! A Core Committer will review your pull request soon. For code contributions, you can learn more about the review process here.
Not triggering E2E tests: this PR has 8 commit status(es) or check-runs that are not passing. Ensure all statuses aside from the E2E testing ones are green, before triggering E2E tests.
![unified-ci-app[bot] avatar](https://avatars.githubusercontent.com/in/276366?v=4 "Published by a pub.dev verified publisher"){kind=small}
@adityasoni2019 it looks like this change breaks 2 of the end-to-end tests.
Verify Accessibility Support in Channel Sidebar Navigation
1) MM-T1470 Verify Tab Support in Channels section
✓ MM-T1473 Verify Tab Support in Unreads section
2) MM-T1474 Verify Tab Support in Favorites section
✓ MM-T1475 Verify Up & Down Arrow support in Channel Sidebar (7910ms)
2 passing (2m)
2 failing
1) Verify Accessibility Support in Channel Sidebar Navigation
MM-T1470 Verify Tab Support in Channels section:
AssertionError: Timed out retrying after 30000ms: expected '<a#sidebarItem_off-topic.SidebarLink>' to be 'focused'
at Context.eval (webpack://cypress/./tests/integration/channels/accessibility/accessibility_sidebar_spec.ts:77:0)
2) Verify Accessibility Support in Channel Sidebar Navigation
MM-T1474 Verify Tab Support in Favorites section:
AssertionError: Timed out retrying after 30000ms: expected '<a#sidebarItem_off-topic.SidebarLink>' to be 'focused'
at Context.eval (webpack://cypress/./tests/integration/channels/accessibility/accessibility_sidebar_spec.ts:105:0)
It appears the tests need to be updated to reflect the new behavior.
Is there any way that I can these tests on my local to see if what I'm pushing is correct? @wiggin77
Thanks
Is there any way that I can these tests on my local to see if what I'm pushing is correct? @wiggin77
@adityasoni2019 you can go into the e2e-tests/cypress directory and then npm run cypress:open. That will open the cypress UI and allow you to select a browser and choose specific tests to run.
You may need to nvm use from the project root to get the right environment up, and npm install in the e2e-tests/cypress directory to get the dependencies.
@asaadmahmood I'm not sure if this ticket is actually valid. While this doesn't follow the accordion pattern, I think that the current behaviour is actually correct because it allows a keyboard-only user to drag and drop categories in the LHS.
Here's a video of how it currently behaves on master:
https://github.com/user-attachments/assets/40fc5613-dc5b-42cd-8398-e9ece8570b52
There's some visual bugs which we should probably address, but the outer div expands/collapses the category and the inner div acts as a drag handle. We could change the style to make it clearer that that's what it does, but I don't know how we'd want to do that
Sorry, we're still trying to decide what the best direction is here. We want to make it quicker to tab through the channel list, but we also want to ensure that keyboard users can still rearrange the list. Let's keep this open for now while we figure out how the keyboard support should work because we may still need it
This PR has been automatically labelled "stale" because it hasn't had recent activity. A core team member will check in on the status of the PR to help with questions. Thank you for your contribution!
