{"action":"created","issue":{"url":"https://api.github.com/repos/edx/edx-platform/issues/7886","labels_url":"https://api.github.com/repos/edx/edx-platform/issues/7886/labels{/name}","comments_url":"https://api.github.com/repos/edx/edx-platform/issues/7886/comments","events_url":"https://api.github.com/repos/edx/edx-platform/issues/7886/events","html_url":"https://github.com/edx/edx-platform/pull/7886","id":72471894,"number":7886,"title":"New dropdown mechanism","user":{"login":"clrux","id":2112024,"avatar_url":"https://avatars.githubusercontent.com/u/2112024?v=3","gravatar_id":"","url":"https://api.github.com/users/clrux","html_url":"https://github.com/clrux","followers_url":"https://api.github.com/users/clrux/followers","following_url":"https://api.github.com/users/clrux/following{/other_user}","gists_url":"https://api.github.com/users/clrux/gists{/gist_id}","starred_url":"https://api.github.com/users/clrux/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/clrux/subscriptions","organizations_url":"https://api.github.com/users/clrux/orgs","repos_url":"https://api.github.com/users/clrux/repos","events_url":"https://api.github.com/users/clrux/events{/privacy}","received_events_url":"https://api.github.com/users/clrux/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-05-01T16:44:55Z","updated_at":"2015-05-12T15:28:07Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/edx/edx-platform/pulls/7886","html_url":"https://github.com/edx/edx-platform/pull/7886","diff_url":"https://github.com/edx/edx-platform/pull/7886.diff","patch_url":"https://github.com/edx/edx-platform/pull/7886.patch"},"body":"# What this work covers\r\nThis work addresses functionality and accessibility issues surrounding the dropdown/menus that serve as \"more\" (options or actions) menus. More information is available in the original JIRA ticket [UX-1994](https://openedx.atlassian.net/browse/UX-1994).\r\n\r\n__This work is scoped to the LMS and Xblocks (video player) only at this time.__\r\n\r\nThe menus I found that were impacted, were:\r\n\r\n* user profile actions in the LMS header\r\n* course actions on the course dashboard\r\n* video transcript download options on LMS videos (xblock)\r\n\r\n## Background\r\nOur previous dropdown menus had several issues. They were all built individually and therefore used different code and had different styles, they were difficult to use and didn't close intuitively, and they weren't very accessible.\r\n\r\nIn the spirit of simplifying code, I've come up with new, cleaner, more semantic markup, new styles that serve as defaults and can be overwritten per application or use, and a new JavaScript method to make it all work. All reusable.\r\n\r\nThe goal here is semantics, accessibility, simplicity, and easy maintenance.\r\n\r\n### LMS, CMS, Xblocks, oh my!\r\nBecause of the nature of LMS, CMS, and Xblock pathing, there are two iterations of this work: one in LMS and another in CMS/Xblocks (specifically for the video player transcript controls).\r\n\r\n#### Models/Controller files and locations:\r\nThe two primary functionality files are:\r\n* `lms/static/js/utils/dropdown.js`\r\n* `common/lib/xmodule/xmodule/js/src/video/035_video_accessible_menu.js`\r\n\r\nIf maintenance is required on one, be sure and perform the same updates on the other. I also had to update the spec tests for the video player to sync up with the new markup.\r\n\r\n## How to use\r\n\r\n### Markup\r\nYour markup should resemble the following. The below code contains the minimum required markup.\r\n```\r\n<div class=\"wrapper-more-actions\">\r\n    <button type=\"button\" class=\"button button-more has-dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" aria-controls=\"[id-of-dropdown]\">Open menu</button>\r\n    <ul class=\"dropdown is-hidden\" id=\"[dropdown-id]\" tabindex=\"-1\">\r\n        <li class=\"dropdown-item\">\r\n            <a class=\"action\">...</a>\r\n        </li>\r\n    </ul>\r\n</div>\r\n```\r\n\r\nAdditionally, you can pass in a parent (jQuery object) in the JS `init()` function and scope the script to just that parent.\r\n\r\n### Styling\r\nI've provided a solid default which work in any case, but if you need styling for a specific use case, simply write normal override Sass.\r\n\r\n### Behind-the-scenes\r\nTo make things simpler, the JavaScript method checks the placement of the button and if the button is on the right half of the screen (greater than the midpoint), it renders the menu from right to left. If it's on the left half of the screen, it renders the menu left to right. This ensures the dropdown menu never goes outside of the page boundaries and prevents horizontal scrolling.\r\n\r\n### Options\r\nBy default, menu items read in the default language orientation (either LTR or RTL) regardless of the direction of the dropdown. If you'd like the text to align itself under the control, which in some cases may render the text right to left, simply give the menu a class of `control-text-align`. This will use the dropdown's orientation to determine the texts orientation.\r\n\r\n```\r\n<ul class=\"dropdown control-text-align is-hidden\" ... ></ul>\r\n```\r\n\r\n## Browser testing\r\nThis code has been tested in the following browsers:\r\n```\r\n| Platform | Browser | Version | Passed | \r\n|----------|---------|---------|--------|\r\n| Mac      | Chrome  | 43      | Yes    |\r\n|          | Safari  | 8       | Yes    |\r\n|          | Firefox | 24      | Yes    |\r\n| Windows  | IE      | 9       | Yes    |\r\n|          |         | 10      | Yes    |\r\n|          |         | 11      | Yes    |\r\n|          | Firefox | 37      | Yes    |\r\n```\r\n\r\n## Quirks and interestingness\r\nI've tried to remove as much \"thought\" from using a dropdown as possible. As stated earlier, the menu displays based on the position of its trigger button (either going left to right or right to left). However in doing so I've created two classes that are LTR-based. The properties within these two classes are properly RTL'd, but this may cause some confusion in RTL-native locations. Despite the names of these two classes, the properties and output of the menus will be properly RTL'd.\r\n\r\nNote: the \"automatic right-or-left presentation isn't available in the Xblock.\r\n\r\n---\r\n\r\nReviewers:\r\n* @talbs @frrrances (HTML + SCSS)\r\n* @AlasdairSwan @andy-armstrong (JS + tests)\r\n* @cptvitamin (Accessibility)\r\n\r\n---\r\n\r\n__Please note: There are a few tests and lines of code that have been commented out. I will remove them prior to merge.__"},"comment":{"url":"https://api.github.com/repos/edx/edx-platform/issues/comments/101320605","html_url":"https://github.com/edx/edx-platform/pull/7886#issuecomment-101320605","issue_url":"https://api.github.com/repos/edx/edx-platform/issues/7886","id":101320605,"user":{"login":"talbs","id":163763,"avatar_url":"https://avatars.githubusercontent.com/u/163763?v=3","gravatar_id":"","url":"https://api.github.com/users/talbs","html_url":"https://github.com/talbs","followers_url":"https://api.github.com/users/talbs/followers","following_url":"https://api.github.com/users/talbs/following{/other_user}","gists_url":"https://api.github.com/users/talbs/gists{/gist_id}","starred_url":"https://api.github.com/users/talbs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/talbs/subscriptions","organizations_url":"https://api.github.com/users/talbs/orgs","repos_url":"https://api.github.com/users/talbs/repos","events_url":"https://api.github.com/users/talbs/events{/privacy}","received_events_url":"https://api.github.com/users/talbs/received_events","type":"User","site_admin":false},"created_at":"2015-05-12T15:28:07Z","updated_at":"2015-05-12T15:28:07Z","body":"@clrux, 1st round of visual/UI review is done. Let me know when you have revisions in place. Thanks for the hard work!"}}