{"action":"created","issue":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/7051","repository_url":"https://api.github.com/repos/WordPress/gutenberg","labels_url":"https://api.github.com/repos/WordPress/gutenberg/issues/7051/labels{/name}","comments_url":"https://api.github.com/repos/WordPress/gutenberg/issues/7051/comments","events_url":"https://api.github.com/repos/WordPress/gutenberg/issues/7051/events","html_url":"https://github.com/WordPress/gutenberg/issues/7051","id":328101984,"node_id":"MDU6SXNzdWUzMjgxMDE5ODQ=","number":7051,"title":"Indent list keyboard shortcuts inconsistencies","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":531680825,"node_id":"MDU6TGFiZWw1MzE2ODA4MjU=","url":"https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement","name":"[Type] Enhancement","color":"c5def5","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/WordPress/gutenberg/milestones/37","html_url":"https://github.com/WordPress/gutenberg/milestone/37","labels_url":"https://api.github.com/repos/WordPress/gutenberg/milestones/37/labels","id":3153486,"node_id":"MDk6TWlsZXN0b25lMzE1MzQ4Ng==","number":37,"title":"WordPress 5.0","description":"Items to work on for a 5.0 initial release but which don't have to be part of merge proposal.","creator":{"login":"karmatosed","id":253067,"node_id":"MDQ6VXNlcjI1MzA2Nw==","avatar_url":"https://avatars3.githubusercontent.com/u/253067?v=4","gravatar_id":"","url":"https://api.github.com/users/karmatosed","html_url":"https://github.com/karmatosed","followers_url":"https://api.github.com/users/karmatosed/followers","following_url":"https://api.github.com/users/karmatosed/following{/other_user}","gists_url":"https://api.github.com/users/karmatosed/gists{/gist_id}","starred_url":"https://api.github.com/users/karmatosed/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/karmatosed/subscriptions","organizations_url":"https://api.github.com/users/karmatosed/orgs","repos_url":"https://api.github.com/users/karmatosed/repos","events_url":"https://api.github.com/users/karmatosed/events{/privacy}","received_events_url":"https://api.github.com/users/karmatosed/received_events","type":"User","site_admin":false},"open_issues":88,"closed_issues":77,"state":"open","created_at":"2018-03-01T12:59:53Z","updated_at":"2018-09-04T13:49:26Z","due_on":null,"closed_at":null},"comments":1,"created_at":"2018-05-31T11:32:23Z","updated_at":"2018-09-04T17:07:47Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"Follow up to #4181 \r\n\r\nFor accessibility reasons, the Tab key in Gutenberg should keep its native behavior which is navigating through focusable elements. This is the reason why https://github.com/WordPress/gutenberg/pull/1826 introduced new shortcuts to increase/decrease the list items indentation in the List block.\r\n\r\nAs mentioned in https://github.com/WordPress/gutenberg/issues/4181#issuecomment-354091113 the Classic Editor and Gutenberg need a different behavior, for a simple reason: in the Classic Editor, there's just _one_ editable area. Users can always press Enter or \"exit\" the list by other means and have the Tab key back to its default behavior.\r\n\r\nInstead, in Gutenberg there are multiple editable areas (the blocks) and the Tab key needs to preserve its native behavior to allow navigation through the UI avoiding a \"keyboard trap\".\r\n\r\nHowever, there are a few issues.\r\n\r\nThe new shortcuts work this way: https://github.com/WordPress/gutenberg/blob/02c9edbb7ada8407279d3e3bcddeef2b216bbb1d/core-blocks/list/index.js#L205\r\n\r\n`meta+[` for list outdent\r\n`meta+]` for list indent\r\n\r\nWhere meta means control on windows/linux and command on mac. For keyboard layouts without squared brackets `meta+m` is used for indent and `meta+shift+m` is used for outdent.\r\n\r\nThe first issue is that on macOS (not sure on linux) `meta+[` and `meta+]` conflict with the native shortcuts browsers use to navigate to the previous / next page. I'd tend to think Gutenberg shouldn't break native shortcuts, especially very important ones. Maybe an additional modifier should be used.\r\n\r\nThe second issue is that while the List block uses the new `meta+[` / `meta+]` shortcuts, the Classic block (TinyMCE) doesn't and still uses the Tab key. This is inconsistent and confusing for users.\r\n\r\nThe third issue is that none of these shortcuts are visually exposed in the UI. #6605 added some shortcuts to some tooltips in the toolbars:\r\n\r\n<img width=\"368\" alt=\"screen shot 2018-05-31 at 12 47 13\" src=\"https://user-images.githubusercontent.com/1682452/40778254-dcdd05da-64d0-11e8-9f60-93ff1bca32e8.png\">\r\n\r\nHowever, the ones related to indentation are not displayed (see also #6195 ):\r\n\r\n<img width=\"703\" alt=\"screen shot 2018-05-31 at 12 20 06\" src=\"https://user-images.githubusercontent.com/1682452/40778281-f1054ca2-64d0-11e8-953f-704ef1e5ba1d.png\">\r\n\r\nIdeally, also the tooltip text should be consistent.\r\n\r\nAdditionally, in the Custom HTML block the Tab key is used for indentation: that makes a bit more sense since this block is actually a code editor. To Tab away from the block, users need to press Escape first, not ideal but that's the same trick used in other code editors in core.\r\n\r\nIdeally:\r\n- there shouldn't be keyboard traps\r\n- consistency is important though, and shortcuts for indentation should be consistent for all blocks\r\n\r\nI'd like to discuss this issue during next accessibility team meeting. Also WCEU would be a nice opportunity for some live conversations.\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/comments/418445467","html_url":"https://github.com/WordPress/gutenberg/issues/7051#issuecomment-418445467","issue_url":"https://api.github.com/repos/WordPress/gutenberg/issues/7051","id":418445467,"node_id":"MDEyOklzc3VlQ29tbWVudDQxODQ0NTQ2Nw==","user":{"login":"skorasaurus","id":955351,"node_id":"MDQ6VXNlcjk1NTM1MQ==","avatar_url":"https://avatars0.githubusercontent.com/u/955351?v=4","gravatar_id":"","url":"https://api.github.com/users/skorasaurus","html_url":"https://github.com/skorasaurus","followers_url":"https://api.github.com/users/skorasaurus/followers","following_url":"https://api.github.com/users/skorasaurus/following{/other_user}","gists_url":"https://api.github.com/users/skorasaurus/gists{/gist_id}","starred_url":"https://api.github.com/users/skorasaurus/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/skorasaurus/subscriptions","organizations_url":"https://api.github.com/users/skorasaurus/orgs","repos_url":"https://api.github.com/users/skorasaurus/repos","events_url":"https://api.github.com/users/skorasaurus/events{/privacy}","received_events_url":"https://api.github.com/users/skorasaurus/received_events","type":"User","site_admin":false},"created_at":"2018-09-04T17:07:47Z","updated_at":"2018-09-04T17:07:47Z","author_association":"CONTRIBUTOR","body":"Some feedback from a user with 2 ubuntu computers (and 2 keyboards) both with: \r\nubuntu 16.04\r\nFirefox 61\r\nGutenberg 3.7.0\r\n\r\nOne of them (Keyboard X) has a 104 Key QWERTY keyboard, has both square brackets and meta key, default layout for ubuntu. \r\n\r\nThe other (Keyboard Y) is a thinkpad T450; I don't think it has a meta key on it. \r\n\r\nKeyboard 'X'\r\nWhile in a list block in Gutenberg:\r\n pressing the Meta Key displays the menu that also displays when a user also right-click their mouse; meta+m does not have any effect. meta+[ does not have any effect. \r\nmeta+] does not have any effect. \r\nThrough trial and error, I figured out that Control + ]  and Control + [  indents and outdents list items for me. \r\n\r\nWhile not focused in a specific block but still on an page in editor mode, meta + m creates a bookmark. \r\n\r\nIBM has some [suggestions and background](https://www-01.ibm.com/software/globalization/topics/keyboards/). "}}
{"actor":{"display_login":"skorasaurus"}}