Skip to content
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.

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

Accessibility: "Channels" button in global header is not selectable with keyboard #27068

Open
mattermod opened this issue May 20, 2024 · 6 comments
Assignees
Labels
Difficulty/1:Easy Easy ticket Good First Issue Suitable for first-time contributors Help Wanted Community help wanted Tech/ReactJS Web app

Comments

@mattermod
Copy link
Contributor

Steps to reproduce

  • With your mouse, click in the top-left corner of the global header to set the focus starting point
  • TAB to the ‘Channels’ icon/text button with your keyboard
  • Press ENTER or SPACE

Observed

  • Nothing happens

Expected

  • It should open the product switcher menu just like clicking on this button does
  • Once the menu is open, it should focus on the first menu item in the product switcher (see linked ticket)

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-55270

@mattermod mattermod added Help Wanted Community help wanted Up For Grabs labels May 20, 2024
@marianunez marianunez changed the title [P3] Accessibility: "Channels" button in global header is not interactive Accessibility: "Channels" button in global header is not selectable with keyboard May 20, 2024
@marianunez marianunez added Difficulty/1:Easy Easy ticket Tech/ReactJS Web app Good First Issue Suitable for first-time contributors labels May 20, 2024
@ighmaZ
Copy link

ighmaZ commented May 26, 2024

Can i work on this?

@ighmaZ
Copy link

ighmaZ commented May 28, 2024

@AshishDhama , when I try to reproduce the issue on my local machine and click on the channels icon, nothing happens. It was supposed to open the product switcher.

@AshishDhama
Copy link
Collaborator

AshishDhama commented May 29, 2024

@ighmaZ

Screen.Recording.2024-05-29.at.3.34.31.PM.mov

May be you can connect with @matthewbirtch for further information.

@matthewbirtch
Copy link
Contributor

matthewbirtch commented May 30, 2024

As @AshishDhama demonstrated, clicking with a mouse on 'Channels' in the header opens the product switcher menu. @ighmaZ this ticket is about accessing the channels button using the keyboard. Right now the problem is that you can TAB to "Channels" in the global header, but SPACE or ENTER do not open the menu as expected.

@nikhilskul7
Copy link
Contributor

Is this up for grabs?

@matthewbirtch
Copy link
Contributor

@ighmaZ should we assume you're no longer working on this? We haven't seen any PRs associated to this ticket. If you're no longer working on it we can assign to @nikhilskul7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Difficulty/1:Easy Easy ticket Good First Issue Suitable for first-time contributors Help Wanted Community help wanted Tech/ReactJS Web app
Projects
None yet
Development

No branches or pull requests

6 participants