{"action":"created","comment":{"url":"https://api.github.com/repos/Yoast/YoastSEO.js/pulls/comments/89601964","pull_request_review_id":10146191,"id":89601964,"diff_hunk":"@@ -3,36 +3,43 @@\n \t\t<h3 class=\"snippet-editor__heading snippet-editor__heading-icon snippet-editor__heading-icon-eye\"><%- i18n.snippetPreview %></h3>\n     <p class=\"screen-reader-text\"><%- i18n.snippetPreviewDescription %></p>\n \n-        <div class=\"snippet_container snippet-editor__container\" id=\"title_container\">\n-            <span class=\"screen-reader-text\"><%- i18n.titleLabel %></span>\n-            <span class=\"title\" id=\"render_title_container\">\n-                <span id=\"snippet_title\">\n-                    <%- rendered.title %>\n-                </span>\n-            </span>\n-            <span class=\"title\" id=\"snippet_sitename\"></span>\n-        </div>\n-        <div class=\"snippet_container snippet-editor__container\" id=\"url_container\">\n-            <span class=\"screen-reader-text\"><%- i18n.slugLabel %></span>\n-            <cite class=\"url urlBase\" id=\"snippet_citeBase\">\n-                <%- rendered.baseUrl %>\n-            </cite>\n-            <cite class=\"url\" id=\"snippet_cite\">\n-                <%- rendered.snippetCite %>\n-            </cite>\n-            <span class=\"down_arrow\"></span>\n-        </div>\n-        <div class=\"snippet_container snippet-editor__container\" id=\"meta_container\">\n-            <span class=\"screen-reader-text\"><%- i18n.metaDescriptionLabel %></span>\n-            <% if ( \"\" !== metaDescriptionDate ) { %>\n-                <span class=\"snippet-editor__date\">\n-                    <%- metaDescriptionDate %> -\n-                </span>\n-            <% } %>\n-            <span class=\"desc\" id=\"snippet_meta\">\n-                <%- rendered.meta %>\n-            </span>\n-        </div>\n+\t\t<div class=\"snippet-editor__view-toggle\">\n+\t\t\t<button class=\"snippet-editor__view-icon snippet-editor__view-icon-desktop\" data-type=\"desktop\" />\n+\t\t\t<button class=\"snippet-editor__view-icon snippet-editor__view-icon-mobile\" data-type=\"mobile\" />","path":"templates/snippetEditor.jst","position":36,"original_position":36,"commit_id":"5a5d0039d970421401f210e4fb869ab3678e957b","original_commit_id":"5a5d0039d970421401f210e4fb869ab3678e957b","user":{"login":"afercia","id":1682452,"avatar_url":"https://avatars.githubusercontent.com/u/1682452?v=3","gravatar_id":"","url":"https://api.github.com/users/afercia","html_url":"https://github.com/afercia","followers_url":"https://api.github.com/users/afercia/followers","following_url":"https://api.github.com/users/afercia/following{/other_user}","gists_url":"https://api.github.com/users/afercia/gists{/gist_id}","starred_url":"https://api.github.com/users/afercia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/afercia/subscriptions","organizations_url":"https://api.github.com/users/afercia/orgs","repos_url":"https://api.github.com/users/afercia/repos","events_url":"https://api.github.com/users/afercia/events{/privacy}","received_events_url":"https://api.github.com/users/afercia/received_events","type":"User","site_admin":false},"body":"The buttons are empty, there's nothing screen readers can announce.\r\n\r\n![screen shot 2016-11-24 at 15 28 49](https://cloud.githubusercontent.com/assets/1682452/20623429/cea4e55e-b307-11e6-9a66-bbabd508f9cb.png)\r\n\r\nI'd suggest to add some screen-reader-text or `aria-label` (\"Desktop preview\" - \"Mobile preview\" or something like that).\r\n\r\nAlso, there's no visual or audible feedback about which is the currently selected, active, view. For the visual feedback I guess we have to wait for a design proposal as mentioned in https://github.com/Yoast/yoast-components/issues/110\r\nFor the audible feedback, I'd propose to use the `aria-pressed` attribute, as done for example in the WordPress Customizer for the device preview buttons. This attribute uses false/true values and conveys the information the buttons are \"toggle buttons\", mutually exclusive. Meaning only one of them can have a \"pressed\" state. Screen readers will announce the buttons as \"toggle button\" and will announce also their state (some screen readers use the word \"selected\", others the word \"pressed\"):\r\n\r\n![screen shot 2016-11-24 at 15 29 42](https://cloud.githubusercontent.com/assets/1682452/20623475/07df97e2-b308-11e6-882b-479e12eefec6.png)\r\n\r\n![screen shot 2016-11-24 at 15 29 54](https://cloud.githubusercontent.com/assets/1682452/20623476/07e107b2-b308-11e6-8fea-9b5a2743ac77.png)\r\n\r\n\r\n","created_at":"2016-11-25T11:11:12Z","updated_at":"2016-11-25T11:11:12Z","html_url":"https://github.com/Yoast/YoastSEO.js/pull/954#discussion_r89601964","pull_request_url":"https://api.github.com/repos/Yoast/YoastSEO.js/pulls/954","_links":{"self":{"href":"https://api.github.com/repos/Yoast/YoastSEO.js/pulls/comments/89601964"},"html":{"href":"https://github.com/Yoast/YoastSEO.js/pull/954#discussion_r89601964"},"pull_request":{"href":"https://api.github.com/repos/Yoast/YoastSEO.js/pulls/954"}}},"pull_request":{"url":"https://api.github.com/repos/Yoast/YoastSEO.js/pulls/954","id":95170500,"html_url":"https://github.com/Yoast/YoastSEO.js/pull/954","diff_url":"https://github.com/Yoast/YoastSEO.js/pull/954.diff","patch_url":"https://github.com/Yoast/YoastSEO.js/pull/954.patch","issue_url":"https://api.github.com/repos/Yoast/YoastSEO.js/issues/954","number":954,"state":"open","locked":false,"title":"Add mobile preview","user":{"login":"andizer","id":325040,"avatar_url":"https://avatars.githubusercontent.com/u/325040?v=3","gravatar_id":"","url":"https://api.github.com/users/andizer","html_url":"https://github.com/andizer","followers_url":"https://api.github.com/users/andizer/followers","following_url":"https://api.github.com/users/andizer/following{/other_user}","gists_url":"https://api.github.com/users/andizer/gists{/gist_id}","starred_url":"https://api.github.com/users/andizer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andizer/subscriptions","organizations_url":"https://api.github.com/users/andizer/orgs","repos_url":"https://api.github.com/users/andizer/repos","events_url":"https://api.github.com/users/andizer/events{/privacy}","received_events_url":"https://api.github.com/users/andizer/received_events","type":"User","site_admin":false},"body":"## Summary\r\n\r\nThis PR can be summarized in the following changelog entry:\r\n\r\n## Relevant technical choices:\r\n\r\n* Addes a module for handling the toggles\r\n\r\n## Test instructions\r\n\r\nThis PR can be tested by following these steps:\r\n\r\n* Open the browserified example page and see if you can switch preview \r\n\r\nFixes https://github.com/Yoast/yoast-components/issues/110\r\n","created_at":"2016-11-24T12:30:37Z","updated_at":"2016-11-25T11:11:12Z","closed_at":null,"merged_at":null,"merge_commit_sha":"0c20d6a56a69fd1b70bfe81b4dba544e4d5d14d6","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/Yoast/YoastSEO.js/pulls/954/commits","review_comments_url":"https://api.github.com/repos/Yoast/YoastSEO.js/pulls/954/comments","review_comment_url":"https://api.github.com/repos/Yoast/YoastSEO.js/pulls/comments{/number}","comments_url":"https://api.github.com/repos/Yoast/YoastSEO.js/issues/954/comments","statuses_url":"https://api.github.com/repos/Yoast/YoastSEO.js/statuses/5a5d0039d970421401f210e4fb869ab3678e957b","head":{"label":"Yoast:AM/add-mobile-preview","ref":"AM/add-mobile-preview","sha":"5a5d0039d970421401f210e4fb869ab3678e957b","user":{"login":"Yoast","id":4690436,"avatar_url":"https://avatars.githubusercontent.com/u/4690436?v=3","gravatar_id":"","url":"https://api.github.com/users/Yoast","html_url":"https://github.com/Yoast","followers_url":"https://api.github.com/users/Yoast/followers","following_url":"https://api.github.com/users/Yoast/following{/other_user}","gists_url":"https://api.github.com/users/Yoast/gists{/gist_id}","starred_url":"https://api.github.com/users/Yoast/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Yoast/subscriptions","organizations_url":"https://api.github.com/users/Yoast/orgs","repos_url":"https://api.github.com/users/Yoast/repos","events_url":"https://api.github.com/users/Yoast/events{/privacy}","received_events_url":"https://api.github.com/users/Yoast/received_events","type":"Organization","site_admin":false},"repo":{"id":32734884,"name":"YoastSEO.js","full_name":"Yoast/YoastSEO.js","owner":{"login":"Yoast","id":4690436,"avatar_url":"https://avatars.githubusercontent.com/u/4690436?v=3","gravatar_id":"","url":"https://api.github.com/users/Yoast","html_url":"https://github.com/Yoast","followers_url":"https://api.github.com/users/Yoast/followers","following_url":"https://api.github.com/users/Yoast/following{/other_user}","gists_url":"https://api.github.com/users/Yoast/gists{/gist_id}","starred_url":"https://api.github.com/users/Yoast/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Yoast/subscriptions","organizations_url":"https://api.github.com/users/Yoast/orgs","repos_url":"https://api.github.com/users/Yoast/repos","events_url":"https://api.github.com/users/Yoast/events{/privacy}","received_events_url":"https://api.github.com/users/Yoast/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Yoast/YoastSEO.js","description":"Analyze content on a page and give SEO feedback as well as render a snippet preview.","fork":false,"url":"https://api.github.com/repos/Yoast/YoastSEO.js","forks_url":"https://api.github.com/repos/Yoast/YoastSEO.js/forks","keys_url":"https://api.github.com/repos/Yoast/YoastSEO.js/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Yoast/YoastSEO.js/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Yoast/YoastSEO.js/teams","hooks_url":"https://api.github.com/repos/Yoast/YoastSEO.js/hooks","issue_events_url":"https://api.github.com/repos/Yoast/YoastSEO.js/issues/events{/number}","events_url":"https://api.github.com/repos/Yoast/YoastSEO.js/events","assignees_url":"https://api.github.com/repos/Yoast/YoastSEO.js/assignees{/user}","branches_url":"https://api.github.com/repos/Yoast/YoastSEO.js/branches{/branch}","tags_url":"https://api.github.com/repos/Yoast/YoastSEO.js/tags","blobs_url":"https://api.github.com/repos/Yoast/YoastSEO.js/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Yoast/YoastSEO.js/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Yoast/YoastSEO.js/git/refs{/sha}","trees_url":"https://api.github.com/repos/Yoast/YoastSEO.js/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Yoast/YoastSEO.js/statuses/{sha}","languages_url":"https://api.github.com/repos/Yoast/YoastSEO.js/languages","stargazers_url":"https://api.github.com/repos/Yoast/YoastSEO.js/stargazers","contributors_url":"https://api.github.com/repos/Yoast/YoastSEO.js/contributors","subscribers_url":"https://api.github.com/repos/Yoast/YoastSEO.js/subscribers","subscription_url":"https://api.github.com/repos/Yoast/YoastSEO.js/subscription","commits_url":"https://api.github.com/repos/Yoast/YoastSEO.js/commits{/sha}","git_commits_url":"https://api.github.com/repos/Yoast/YoastSEO.js/git/commits{/sha}","comments_url":"https://api.github.com/repos/Yoast/YoastSEO.js/comments{/number}","issue_comment_url":"https://api.github.com/repos/Yoast/YoastSEO.js/issues/comments{/number}","contents_url":"https://api.github.com/repos/Yoast/YoastSEO.js/contents/{+path}","compare_url":"https://api.github.com/repos/Yoast/YoastSEO.js/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Yoast/YoastSEO.js/merges","archive_url":"https://api.github.com/repos/Yoast/YoastSEO.js/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Yoast/YoastSEO.js/downloads","issues_url":"https://api.github.com/repos/Yoast/YoastSEO.js/issues{/number}","pulls_url":"https://api.github.com/repos/Yoast/YoastSEO.js/pulls{/number}","milestones_url":"https://api.github.com/repos/Yoast/YoastSEO.js/milestones{/number}","notifications_url":"https://api.github.com/repos/Yoast/YoastSEO.js/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Yoast/YoastSEO.js/labels{/name}","releases_url":"https://api.github.com/repos/Yoast/YoastSEO.js/releases{/id}","deployments_url":"https://api.github.com/repos/Yoast/YoastSEO.js/deployments","created_at":"2015-03-23T13:50:16Z","updated_at":"2016-11-22T17:49:35Z","pushed_at":"2016-11-24T14:16:00Z","git_url":"git://github.com/Yoast/YoastSEO.js.git","ssh_url":"git@github.com:Yoast/YoastSEO.js.git","clone_url":"https://github.com/Yoast/YoastSEO.js.git","svn_url":"https://github.com/Yoast/YoastSEO.js","homepage":"","size":5971,"stargazers_count":83,"watchers_count":83,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":19,"mirror_url":null,"open_issues_count":135,"forks":19,"open_issues":135,"watchers":83,"default_branch":"develop"}},"base":{"label":"Yoast:develop","ref":"develop","sha":"655d785a91fa2bd46e8d80ff8a8e2758d740989c","user":{"login":"Yoast","id":4690436,"avatar_url":"https://avatars.githubusercontent.com/u/4690436?v=3","gravatar_id":"","url":"https://api.github.com/users/Yoast","html_url":"https://github.com/Yoast","followers_url":"https://api.github.com/users/Yoast/followers","following_url":"https://api.github.com/users/Yoast/following{/other_user}","gists_url":"https://api.github.com/users/Yoast/gists{/gist_id}","starred_url":"https://api.github.com/users/Yoast/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Yoast/subscriptions","organizations_url":"https://api.github.com/users/Yoast/orgs","repos_url":"https://api.github.com/users/Yoast/repos","events_url":"https://api.github.com/users/Yoast/events{/privacy}","received_events_url":"https://api.github.com/users/Yoast/received_events","type":"Organization","site_admin":false},"repo":{"id":32734884,"name":"YoastSEO.js","full_name":"Yoast/YoastSEO.js","owner":{"login":"Yoast","id":4690436,"avatar_url":"https://avatars.githubusercontent.com/u/4690436?v=3","gravatar_id":"","url":"https://api.github.com/users/Yoast","html_url":"https://github.com/Yoast","followers_url":"https://api.github.com/users/Yoast/followers","following_url":"https://api.github.com/users/Yoast/following{/other_user}","gists_url":"https://api.github.com/users/Yoast/gists{/gist_id}","starred_url":"https://api.github.com/users/Yoast/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Yoast/subscriptions","organizations_url":"https://api.github.com/users/Yoast/orgs","repos_url":"https://api.github.com/users/Yoast/repos","events_url":"https://api.github.com/users/Yoast/events{/privacy}","received_events_url":"https://api.github.com/users/Yoast/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Yoast/YoastSEO.js","description":"Analyze content on a page and give SEO feedback as well as render a snippet preview.","fork":false,"url":"https://api.github.com/repos/Yoast/YoastSEO.js","forks_url":"https://api.github.com/repos/Yoast/YoastSEO.js/forks","keys_url":"https://api.github.com/repos/Yoast/YoastSEO.js/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Yoast/YoastSEO.js/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Yoast/YoastSEO.js/teams","hooks_url":"https://api.github.com/repos/Yoast/YoastSEO.js/hooks","issue_events_url":"https://api.github.com/repos/Yoast/YoastSEO.js/issues/events{/number}","events_url":"https://api.github.com/repos/Yoast/YoastSEO.js/events","assignees_url":"https://api.github.com/repos/Yoast/YoastSEO.js/assignees{/user}","branches_url":"https://api.github.com/repos/Yoast/YoastSEO.js/branches{/branch}","tags_url":"https://api.github.com/repos/Yoast/YoastSEO.js/tags","blobs_url":"https://api.github.com/repos/Yoast/YoastSEO.js/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Yoast/YoastSEO.js/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Yoast/YoastSEO.js/git/refs{/sha}","trees_url":"https://api.github.com/repos/Yoast/YoastSEO.js/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Yoast/YoastSEO.js/statuses/{sha}","languages_url":"https://api.github.com/repos/Yoast/YoastSEO.js/languages","stargazers_url":"https://api.github.com/repos/Yoast/YoastSEO.js/stargazers","contributors_url":"https://api.github.com/repos/Yoast/YoastSEO.js/contributors","subscribers_url":"https://api.github.com/repos/Yoast/YoastSEO.js/subscribers","subscription_url":"https://api.github.com/repos/Yoast/YoastSEO.js/subscription","commits_url":"https://api.github.com/repos/Yoast/YoastSEO.js/commits{/sha}","git_commits_url":"https://api.github.com/repos/Yoast/YoastSEO.js/git/commits{/sha}","comments_url":"https://api.github.com/repos/Yoast/YoastSEO.js/comments{/number}","issue_comment_url":"https://api.github.com/repos/Yoast/YoastSEO.js/issues/comments{/number}","contents_url":"https://api.github.com/repos/Yoast/YoastSEO.js/contents/{+path}","compare_url":"https://api.github.com/repos/Yoast/YoastSEO.js/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Yoast/YoastSEO.js/merges","archive_url":"https://api.github.com/repos/Yoast/YoastSEO.js/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Yoast/YoastSEO.js/downloads","issues_url":"https://api.github.com/repos/Yoast/YoastSEO.js/issues{/number}","pulls_url":"https://api.github.com/repos/Yoast/YoastSEO.js/pulls{/number}","milestones_url":"https://api.github.com/repos/Yoast/YoastSEO.js/milestones{/number}","notifications_url":"https://api.github.com/repos/Yoast/YoastSEO.js/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Yoast/YoastSEO.js/labels{/name}","releases_url":"https://api.github.com/repos/Yoast/YoastSEO.js/releases{/id}","deployments_url":"https://api.github.com/repos/Yoast/YoastSEO.js/deployments","created_at":"2015-03-23T13:50:16Z","updated_at":"2016-11-22T17:49:35Z","pushed_at":"2016-11-24T14:16:00Z","git_url":"git://github.com/Yoast/YoastSEO.js.git","ssh_url":"git@github.com:Yoast/YoastSEO.js.git","clone_url":"https://github.com/Yoast/YoastSEO.js.git","svn_url":"https://github.com/Yoast/YoastSEO.js","homepage":"","size":5971,"stargazers_count":83,"watchers_count":83,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":19,"mirror_url":null,"open_issues_count":135,"forks":19,"open_issues":135,"watchers":83,"default_branch":"develop"}},"_links":{"self":{"href":"https://api.github.com/repos/Yoast/YoastSEO.js/pulls/954"},"html":{"href":"https://github.com/Yoast/YoastSEO.js/pull/954"},"issue":{"href":"https://api.github.com/repos/Yoast/YoastSEO.js/issues/954"},"comments":{"href":"https://api.github.com/repos/Yoast/YoastSEO.js/issues/954/comments"},"review_comments":{"href":"https://api.github.com/repos/Yoast/YoastSEO.js/pulls/954/comments"},"review_comment":{"href":"https://api.github.com/repos/Yoast/YoastSEO.js/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/Yoast/YoastSEO.js/pulls/954/commits"},"statuses":{"href":"https://api.github.com/repos/Yoast/YoastSEO.js/statuses/5a5d0039d970421401f210e4fb869ab3678e957b"}}}}
{"actor":{"display_login":"afercia"}}