{"action":"opened","number":6449,"pull_request":{"url":"https://api.github.com/repos/ReactTraining/react-router/pulls/6449","id":227811467,"node_id":"MDExOlB1bGxSZXF1ZXN0MjI3ODExNDY3","html_url":"https://github.com/ReactTraining/react-router/pull/6449","diff_url":"https://github.com/ReactTraining/react-router/pull/6449.diff","patch_url":"https://github.com/ReactTraining/react-router/pull/6449.patch","issue_url":"https://api.github.com/repos/ReactTraining/react-router/issues/6449","number":6449,"state":"open","locked":false,"title":"Add <Focus> component to react-router-dom","user":{"login":"pshrmn","id":1127037,"node_id":"MDQ6VXNlcjExMjcwMzc=","avatar_url":"https://avatars0.githubusercontent.com/u/1127037?v=4","gravatar_id":"","url":"https://api.github.com/users/pshrmn","html_url":"https://github.com/pshrmn","followers_url":"https://api.github.com/users/pshrmn/followers","following_url":"https://api.github.com/users/pshrmn/following{/other_user}","gists_url":"https://api.github.com/users/pshrmn/gists{/gist_id}","starred_url":"https://api.github.com/users/pshrmn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pshrmn/subscriptions","organizations_url":"https://api.github.com/users/pshrmn/orgs","repos_url":"https://api.github.com/users/pshrmn/repos","events_url":"https://api.github.com/users/pshrmn/events{/privacy}","received_events_url":"https://api.github.com/users/pshrmn/received_events","type":"User","site_admin":false},"body":"This PR should make it easier to make `react-router-dom` apps more accessible. This is pretty much a copy of the same component that I use for [Curi](https://curi.js.org/packages/@curi/react-dom/#Focus) and I think that this approach works well.\r\n\r\n`Focus` uses a render-invoked prop to assign a ref to the component that should be focused when the location changes\r\n\r\n```jsx\r\nimport { Focus } from \"react-router-dom\";\r\n\r\n<BrowserRouter>\r\n  <Focus>\r\n    {ref => (\r\n      <main tabIndex={-1} ref={ref}>\r\n        <Switch>...</Switch>\r\n      </main>\r\n    )}\r\n  </Focus>\r\n</BrowserRouter>\r\n\r\n// or even pass the ref to route components (using React.forwardRef()/innerRef)\r\n\r\n<BrowserRouter>\r\n  <Focus>\r\n    {ref => (\r\n      <Switch>\r\n        <Route\r\n          exact\r\n          path=\"/\"\r\n          render={match => <Home ref={ref} {...match} />}\r\n        />\r\n        <Route\r\n          exact\r\n          path=\"/about\"\r\n          render={match => <About ref={ref} {...match} />}\r\n          />\r\n      </Switch>\r\n    )}\r\n  </Focus>\r\n</BrowserRouter>\r\n```\r\n\r\nThe `ref` component is only re-focused when the `location` changes, so non-location change re-renders will not trigger this. ","created_at":"2018-11-02T02:08:01Z","updated_at":"2018-11-02T02:08:01Z","closed_at":null,"merged_at":null,"merge_commit_sha":null,"assignee":null,"assignees":[],"requested_reviewers":[],"requested_teams":[],"labels":[],"milestone":null,"commits_url":"https://api.github.com/repos/ReactTraining/react-router/pulls/6449/commits","review_comments_url":"https://api.github.com/repos/ReactTraining/react-router/pulls/6449/comments","review_comment_url":"https://api.github.com/repos/ReactTraining/react-router/pulls/comments{/number}","comments_url":"https://api.github.com/repos/ReactTraining/react-router/issues/6449/comments","statuses_url":"https://api.github.com/repos/ReactTraining/react-router/statuses/7b03561c2cc4ca3b67ad4b24ae92062efc4cc458","head":{"label":"ReactTraining:focus","ref":"focus","sha":"7b03561c2cc4ca3b67ad4b24ae92062efc4cc458","user":{"login":"ReactTraining","id":11823761,"node_id":"MDEyOk9yZ2FuaXphdGlvbjExODIzNzYx","avatar_url":"https://avatars1.githubusercontent.com/u/11823761?v=4","gravatar_id":"","url":"https://api.github.com/users/ReactTraining","html_url":"https://github.com/ReactTraining","followers_url":"https://api.github.com/users/ReactTraining/followers","following_url":"https://api.github.com/users/ReactTraining/following{/other_user}","gists_url":"https://api.github.com/users/ReactTraining/gists{/gist_id}","starred_url":"https://api.github.com/users/ReactTraining/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ReactTraining/subscriptions","organizations_url":"https://api.github.com/users/ReactTraining/orgs","repos_url":"https://api.github.com/users/ReactTraining/repos","events_url":"https://api.github.com/users/ReactTraining/events{/privacy}","received_events_url":"https://api.github.com/users/ReactTraining/received_events","type":"Organization","site_admin":false},"repo":{"id":19872456,"node_id":"MDEwOlJlcG9zaXRvcnkxOTg3MjQ1Ng==","name":"react-router","full_name":"ReactTraining/react-router","private":false,"owner":{"login":"ReactTraining","id":11823761,"node_id":"MDEyOk9yZ2FuaXphdGlvbjExODIzNzYx","avatar_url":"https://avatars1.githubusercontent.com/u/11823761?v=4","gravatar_id":"","url":"https://api.github.com/users/ReactTraining","html_url":"https://github.com/ReactTraining","followers_url":"https://api.github.com/users/ReactTraining/followers","following_url":"https://api.github.com/users/ReactTraining/following{/other_user}","gists_url":"https://api.github.com/users/ReactTraining/gists{/gist_id}","starred_url":"https://api.github.com/users/ReactTraining/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ReactTraining/subscriptions","organizations_url":"https://api.github.com/users/ReactTraining/orgs","repos_url":"https://api.github.com/users/ReactTraining/repos","events_url":"https://api.github.com/users/ReactTraining/events{/privacy}","received_events_url":"https://api.github.com/users/ReactTraining/received_events","type":"Organization","site_admin":false},"html_url":"https://github.com/ReactTraining/react-router","description":"Declarative routing for React","fork":false,"url":"https://api.github.com/repos/ReactTraining/react-router","forks_url":"https://api.github.com/repos/ReactTraining/react-router/forks","keys_url":"https://api.github.com/repos/ReactTraining/react-router/keys{/key_id}","collaborators_url":"https://api.github.com/repos/ReactTraining/react-router/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/ReactTraining/react-router/teams","hooks_url":"https://api.github.com/repos/ReactTraining/react-router/hooks","issue_events_url":"https://api.github.com/repos/ReactTraining/react-router/issues/events{/number}","events_url":"https://api.github.com/repos/ReactTraining/react-router/events","assignees_url":"https://api.github.com/repos/ReactTraining/react-router/assignees{/user}","branches_url":"https://api.github.com/repos/ReactTraining/react-router/branches{/branch}","tags_url":"https://api.github.com/repos/ReactTraining/react-router/tags","blobs_url":"https://api.github.com/repos/ReactTraining/react-router/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/ReactTraining/react-router/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/ReactTraining/react-router/git/refs{/sha}","trees_url":"https://api.github.com/repos/ReactTraining/react-router/git/trees{/sha}","statuses_url":"https://api.github.com/repos/ReactTraining/react-router/statuses/{sha}","languages_url":"https://api.github.com/repos/ReactTraining/react-router/languages","stargazers_url":"https://api.github.com/repos/ReactTraining/react-router/stargazers","contributors_url":"https://api.github.com/repos/ReactTraining/react-router/contributors","subscribers_url":"https://api.github.com/repos/ReactTraining/react-router/subscribers","subscription_url":"https://api.github.com/repos/ReactTraining/react-router/subscription","commits_url":"https://api.github.com/repos/ReactTraining/react-router/commits{/sha}","git_commits_url":"https://api.github.com/repos/ReactTraining/react-router/git/commits{/sha}","comments_url":"https://api.github.com/repos/ReactTraining/react-router/comments{/number}","issue_comment_url":"https://api.github.com/repos/ReactTraining/react-router/issues/comments{/number}","contents_url":"https://api.github.com/repos/ReactTraining/react-router/contents/{+path}","compare_url":"https://api.github.com/repos/ReactTraining/react-router/compare/{base}...{head}","merges_url":"https://api.github.com/repos/ReactTraining/react-router/merges","archive_url":"https://api.github.com/repos/ReactTraining/react-router/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/ReactTraining/react-router/downloads","issues_url":"https://api.github.com/repos/ReactTraining/react-router/issues{/number}","pulls_url":"https://api.github.com/repos/ReactTraining/react-router/pulls{/number}","milestones_url":"https://api.github.com/repos/ReactTraining/react-router/milestones{/number}","notifications_url":"https://api.github.com/repos/ReactTraining/react-router/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/ReactTraining/react-router/labels{/name}","releases_url":"https://api.github.com/repos/ReactTraining/react-router/releases{/id}","deployments_url":"https://api.github.com/repos/ReactTraining/react-router/deployments","created_at":"2014-05-16T22:22:51Z","updated_at":"2018-11-02T01:48:27Z","pushed_at":"2018-11-02T01:42:16Z","git_url":"git://github.com/ReactTraining/react-router.git","ssh_url":"git@github.com:ReactTraining/react-router.git","clone_url":"https://github.com/ReactTraining/react-router.git","svn_url":"https://github.com/ReactTraining/react-router","homepage":"https://reacttraining.com/react-router/","size":12252,"stargazers_count":33267,"watchers_count":33267,"language":"JavaScript","has_issues":true,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":6988,"mirror_url":null,"archived":false,"open_issues_count":51,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit","node_id":"MDc6TGljZW5zZTEz"},"forks":6988,"open_issues":51,"watchers":33267,"default_branch":"master"}},"base":{"label":"ReactTraining:master","ref":"master","sha":"5ccb241cd59eae7a15de31c7babff6619378be39","user":{"login":"ReactTraining","id":11823761,"node_id":"MDEyOk9yZ2FuaXphdGlvbjExODIzNzYx","avatar_url":"https://avatars1.githubusercontent.com/u/11823761?v=4","gravatar_id":"","url":"https://api.github.com/users/ReactTraining","html_url":"https://github.com/ReactTraining","followers_url":"https://api.github.com/users/ReactTraining/followers","following_url":"https://api.github.com/users/ReactTraining/following{/other_user}","gists_url":"https://api.github.com/users/ReactTraining/gists{/gist_id}","starred_url":"https://api.github.com/users/ReactTraining/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ReactTraining/subscriptions","organizations_url":"https://api.github.com/users/ReactTraining/orgs","repos_url":"https://api.github.com/users/ReactTraining/repos","events_url":"https://api.github.com/users/ReactTraining/events{/privacy}","received_events_url":"https://api.github.com/users/ReactTraining/received_events","type":"Organization","site_admin":false},"repo":{"id":19872456,"node_id":"MDEwOlJlcG9zaXRvcnkxOTg3MjQ1Ng==","name":"react-router","full_name":"ReactTraining/react-router","private":false,"owner":{"login":"ReactTraining","id":11823761,"node_id":"MDEyOk9yZ2FuaXphdGlvbjExODIzNzYx","avatar_url":"https://avatars1.githubusercontent.com/u/11823761?v=4","gravatar_id":"","url":"https://api.github.com/users/ReactTraining","html_url":"https://github.com/ReactTraining","followers_url":"https://api.github.com/users/ReactTraining/followers","following_url":"https://api.github.com/users/ReactTraining/following{/other_user}","gists_url":"https://api.github.com/users/ReactTraining/gists{/gist_id}","starred_url":"https://api.github.com/users/ReactTraining/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ReactTraining/subscriptions","organizations_url":"https://api.github.com/users/ReactTraining/orgs","repos_url":"https://api.github.com/users/ReactTraining/repos","events_url":"https://api.github.com/users/ReactTraining/events{/privacy}","received_events_url":"https://api.github.com/users/ReactTraining/received_events","type":"Organization","site_admin":false},"html_url":"https://github.com/ReactTraining/react-router","description":"Declarative routing for React","fork":false,"url":"https://api.github.com/repos/ReactTraining/react-router","forks_url":"https://api.github.com/repos/ReactTraining/react-router/forks","keys_url":"https://api.github.com/repos/ReactTraining/react-router/keys{/key_id}","collaborators_url":"https://api.github.com/repos/ReactTraining/react-router/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/ReactTraining/react-router/teams","hooks_url":"https://api.github.com/repos/ReactTraining/react-router/hooks","issue_events_url":"https://api.github.com/repos/ReactTraining/react-router/issues/events{/number}","events_url":"https://api.github.com/repos/ReactTraining/react-router/events","assignees_url":"https://api.github.com/repos/ReactTraining/react-router/assignees{/user}","branches_url":"https://api.github.com/repos/ReactTraining/react-router/branches{/branch}","tags_url":"https://api.github.com/repos/ReactTraining/react-router/tags","blobs_url":"https://api.github.com/repos/ReactTraining/react-router/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/ReactTraining/react-router/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/ReactTraining/react-router/git/refs{/sha}","trees_url":"https://api.github.com/repos/ReactTraining/react-router/git/trees{/sha}","statuses_url":"https://api.github.com/repos/ReactTraining/react-router/statuses/{sha}","languages_url":"https://api.github.com/repos/ReactTraining/react-router/languages","stargazers_url":"https://api.github.com/repos/ReactTraining/react-router/stargazers","contributors_url":"https://api.github.com/repos/ReactTraining/react-router/contributors","subscribers_url":"https://api.github.com/repos/ReactTraining/react-router/subscribers","subscription_url":"https://api.github.com/repos/ReactTraining/react-router/subscription","commits_url":"https://api.github.com/repos/ReactTraining/react-router/commits{/sha}","git_commits_url":"https://api.github.com/repos/ReactTraining/react-router/git/commits{/sha}","comments_url":"https://api.github.com/repos/ReactTraining/react-router/comments{/number}","issue_comment_url":"https://api.github.com/repos/ReactTraining/react-router/issues/comments{/number}","contents_url":"https://api.github.com/repos/ReactTraining/react-router/contents/{+path}","compare_url":"https://api.github.com/repos/ReactTraining/react-router/compare/{base}...{head}","merges_url":"https://api.github.com/repos/ReactTraining/react-router/merges","archive_url":"https://api.github.com/repos/ReactTraining/react-router/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/ReactTraining/react-router/downloads","issues_url":"https://api.github.com/repos/ReactTraining/react-router/issues{/number}","pulls_url":"https://api.github.com/repos/ReactTraining/react-router/pulls{/number}","milestones_url":"https://api.github.com/repos/ReactTraining/react-router/milestones{/number}","notifications_url":"https://api.github.com/repos/ReactTraining/react-router/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/ReactTraining/react-router/labels{/name}","releases_url":"https://api.github.com/repos/ReactTraining/react-router/releases{/id}","deployments_url":"https://api.github.com/repos/ReactTraining/react-router/deployments","created_at":"2014-05-16T22:22:51Z","updated_at":"2018-11-02T01:48:27Z","pushed_at":"2018-11-02T01:42:16Z","git_url":"git://github.com/ReactTraining/react-router.git","ssh_url":"git@github.com:ReactTraining/react-router.git","clone_url":"https://github.com/ReactTraining/react-router.git","svn_url":"https://github.com/ReactTraining/react-router","homepage":"https://reacttraining.com/react-router/","size":12252,"stargazers_count":33267,"watchers_count":33267,"language":"JavaScript","has_issues":true,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":6988,"mirror_url":null,"archived":false,"open_issues_count":51,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit","node_id":"MDc6TGljZW5zZTEz"},"forks":6988,"open_issues":51,"watchers":33267,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/ReactTraining/react-router/pulls/6449"},"html":{"href":"https://github.com/ReactTraining/react-router/pull/6449"},"issue":{"href":"https://api.github.com/repos/ReactTraining/react-router/issues/6449"},"comments":{"href":"https://api.github.com/repos/ReactTraining/react-router/issues/6449/comments"},"review_comments":{"href":"https://api.github.com/repos/ReactTraining/react-router/pulls/6449/comments"},"review_comment":{"href":"https://api.github.com/repos/ReactTraining/react-router/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/ReactTraining/react-router/pulls/6449/commits"},"statuses":{"href":"https://api.github.com/repos/ReactTraining/react-router/statuses/7b03561c2cc4ca3b67ad4b24ae92062efc4cc458"}},"author_association":"COLLABORATOR","merged":false,"mergeable":null,"rebaseable":null,"mergeable_state":"unknown","merged_by":null,"comments":0,"review_comments":0,"maintainer_can_modify":false,"commits":1,"additions":510,"deletions":11,"changed_files":4}}
{"actor":{"display_login":"pshrmn"}}