{"action":"created","issue":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/2323","repository_url":"https://api.github.com/repos/WordPress/gutenberg","labels_url":"https://api.github.com/repos/WordPress/gutenberg/issues/2323/labels{/name}","comments_url":"https://api.github.com/repos/WordPress/gutenberg/issues/2323/comments","events_url":"https://api.github.com/repos/WordPress/gutenberg/issues/2323/events","html_url":"https://github.com/WordPress/gutenberg/pull/2323","id":249187025,"number":2323,"title":"Components: Shift focus into popover when opened","user":{"login":"aduth","id":1779930,"avatar_url":"https://avatars1.githubusercontent.com/u/1779930?v=4","gravatar_id":"","url":"https://api.github.com/users/aduth","html_url":"https://github.com/aduth","followers_url":"https://api.github.com/users/aduth/followers","following_url":"https://api.github.com/users/aduth/following{/other_user}","gists_url":"https://api.github.com/users/aduth/gists{/gist_id}","starred_url":"https://api.github.com/users/aduth/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aduth/subscriptions","organizations_url":"https://api.github.com/users/aduth/orgs","repos_url":"https://api.github.com/users/aduth/repos","events_url":"https://api.github.com/users/aduth/events{/privacy}","received_events_url":"https://api.github.com/users/aduth/received_events","type":"User","site_admin":false},"labels":[{"id":546517042,"url":"https://api.github.com/repos/WordPress/gutenberg/labels/Accessibility","name":"Accessibility","color":"655104","default":false},{"id":659839209,"url":"https://api.github.com/repos/WordPress/gutenberg/labels/UI%20Components","name":"UI Components","color":"fbca04","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-08-09T23:04:04Z","updated_at":"2017-08-10T17:39:49Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/WordPress/gutenberg/pulls/2323","html_url":"https://github.com/WordPress/gutenberg/pull/2323","diff_url":"https://github.com/WordPress/gutenberg/pull/2323.diff","patch_url":"https://github.com/WordPress/gutenberg/pull/2323.patch"},"body":"Partially addresses #2306\r\n\r\nThis pull request seeks to move focus to the first focusable element within a Popover when it becomes opened.\r\n\r\n__Implementation notes:__\r\n\r\nIncluded are some focus utilities for finding the next available focusable element. A few points:\r\n\r\n- Focusable? Tabbable? Need some naming clarification\r\n- Yes, we should probably move this to [`@wordpress/a11y`](https://www.npmjs.com/package/@wordpress/a11y) (easier to iterate here)\r\n- Reinventing the wheel? Probably, but avoids bloat ([ally](https://github.com/medialize/ally.js) is [116kb minified, before gzip](https://wzrd.in/standalone/ally))\r\n\r\n__Testing instructions:__\r\n\r\nVerify that focus is moved to first focusable element when opening Inserter:\r\n\r\n1. Navigate to Gutenberg > New Post\r\n2. Click the Inserter\r\n3. Note focus is shifted to the search field (and that search field behavior is otherwise unaffected, including focus constraint looping)\r\n\r\nVerify that focus is moved to first focusable element when opening Post Visibility:\r\n\r\n1. Navigate to Gutenberg > New Post\r\n2. In the sidebar, click Public\r\n3. Note focus is shifted to the first input option\r\n"},"comment":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/comments/321622373","html_url":"https://github.com/WordPress/gutenberg/pull/2323#issuecomment-321622373","issue_url":"https://api.github.com/repos/WordPress/gutenberg/issues/2323","id":321622373,"user":{"login":"afercia","id":1682452,"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},"created_at":"2017-08-10T17:39:49Z","updated_at":"2017-08-10T17:39:49Z","body":"Great work thanks! There are a few edge cases worth considering though.\r\nProbably, the most reliable (and simple) implementation is the one from jQuery UI, I guess it's been tested extensively on the field over time and I'd propose to follow that.\r\nLooking at their implementation, a few examples:\r\n- links with no href and with a tabindex are focusable\r\n- AREA elements are focusable if they are inside a named map, have an href attribute, and there is a visible image using the map \r\n- also, seems to me they check if the element is visible (also ally.js does)\r\n\r\nThere are also other (very) edge cases for example SVG in IE and scrollable containers in Firefox, not included in jQuery UI but they're included in ally.js see [tabbable](https://github.com/medialize/ally.js/blob/b8fd3cdbb9464df08708f11cba35b7481ad846d4/src/is/tabbable.js) and [focusable](https://github.com/medialize/ally.js/blob/b8fd3cdbb9464df08708f11cba35b7481ad846d4/src/is/focusable.js).\r\n\r\nThis might introduce some more complexity, worth considering if using a library could alleviate development (and maintenance) time.\r\n\r\nQuoting from jQuery UI:\r\n> Note: Elements with a negative tab index are :focusable, but not :tabbable\r\n\r\nSo, about naming, this should probably be \"tabbable\".\r\n\r\nReferences:\r\n\r\nhttps://api.jqueryui.com/focusable-selector/\r\nhttps://github.com/jquery/jquery-ui/blob/74f8a0ac952f6f45f773312292baef1c26d81300/ui/focusable.js\r\n\r\nhttps://api.jqueryui.com/tabbable-selector/\r\nhttps://github.com/jquery/jquery-ui/blob/74f8a0ac952f6f45f773312292baef1c26d81300/ui/tabbable.js\r\n\r\nOne more important consideration: there may be cases where it would be desirable to move focus directly on the popover (or modal) wrapper. Imagine a Popover or modal that contains only text. Where should focus be moved to in that case? The Popover has a wrapper div with `tabindex=0` that can receive focus and could be used for that.\r\n\r\nAbout the Post Visibility, I have a doubt: focus is moved to the first radio button, as expected. But that happens also when it's not the selected radio button:\r\n\r\n![screen shot 2017-08-10 at 18 30 58](https://user-images.githubusercontent.com/1682452/29183031-739bb60e-7e01-11e7-8070-92beaf83583c.png)\r\n\r\nThis is different from the native \"tabbing\" behavior: when tabbing to a set of radio buttons, only the selected one receives focus. The other ones receive focus when using the arrow keys. I think we cam probably live with this, just wanted to mention it as something worth some testing.\r\n"}}
{"actor":{"display_login":"afercia"}}