{"action":"created","issue":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/6680","repository_url":"https://api.github.com/repos/WordPress/gutenberg","labels_url":"https://api.github.com/repos/WordPress/gutenberg/issues/6680/labels{/name}","comments_url":"https://api.github.com/repos/WordPress/gutenberg/issues/6680/comments","events_url":"https://api.github.com/repos/WordPress/gutenberg/issues/6680/events","html_url":"https://github.com/WordPress/gutenberg/issues/6680","id":321876810,"node_id":"MDU6SXNzdWUzMjE4NzY4MTA=","number":6680,"title":"HTML block: CodeMirror accessibility (and JS TypeErrors)","user":{"login":"afercia","id":1682452,"node_id":"MDQ6VXNlcjE2ODI0NTI=","avatar_url":"https://avatars1.githubusercontent.com/u/1682452?v=4","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},"labels":[{"id":546517042,"node_id":"MDU6TGFiZWw1NDY1MTcwNDI=","url":"https://api.github.com/repos/WordPress/gutenberg/labels/Accessibility","name":"Accessibility","color":"655104","default":false},{"id":816933178,"node_id":"MDU6TGFiZWw4MTY5MzMxNzg=","url":"https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Testing","name":"Needs Testing","color":"67dff7","default":false},{"id":531680823,"node_id":"MDU6TGFiZWw1MzE2ODA4MjM=","url":"https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug","name":"[Type] Bug","color":"d93f0b","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-05-10T10:01:39Z","updated_at":"2018-10-16T21:42:54Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"The CodeMirror implementation for the HTML block should match as much as possible what was done in core for other CodeMirror instances, with regards to accessibility.\r\n\r\nARIA roles, properties and labelling:\r\n\r\nThe CodeMirror contenteditable area needs to be exposed as a role `textbox` with `aria-multiline=\"true\"`, which is equivalent to a textarea element.\r\n\r\nThe contenteditable area needs to be properly labelled.\r\n\r\nSince the Tab key is used to insert a tab character, users need to be informed that to exit the CodeMirror area they have to press the Escape key first.\r\n\r\nFor example, this is what core does for the theme editor, using jQuery. See https://core.trac.wordpress.org/changeset/41586\r\n```\r\n// Improve the editor accessibility.\r\n$( editor.codemirror.display.lineDiv )\r\n\t.attr({\r\n\t\trole: 'textbox',\r\n\t\t'aria-multiline': 'true',\r\n\t\t'aria-labelledby': 'theme-plugin-editor-label',\r\n\t\t'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4'\r\n\t});\r\n```\r\n\r\nThe same attributes should be used in the Gutenberg implementation. These attributes need to be set on the contenteditable area returned by `editor.codemirror.display.lineDiv`. Please note:\r\n- `aria-labelledby` can be replaced with `aria-label` (with a meaningful text)  if there's no visible text to reference \r\n- `aria-describedby` is used to point to the text in the Help tab; in Gutenberg, it should point to another element providing the same description. The element can be visually hidden. Something along these lines:\r\n\r\n```\r\nWhen using a keyboard to navigate:\r\nIn the editing area, the Tab key enters a tab character.\r\nTo move away from this area, press the Esc key followed by the Tab key.\r\nScreen reader users: when in forms mode, you may need to press the Esc key twice.\r\n```\r\n\r\nAfter pressing Escape and tabbing away from the HTML block with Tab or Shift+Tab, I get these errors:\r\n- Uncaught TypeError: settings.onTabPrevious is not a function\r\n- Uncaught TypeError: settings.onTabNext is not a function\r\n\r\nSee `src/wp-admin/js/code-editor.js`"},"comment":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/comments/430411603","html_url":"https://github.com/WordPress/gutenberg/issues/6680#issuecomment-430411603","issue_url":"https://api.github.com/repos/WordPress/gutenberg/issues/6680","id":430411603,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMDQxMTYwMw==","user":{"login":"youknowriad","id":272444,"node_id":"MDQ6VXNlcjI3MjQ0NA==","avatar_url":"https://avatars3.githubusercontent.com/u/272444?v=4","gravatar_id":"","url":"https://api.github.com/users/youknowriad","html_url":"https://github.com/youknowriad","followers_url":"https://api.github.com/users/youknowriad/followers","following_url":"https://api.github.com/users/youknowriad/following{/other_user}","gists_url":"https://api.github.com/users/youknowriad/gists{/gist_id}","starred_url":"https://api.github.com/users/youknowriad/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/youknowriad/subscriptions","organizations_url":"https://api.github.com/users/youknowriad/orgs","repos_url":"https://api.github.com/users/youknowriad/repos","events_url":"https://api.github.com/users/youknowriad/events{/privacy}","received_events_url":"https://api.github.com/users/youknowriad/received_events","type":"User","site_admin":false},"created_at":"2018-10-16T21:42:54Z","updated_at":"2018-10-16T21:42:54Z","author_association":"CONTRIBUTOR","body":"Core Mirror is removed from Gutenberg for now (see #10423) I'd close this issue for now and make sure we check the accessibility guidelines when we bring it back."}}
{"actor":{"display_login":"youknowriad"}}