material-components / material-components/material-web

md-menu-item of type="button" should click on keyboard selection

Open
#5,577 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
SCSS
Stars
11.3k
Forks
1.1k
Avg merge
20h 28m
Merged PRs (30d)
13

Description

### Description

In the same way that a click is triggered for anchors on keyboard selection, I would expect the same to apply for buttons as well. However that is not the case. Instead, you have to handle the close-menu event manually to produce the same effect.

Compare between using mouse and keyboard to select from two kinds of menu:
[Example Playground](https://lit.dev/playground/#project=W3sibmFtZSI6Im1haW4udHMiLCJjb250ZW50IjoiaW1wb3J0ICdAbWF0ZXJpYWwvd2ViL2J1dHRvbi9maWxsZWQtYnV0dG9uLmpzJztcbmltcG9ydCAnQG1hdGVyaWFsL3dlYi9tZW51L21lbnUuanMnO1xuaW1wb3J0ICdAbWF0ZXJpYWwvd2ViL21lbnUvbWVudS1pdGVtLmpzJztcbmltcG9ydCB7aXNTZWxlY3RhYmxlS2V5fSBmcm9tICdAbWF0ZXJpYWwvd2ViL21lbnUvaW50ZXJuYWwvY29udHJvbGxlcnMvc2hhcmVkLmpzJztcbmltcG9ydCB7Q2xvc2VNZW51RXZlbnR9IGZyb20gJ0BtYXRlcmlhbC93ZWIvbWVudS9tZW51LmpzJztcbmltcG9ydCB7aHRtbCwgY3NzLCBMaXRFbGVtZW50fSBmcm9tICdsaXQnO1xuaW1wb3J0IHtjdXN0b21FbGVtZW50LCBxdWVyeX0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5AY3VzdG9tRWxlbWVudCgnbXktY29tcG9uZW50JylcbmV4cG9ydCBjbGFzcyBNeUNvbXBvbmVudCBleHRlbmRzIExpdEVsZW1lbnQge1xuICBzdGF0aWMgc3R5bGVzID0gY3NzYGA7XG4gIFxuICBAcXVlcnkoJyNtZW51MScpXG4gIG1lbnUxO1xuICBcbiAgQHF1ZXJ5KCcjbWVudTInKVxuICBtZW51MjtcbiAgXG4gIGhhbmRsZUNsaWNrKGU6IFBvaW50ZXJFdmVudCkge1xuICAgIGFsZXJ0KGAkeyhlLnRhcmdldCBhcyBIVE1MRWxlbWVudCkuaW5uZXJUZXh0fSBjbGlja2VkYCk7XG4gIH1cbiAgXG4gIGhhbmRsZUNsb3NlTWVudShlOiBDbG9zZU1lbnVFdmVudCkge1xuICAgIGlmIChlLmRldGFpbC5yZWFzb24ua2luZCA9PT0gJ2tleWRvd24nICYmIGlzU2VsZWN0YWJsZUtleShlLmRldGFpbC5yZWFzb24ua2V5KSkge1xuICAgICAgYWxlcnQoYCR7ZS5kZXRhaWwuaW5pdGlhdG9yLmlubmVyVGV4dH0gd2Fzbid0IGNsaWNrZWQsIHRoaXMgaXMganVzdCBhIHdvcmthcm91bmRgKTtcbiAgICB9XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8c3BhbiBzcGFuIHN0eWxlPVwicG9zaXRpb246IHJlbGF0aXZlXCI-XG4gICAgICAgIDxtZC1maWxsZWQtYnV0dG9uXG4gICAgICAgICAgaWQ9XCJidXR0b24xXCJcbiAgICAgICAgICBAY2xpY2s9XCIkeygpID0-IHRoaXMubWVudTEub3BlbiA9ICF0aGlzLm1lbnUxLm9wZW59XCI-XG4gICAgICAgICAgTGlua3NcbiAgICAgICAgPC9tZC1maWxsZWQtYnV0dG9uPlxuICAgICAgICA8bWQtbWVudSBcbiAgICAgICAgICBpZD1cIm1lbnUxXCJcbiAgICAgICAgICBhbmNob3I9XCJidXR0b24xXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxtZC1tZW51LWl0ZW1cbiAgICAgICAgICAgIGhyZWY9XCIjXCJcbiAgICAgICAgICAgIEBjbGljaz1cIiR7dGhpcy5oYW5kbGVDbGlja31cIj5cbiAgICAgICAgICAgIEl0ZW0gMVxuICAgICAgICAgIDwvbWQtbWVudS1pdGVtPlxuICAgICAgICAgIDxtZC1tZW51LWl0ZW1cbiAgICAgICAgICAgIGhyZWY9XCIjXCJcbiAgICAgICAgICAgIEBjbGljaz1cIiR7dGhpcy5oYW5kbGVDbGlja31cIj5cbiAgICAgICAgICAgIEl0ZW0gMlxuICAgICAgICAgIDwvbWQtbWVudS1pdGVtPlxuICAgICAgICA8L21kLW1lbnU-XG4gICAgICA8L3NwYW4-XG4gICAgICA8c3BhbiBzcGFuIHN0eWxlPVwicG9zaXRpb246IHJlbGF0aXZlXCI-XG4gICAgICAgIDxtZC1maWxsZWQtYnV0dG9uXG4gICAgICAgICAgaWQ9XCJidXR0b24yXCJcbiAgICAgICAgICBAY2xpY2s9XCIkeygpID0-IHRoaXMubWVudTIub3BlbiA9ICF0aGlzLm1lbnUyLm9wZW59XCI-XG4gICAgICAgICAgQnV0dG9uc1xuICAgICAgICA8L21kLWZpbGxlZC1idXR0b24-XG4gICAgICAgIDxtZC1tZW51IFxuICAgICAgICAgIGlkPVwibWVudTJcIlxuICAgICAgICAgIGFuY2hvcj1cImJ1dHRvbjJcIlxuICAgICAgICA-XG4gICAgICAgICAgPG1kLW1lbnUtaXRlbVxuICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICBAY2xpY2s9XCIke3RoaXMuaGFuZGxlQ2xpY2t9XCJcbiAgICAgICAgICAgIEBjbG9zZS1tZW51PVwiJHt0aGlzLmhhbmRsZUNsb3NlTWVudX1cIj5cbiAgICAgICAgICAgIEl0ZW0gMVxuICAgICAgICAgIDwvbWQtbWVudS1pdGVtPlxuICAgICAgICAgIDxtZC1tZW51LWl0ZW1cbiAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgQGNsaWNrPVwiJHt0aGlzLmhhbmRsZUNsaWNrfVwiXG4gICAgICAgICAgICBAY2xvc2UtbWVudT1cIiR7dGhpcy5oYW5kbGVDbG9zZU1lbnV9XCI-XG4gICAgICAgICAgICBJdGVtIDJcbiAgICAgICAgICA8L21kLW1lbnUtaXRlbT5cbiAgICAgICAgPC9tZC1tZW51PlxuICAgICAgPC9zcGFuPlxuICAgICAgICBgO1xuICB9XG59In0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxoZWFkPlxuICA8c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCIuL21haW4uanNcIj48L3NjcmlwdD5cbjwvaGVhZD5cbjxzdHlsZT5cbiAgXG48L3N0eWxlPlxuPGJvZHk-XG4gIDxteS1jb21wb25lbnQ-PC9teS1jb21wb25lbnQ-XG48L2JvZHk-XG4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMi4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4xLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeMy4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjIuMC4wXCJcbiAgfVxufSIsImhpZGRlbiI6dHJ1ZX1d)

Also notice how anchors only get clicked on Enter but not Space which matches their native behavior but not so much the menu spec. The inconsistency irks me a bit but meh. As an aside, I feel like handling selection from a menu is the most essential part of using it so there should be an easier way to go about all this.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the md-menu-item keyboard-selection behavior described in the issue and compare button items with anchor items in the linked Example Playground. Verify the expected Enter and Space behavior, then confirm that keyboard selection produces the same activation effect as mouse selection without requiring manual close-menu handling.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.