{"action":"created","issue":{"url":"https://api.github.com/repos/edx/edx-platform/issues/13181","repository_url":"https://api.github.com/repos/edx/edx-platform","labels_url":"https://api.github.com/repos/edx/edx-platform/issues/13181/labels{/name}","comments_url":"https://api.github.com/repos/edx/edx-platform/issues/13181/comments","events_url":"https://api.github.com/repos/edx/edx-platform/issues/13181/events","html_url":"https://github.com/edx/edx-platform/pull/13181","id":169678853,"number":13181,"title":"AC-553 adding keyboard functionality to image zoom tool","user":{"login":"downzer0","id":2112024,"avatar_url":"https://avatars.githubusercontent.com/u/2112024?v=3","gravatar_id":"","url":"https://api.github.com/users/downzer0","html_url":"https://github.com/downzer0","followers_url":"https://api.github.com/users/downzer0/followers","following_url":"https://api.github.com/users/downzer0/following{/other_user}","gists_url":"https://api.github.com/users/downzer0/gists{/gist_id}","starred_url":"https://api.github.com/users/downzer0/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/downzer0/subscriptions","organizations_url":"https://api.github.com/users/downzer0/orgs","repos_url":"https://api.github.com/users/downzer0/repos","events_url":"https://api.github.com/users/downzer0/events{/privacy}","received_events_url":"https://api.github.com/users/downzer0/received_events","type":"User","site_admin":false},"labels":[{"id":128413104,"url":"https://api.github.com/repos/edx/edx-platform/labels/needs%20triage","name":"needs triage","color":"e11d21","default":false},{"id":78051711,"url":"https://api.github.com/repos/edx/edx-platform/labels/open-source-contribution","name":"open-source-contribution","color":"bfe5bf","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":54,"created_at":"2016-08-05T19:25:45Z","updated_at":"2016-12-20T02:42:54Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/edx/edx-platform/pulls/13181","html_url":"https://github.com/edx/edx-platform/pull/13181","diff_url":"https://github.com/edx/edx-platform/pull/13181.diff","patch_url":"https://github.com/edx/edx-platform/pull/13181.patch"},"body":"# [AC-553](https://openedx.atlassian.net/browse/AC-553)\n\nThis work adds much needed keyboard functionality to our image zoom tool allowing keyboard-only users to interact with the zoomed image. All pre-existing functionality with the mouse was maintained.\n## What this covers\n- activate the image zoom by pressing `Enter` on the link/small image\n- use the arrow keys to move the zoomed image in the viewing window\n- pressing `Esc` will close the zoomed image and return focus back to the link/small image\n- styling for the zoomed image has largely been moved into our Sass, rather than inline styles\n- new JavaScript file to replace our other one; can still be hosted on the Web (but ideally, we'd Require it when the image zoom component is selected)\n## Updated JS\n\nBecause the existing image zoom JavaScript isn't hosted in our platform, I opted to keep this one out as well so the same workflow takes place. Course authors who wish to use the image zoom tool should download the file and then upload it to their course.\n\nI've created a [Gist of that updated JavaScript file](https://gist.github.com/clrux/d1aee242be6f63c739630da24143817e#file-image-zoom-tool-js) for review. It passes ESLint checks.\n## What this does not cover\n- this tool does not provide support for screen reader only users at this time (though we do have hopes to make this somewhat accessible to screen reader users in the future)\n## Prior to merge...\n- add new JS to the permanent location (where folks download stuff form)\n- ensure the Yaml file reflects the above correctly\n## Reasoning for new Sass partials\n\nPreviously, the styles were applied via JS inline. This limits modifications and restricts flexibility, especially with respect to the placement of the zoomed \"circle\" overlay. I've included two partials (that are the same - one for LMS and another for Studio) allowing for more customization of the placement of said zoomed circle. For example, in Studio, the sidebar is on the right side, but in LMS it's on the left. One may wish to customize the placement of the zoomed area and these two partials make that feasible.\n## Sandbox\n\nStudio: https://studio-clrux-ac-553.sandbox.edx.org/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@45c7cedb4bfe46f4a68c78787151cfb5\n\nLMS: https://clrux-ac-553.sandbox.edx.org/courses/course-v1:edX+DemoX+Demo_Course/courseware/9fca584977d04885bc911ea76a9ef29e/07bc32474380492cb34f76e5f9d9a135/1?activate_block_id=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40vertical%2Bblock%4045c7cedb4bfe46f4a68c78787151cfb5\n## Reviewers\n- [x] @cptvitamin (Accessibility)\n- [ ] @cahrens or someone else from T&L\n- [x] @lamagnifica (FYI)\n"},"comment":{"url":"https://api.github.com/repos/edx/edx-platform/issues/comments/268139200","html_url":"https://github.com/edx/edx-platform/pull/13181#issuecomment-268139200","issue_url":"https://api.github.com/repos/edx/edx-platform/issues/13181","id":268139200,"user":{"login":"edx-webhook","id":8964148,"avatar_url":"https://avatars.githubusercontent.com/u/8964148?v=3","gravatar_id":"","url":"https://api.github.com/users/edx-webhook","html_url":"https://github.com/edx-webhook","followers_url":"https://api.github.com/users/edx-webhook/followers","following_url":"https://api.github.com/users/edx-webhook/following{/other_user}","gists_url":"https://api.github.com/users/edx-webhook/gists{/gist_id}","starred_url":"https://api.github.com/users/edx-webhook/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx-webhook/subscriptions","organizations_url":"https://api.github.com/users/edx-webhook/orgs","repos_url":"https://api.github.com/users/edx-webhook/repos","events_url":"https://api.github.com/users/edx-webhook/events{/privacy}","received_events_url":"https://api.github.com/users/edx-webhook/received_events","type":"User","site_admin":false},"created_at":"2016-12-20T02:42:53Z","updated_at":"2016-12-20T02:42:53Z","body":"Thanks for the pull request, @downzer0! I've created [OSPR-1627](https://openedx.atlassian.net/browse/OSPR-1627) to keep track of it in JIRA. JIRA is a place for product owners to prioritize feature reviews by the engineering development teams.\n\nFeel free to add as much of the following information to the ticket:\n- supporting documentation\n- edx-code email threads\n- timeline information (\"this must be merged by XX date\", and why that is)\n- partner information (\"this is a course on edx.org\")\n- any other information that can help Product understand the context for the PR\n\nAll technical communication about the code itself will still be done via the GitHub pull request interface. As a reminder, [our process documentation is here](http://edx-developer-guide.readthedocs.org/en/latest/process/overview.html).\n\n\n\nWe can't start reviewing your pull request until you've submitted a     [signed contributor agreement](http://open.edx.org/sites/default/files/wysiwyg/individual-contributor-agreement.pdf)     or indicated your institutional affiliation.     If you like, you can add yourself to the [AUTHORS](https://github.com/edx/edx-platform/blob/master/AUTHORS)      file for this repo, though that isn't required.     Please see the [CONTRIBUTING](https://github.com/edx/edx-platform/blob/master/CONTRIBUTING.rst)     file for more information."}}
{"actor":{"display_login":"edx-webhook"}}