{"action":"created","issue":{"url":"https://api.github.com/repos/tootsuite/mastodon/issues/1863","repository_url":"https://api.github.com/repos/tootsuite/mastodon","labels_url":"https://api.github.com/repos/tootsuite/mastodon/issues/1863/labels{/name}","comments_url":"https://api.github.com/repos/tootsuite/mastodon/issues/1863/comments","events_url":"https://api.github.com/repos/tootsuite/mastodon/issues/1863/events","html_url":"https://github.com/tootsuite/mastodon/issues/1863","id":221964223,"number":1863,"title":"\"Show more\" control link should be a button","user":{"login":"LJWatson","id":3501033,"avatar_url":"https://avatars1.githubusercontent.com/u/3501033?v=3","gravatar_id":"","url":"https://api.github.com/users/LJWatson","html_url":"https://github.com/LJWatson","followers_url":"https://api.github.com/users/LJWatson/followers","following_url":"https://api.github.com/users/LJWatson/following{/other_user}","gists_url":"https://api.github.com/users/LJWatson/gists{/gist_id}","starred_url":"https://api.github.com/users/LJWatson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/LJWatson/subscriptions","organizations_url":"https://api.github.com/users/LJWatson/orgs","repos_url":"https://api.github.com/users/LJWatson/repos","events_url":"https://api.github.com/users/LJWatson/events{/privacy}","received_events_url":"https://api.github.com/users/LJWatson/received_events","type":"User","site_admin":false},"labels":[{"id":330102526,"url":"https://api.github.com/repos/tootsuite/mastodon/labels/enhancement","name":"enhancement","color":"84b6eb","default":true},{"id":580181377,"url":"https://api.github.com/repos/tootsuite/mastodon/labels/priority%20-%20medium","name":"priority - medium","color":"006b75","default":false},{"id":531166116,"url":"https://api.github.com/repos/tootsuite/mastodon/labels/ui","name":"ui","color":"5319e7","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2017-04-15T18:19:36Z","updated_at":"2017-06-29T22:49:27Z","closed_at":"2017-06-29T22:49:27Z","body":"The control to \"Show more\" content inside a toot looks like a button, but it's based on a link.\r\n```\r\n<a class=\"status__content__spoiler-link\" target=\"_blank\" rel=\"noopener\"><span>Show more</span></a>\r\n```\r\n\r\nThis creates a mismatch between what the control is, what it does, and the expected user interaction.\r\n\r\nA keyboard user expects to use the space or enter keys to activate a button. Only the enter key can be used to activate a link, so attempting to activate the \"Show more\" button with the space key fails.\r\n\r\nScreen readers report the \"Show more\" button as a \"link\". This sets up the expectation that activating it will fetch another resource. Typically, links fetch resources like documents or other pages, whilst buttons invoke actions like submit forms or disclose content.\r\n\r\nThere is also no information available to screen readers about the collapse/hide state of the control. The button text provides a clue, but because a link usually fetches another page, it doesn't quite do a good enough job.\r\n\r\nThere are several ways to solve this, but the one that involves the least amount of work is to use the ```<button>``` element with the `aria-describedby` attribute to communicate the state of the control.\r\n```\r\n<button aria-expanded=\"false\" class=\"status__content__spoiler-link\" rel=\"noopener\"><span>Show more</span></button>\r\n```\r\n\r\nThe browser will automatically provide the keyboard interaction based on the click event attached to the button. \r\n\r\nThe `aria-expanded` attribute is set to `false` initially to indicate the control is collapsed. When someone activates the button it should be toggled to `true`, and back to `false` when the content is hidden again."},"comment":{"url":"https://api.github.com/repos/tootsuite/mastodon/issues/comments/312129184","html_url":"https://github.com/tootsuite/mastodon/issues/1863#issuecomment-312129184","issue_url":"https://api.github.com/repos/tootsuite/mastodon/issues/1863","id":312129184,"user":{"login":"Gargron","id":184731,"avatar_url":"https://avatars0.githubusercontent.com/u/184731?v=3","gravatar_id":"","url":"https://api.github.com/users/Gargron","html_url":"https://github.com/Gargron","followers_url":"https://api.github.com/users/Gargron/followers","following_url":"https://api.github.com/users/Gargron/following{/other_user}","gists_url":"https://api.github.com/users/Gargron/gists{/gist_id}","starred_url":"https://api.github.com/users/Gargron/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Gargron/subscriptions","organizations_url":"https://api.github.com/users/Gargron/orgs","repos_url":"https://api.github.com/users/Gargron/repos","events_url":"https://api.github.com/users/Gargron/events{/privacy}","received_events_url":"https://api.github.com/users/Gargron/received_events","type":"User","site_admin":false},"created_at":"2017-06-29T22:49:27Z","updated_at":"2017-06-29T22:49:27Z","body":"It is a button now!"}}
{"actor":{"display_login":"Gargron"}}