material-components / material-components/material-web
md-menu-item of type="button" should click on keyboard selection
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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