{"action":"created","issue":{"url":"https://api.github.com/repos/benetech/MathShare/issues/783","repository_url":"https://api.github.com/repos/benetech/MathShare","labels_url":"https://api.github.com/repos/benetech/MathShare/issues/783/labels{/name}","comments_url":"https://api.github.com/repos/benetech/MathShare/issues/783/comments","events_url":"https://api.github.com/repos/benetech/MathShare/issues/783/events","html_url":"https://github.com/benetech/MathShare/issues/783","id":491272574,"node_id":"MDU6SXNzdWU0OTEyNzI1NzQ=","number":783,"title":"PageIndex Inaccessible Dropdown Menu Pattern","user":{"login":"johnhbenetech","id":12927553,"node_id":"MDQ6VXNlcjEyOTI3NTUz","avatar_url":"https://avatars3.githubusercontent.com/u/12927553?v=4","gravatar_id":"","url":"https://api.github.com/users/johnhbenetech","html_url":"https://github.com/johnhbenetech","followers_url":"https://api.github.com/users/johnhbenetech/followers","following_url":"https://api.github.com/users/johnhbenetech/following{/other_user}","gists_url":"https://api.github.com/users/johnhbenetech/gists{/gist_id}","starred_url":"https://api.github.com/users/johnhbenetech/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/johnhbenetech/subscriptions","organizations_url":"https://api.github.com/users/johnhbenetech/orgs","repos_url":"https://api.github.com/users/johnhbenetech/repos","events_url":"https://api.github.com/users/johnhbenetech/events{/privacy}","received_events_url":"https://api.github.com/users/johnhbenetech/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2019-09-09T19:07:34Z","updated_at":"2019-09-09T19:08:39Z","closed_at":null,"author_association":"MEMBER","body":"For each problem set in the list, a toggle control is present allowing a sub-menu to be expanded.  The sub-menu contains the “Duplicate Set” and “Share with Teachers” controls.  Both the toggle button and sub-menu content are completely inaccessible to, and unusable by, all keyboard users, including those operating a screen reader. \r\n \r\nFirstly, the toggle < button> is a child of the problem set link, as is the < div> containing the sub-menu items.  Those items are themselves marked up as links, meaning that there is one < button> and two < a> elements marked up as children of a < button>.  The HTML Specification (https://html.spec.whatwg.org/multipage/) defines a content model (https://html.spec.whatwg.org/multipage/dom.html#concept-element-content-model) for all elements, described as: “A normative description of what content must be included as children and descendants of the element”.  For both < a> (defined in 4.5.1) and < button> (defined in 4.10.6), the content model clearly states that “there must be no interactive content descendant”. \r\n \r\nIn short, this sub-menu implementation pattern does not represent valid HTML.  A browser will not expose the child <button> toggle control in the accessibility tree, so a screen reader user won’t even know that the sub-menu exists.  Meanwhile, people with some usable vision who still rely on the keyboard (such as users of screen magnification) may be able to see the toggle control, but become bewildered when they can’t set focus to or activate it. \r\n \r\nNext, the mark-up of the toggle button and sub-menu content presents some accessibility concerns: \r\n \r\n• The toggle button has no accessible label.  Visually, it is labelled using a Font Awesome icon, but no textual alternative is implemented. \r\n• An aria-haspopup attribute (with a value of “true”) has been applied to the toggle button.  This is incorrect because, while the button does control the display of sub-menu-style content, the sub-menu itself is not (and should not) be marked up as a menu proper. \r\n• The sub-menu is contained inside a < div> instead of a < ul>. \r\n• The sub-menu’s container has an aria-labelledby attribute applied to provide an accessible name, but its value references a non-existent element ID. \r\n \r\nFinally, users who are able to operate the menu using a mouse may become confused, when they find that activating the “Share with Teachers” option actually opens the Twitter website with a pre-filled tweet. "},"comment":{"url":"https://api.github.com/repos/benetech/MathShare/issues/comments/529622889","html_url":"https://github.com/benetech/MathShare/issues/783#issuecomment-529622889","issue_url":"https://api.github.com/repos/benetech/MathShare/issues/783","id":529622889,"node_id":"MDEyOklzc3VlQ29tbWVudDUyOTYyMjg4OQ==","user":{"login":"johnhbenetech","id":12927553,"node_id":"MDQ6VXNlcjEyOTI3NTUz","avatar_url":"https://avatars3.githubusercontent.com/u/12927553?v=4","gravatar_id":"","url":"https://api.github.com/users/johnhbenetech","html_url":"https://github.com/johnhbenetech","followers_url":"https://api.github.com/users/johnhbenetech/followers","following_url":"https://api.github.com/users/johnhbenetech/following{/other_user}","gists_url":"https://api.github.com/users/johnhbenetech/gists{/gist_id}","starred_url":"https://api.github.com/users/johnhbenetech/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/johnhbenetech/subscriptions","organizations_url":"https://api.github.com/users/johnhbenetech/orgs","repos_url":"https://api.github.com/users/johnhbenetech/repos","events_url":"https://api.github.com/users/johnhbenetech/events{/privacy}","received_events_url":"https://api.github.com/users/johnhbenetech/received_events","type":"User","site_admin":false},"created_at":"2019-09-09T19:08:39Z","updated_at":"2019-09-09T19:08:39Z","author_association":"MEMBER","body":"Suggested Solution \r\n \r\nNesting interactive controls inside other interactive controls in this way must be avoided.  Here, the button to toggle the sub-menu, and the sub-menu itself, should be repositioned in the DOM to follow the problem set link instead of being children of it.  In addition, it would be appropriate to avoid using a < button> element for the problem set link, and then overriding its accessible role.  The control should be  a hyperlink, so there’s no reason not to use a < a> directly. \r\n \r\nAn accessible label must then be applied to the toggle, which can be accomplished using an aria-label attribute.  The text can be something like: “More Options”, and should include the name of the corresponding problem set to avoid multiple buttons with exactly the same label but different contexts.  For example: “More options for Distance, Rate and Time”.  Of note is that the number of problems in the set, which is present in the problem set link text, should not be included in the toggle button label.  This string will also need to be localized. \r\n \r\nThirdly, unnecessary and problematic attributes should be removed from all < button> and < a> controls.  This includes the aria-haspopup attribute from the toggle button, as well as the tabindex and type attributes from all other < button> and < a> elements. \r\n \r\nNext, the sub-menu should be marked up as an unordered list instead of a flat < div>, with the two child links wrapped inside < li> elements.  The value of the aria-labelledby attribute on the opening < ul> should be corrected to refer to the ID of the corresponding toggle button. \r\n \r\nAnd finally, it would be helpful to modify the link text of the “Share with Teachers” option so that it more accurately reflects its true purpose and destination.  For example, the text could just read “Share on Twitter”.  This change will require  updating the share_with_teachers key in the strings.js file. \r\n "}}
{"actor":{"display_login":"johnhbenetech"}}