{"action":"created","issue":{"url":"https://api.github.com/repos/material-components/material-components-web/issues/4704","repository_url":"https://api.github.com/repos/material-components/material-components-web","labels_url":"https://api.github.com/repos/material-components/material-components-web/issues/4704/labels{/name}","comments_url":"https://api.github.com/repos/material-components/material-components-web/issues/4704/comments","events_url":"https://api.github.com/repos/material-components/material-components-web/issues/4704/events","html_url":"https://github.com/material-components/material-components-web/issues/4704","id":443027680,"node_id":"MDU6SXNzdWU0NDMwMjc2ODA=","number":4704,"title":"Accessibility: Make app navigation with dismissable drawers accessible for screen readers","user":{"login":"maracuja-juice","id":16801528,"node_id":"MDQ6VXNlcjE2ODAxNTI4","avatar_url":"https://avatars3.githubusercontent.com/u/16801528?v=4","gravatar_id":"","url":"https://api.github.com/users/maracuja-juice","html_url":"https://github.com/maracuja-juice","followers_url":"https://api.github.com/users/maracuja-juice/followers","following_url":"https://api.github.com/users/maracuja-juice/following{/other_user}","gists_url":"https://api.github.com/users/maracuja-juice/gists{/gist_id}","starred_url":"https://api.github.com/users/maracuja-juice/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/maracuja-juice/subscriptions","organizations_url":"https://api.github.com/users/maracuja-juice/orgs","repos_url":"https://api.github.com/users/maracuja-juice/repos","events_url":"https://api.github.com/users/maracuja-juice/events{/privacy}","received_events_url":"https://api.github.com/users/maracuja-juice/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":27,"created_at":"2019-05-11T19:17:41Z","updated_at":"2019-06-20T18:44:03Z","closed_at":"2019-05-30T17:45:31Z","author_association":"CONTRIBUTOR","body":"I want to create an accessible navigation using Material Components Web.\r\nThe basic html markup that would be something like this:\r\n```\r\n<nav id=\"navigation\">\r\n  <button aria-expanded=\"false\">Menu</button>\r\n  <ul hidden>\r\n    <li><a href=\"/\">Home</a></li>\r\n    <li><a href=\"/about\">About</a></li>\r\n    <li><a href=\"/shop\">Shop</a></li>\r\n    <li><a href=\"/contact\">Contact</a></li>\r\n  </ul>\r\n</nav>\r\n```\r\n(This is taken from [this great resource](https://inclusive-components.design/menus-menu-buttons))\r\nIt's important that the menu button is **right next** to the ul, otherwise screenreaders won't know that the button controls the state of the ul.\r\n\r\nUsing this kind of markup doesn't seem to be supported right now as in the examples you use a different markup which **isn't** accessible. I'm referring to [this](https://material.io/develop/web/components/drawers/#dismissible-drawer-below-top-app-bar).\r\n\r\nIt should be possible in MDC to have the list of navigation items right next to menu button. How the exact markup for that should look like, I'm not sure yet myself.\r\n\r\nIf this is actually possible and I just wasn't able to achieve it yet, then I suggest that the docs only show this accessible approach. \r\n\r\nResources that I gathered for an accessible Menu:\r\n- https://vimeo.com/album/5937296/video/331530115 (In the video it is suggested that aria-controls would work well for this markup but [it isn't actually the case](https://inclusive-components.design/menus-menu-buttons/#ariacontrols) The other points hold true though.)\nTimestamp where she starts to talk about the menu: 9:46 \n(The other parts are very valuable as well though if you want to learn some more stuff about accessibility.)\r\n- https://inclusive-components.design/menus-menu-buttons/ "},"comment":{"url":"https://api.github.com/repos/material-components/material-components-web/issues/comments/504138622","html_url":"https://github.com/material-components/material-components-web/issues/4704#issuecomment-504138622","issue_url":"https://api.github.com/repos/material-components/material-components-web/issues/4704","id":504138622,"node_id":"MDEyOklzc3VlQ29tbWVudDUwNDEzODYyMg==","user":{"login":"maracuja-juice","id":16801528,"node_id":"MDQ6VXNlcjE2ODAxNTI4","avatar_url":"https://avatars3.githubusercontent.com/u/16801528?v=4","gravatar_id":"","url":"https://api.github.com/users/maracuja-juice","html_url":"https://github.com/maracuja-juice","followers_url":"https://api.github.com/users/maracuja-juice/followers","following_url":"https://api.github.com/users/maracuja-juice/following{/other_user}","gists_url":"https://api.github.com/users/maracuja-juice/gists{/gist_id}","starred_url":"https://api.github.com/users/maracuja-juice/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/maracuja-juice/subscriptions","organizations_url":"https://api.github.com/users/maracuja-juice/orgs","repos_url":"https://api.github.com/users/maracuja-juice/repos","events_url":"https://api.github.com/users/maracuja-juice/events{/privacy}","received_events_url":"https://api.github.com/users/maracuja-juice/received_events","type":"User","site_admin":false},"created_at":"2019-06-20T18:44:03Z","updated_at":"2019-06-20T18:44:03Z","author_association":"CONTRIBUTOR","body":"Any update on why you don't want to make this library more accessible?"}}
{"actor":{"display_login":"maracuja-juice"}}