{"action":"created","issue":{"url":"https://api.github.com/repos/mattermost/mattermost-server/issues/8034","repository_url":"https://api.github.com/repos/mattermost/mattermost-server","labels_url":"https://api.github.com/repos/mattermost/mattermost-server/issues/8034/labels{/name}","comments_url":"https://api.github.com/repos/mattermost/mattermost-server/issues/8034/comments","events_url":"https://api.github.com/repos/mattermost/mattermost-server/issues/8034/events","html_url":"https://github.com/mattermost/mattermost-server/issues/8034","id":286061832,"number":8034,"title":"[Help Wanted] [PLT-7685] 508 Compliance: Improve how UI elements in the message view indicate focus","user":{"login":"esethna","id":14333569,"avatar_url":"https://avatars3.githubusercontent.com/u/14333569?v=4","gravatar_id":"","url":"https://api.github.com/users/esethna","html_url":"https://github.com/esethna","followers_url":"https://api.github.com/users/esethna/followers","following_url":"https://api.github.com/users/esethna/following{/other_user}","gists_url":"https://api.github.com/users/esethna/gists{/gist_id}","starred_url":"https://api.github.com/users/esethna/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/esethna/subscriptions","organizations_url":"https://api.github.com/users/esethna/orgs","repos_url":"https://api.github.com/users/esethna/repos","events_url":"https://api.github.com/users/esethna/events{/privacy}","received_events_url":"https://api.github.com/users/esethna/received_events","type":"User","site_admin":false},"labels":[{"id":472666699,"url":"https://api.github.com/repos/mattermost/mattermost-server/labels/Difficulty:%20Intermediate","name":"Difficulty: Intermediate","color":"bfdadc","default":false},{"id":486848671,"url":"https://api.github.com/repos/mattermost/mattermost-server/labels/ReactJS","name":"ReactJS","color":"1d76db","default":false},{"id":667027853,"url":"https://api.github.com/repos/mattermost/mattermost-server/labels/Up%20For%20Grabs","name":"Up For Grabs","color":"8B4500","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2018-01-04T17:43:03Z","updated_at":"2018-03-09T13:32:40Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"If you're interested please comment here and come [join our \"Contributors\" community channel](https://pre-release.mattermost.com/core/channels/tickets) on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please  [join our \"Developers\" community channel](https://pre-release.mattermost.com/core/channels/developers).\r\n\r\nNew contributors please see our [Developer's Guide](https://docs.mattermost.com/guides/developer.html), specifically for [machine setup](https://docs.mattermost.com/developer/developer-setup.html) and for [developer workflow](https://docs.mattermost.com/developer/developer-flow.html).\r\n\r\n----\r\n\r\n**Notes**: [Jira ticket](https://mattermost.atlassian.net/browse/PLT-7685)\r\n\r\nFor 508 compliance, each interactive element should have visible focus when the user tabs to the element using the keyboard. Some interactive elements on the page have visible focus using a dotted outline, change in color, or in the case of the + signs on the page getting brighter.  \r\n\r\nCurrently, the user is not able to determine where they are while tabbing because of frequent loss of a visible indicator of current focus.\r\n\r\nProposed changes for the expected tab order (follows Slack):\r\n1. Assume message box is in focus\r\n2. File upload paperclip icon (current: not tabbed + no visual cue when in focus)\r\n3. Emoji picker icon (current: not tabbed + no visual cue when in focus)\r\n4. \"Preview\" below message box (current: not tabbed + not underlined when in focus)\r\n5. \"Help\" below message box (current: gets tabbed + visual cue)\r\n6. Team icons and + sign in the team sidebar (current: gets tabbed + visual cue)\r\n7. Profile status indicator in channel sidebar (current: not tabbed)\r\n7. Main menu in channel sidebar (current:  gets tabbed + visual cue)\r\n8. Channel sidebar from top to bottom, including \"+\" signs, channel names, \"x\" button on DMs, \"More..\" and channel switcher button. (current: get tabbed but no visual cue)\r\n9. Channel header from left to right, including star, \"v\" next to channel name, channel description, channel member list, pin icon, search bar, at-mention icon, flag icon (current: most don't get tabbed nor have a visual cue)\r\n10. \"Set a header\" in channel intro, if shown on the UI (current:  gets tabbed + visual cue)\r\n11. For each message, tabs through profile picture, username, timestamp, flag icon, [...] menu, emoji icon, reply arrow, links in post, emoji reactions (current: only timestamp and links gets tabbed)\r\n12. Right-hand sidebar, from top to bottom, including expand arrow, close sidebar icon, username, timestamp, [...], emoji, links, and reactions of messages, comment box, file upload icon, emoji picker icon, \"Preview\" link, \"Help\" link, \"Add Comment\" box (current: not tabbed)\r\n13. URL bar if on browser\r\n14. Back to center pane message box.\r\n\r\nNOTE: Here's a branch that started the work on this issue: https://github.com/santos22/mattermost-webapp/commit/88b2d1e4ae6bbc6f764c1f1f6b0313888e63ef51\r\n\r\nYou can consider using https://github.com/WICG/focus-ring to focus on each of the elements when tabbing."},"comment":{"url":"https://api.github.com/repos/mattermost/mattermost-server/issues/comments/371812743","html_url":"https://github.com/mattermost/mattermost-server/issues/8034#issuecomment-371812743","issue_url":"https://api.github.com/repos/mattermost/mattermost-server/issues/8034","id":371812743,"user":{"login":"jasonblais","id":13119842,"avatar_url":"https://avatars1.githubusercontent.com/u/13119842?v=4","gravatar_id":"","url":"https://api.github.com/users/jasonblais","html_url":"https://github.com/jasonblais","followers_url":"https://api.github.com/users/jasonblais/followers","following_url":"https://api.github.com/users/jasonblais/following{/other_user}","gists_url":"https://api.github.com/users/jasonblais/gists{/gist_id}","starred_url":"https://api.github.com/users/jasonblais/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jasonblais/subscriptions","organizations_url":"https://api.github.com/users/jasonblais/orgs","repos_url":"https://api.github.com/users/jasonblais/repos","events_url":"https://api.github.com/users/jasonblais/events{/privacy}","received_events_url":"https://api.github.com/users/jasonblais/received_events","type":"User","site_admin":false},"created_at":"2018-03-09T13:32:40Z","updated_at":"2018-03-09T13:32:40Z","author_association":"CONTRIBUTOR","body":"Thanks @santos22 for the heads up! I've included your commit in the issue description, really appreciate your help getting started on this issue 👍 "}}
{"actor":{"display_login":"jasonblais"}}