{"id":13680270,"url":"https://github.com/anubhavsrivastava/react-selffocus-element","last_synced_at":"2025-08-01T11:02:32.164Z","repository":{"id":57344444,"uuid":"155592546","full_name":"anubhavsrivastava/react-selffocus-element","owner":"anubhavsrivastava","description":"A react component to focus on an element for accessibility.","archived":false,"fork":false,"pushed_at":"2022-12-08T04:26:29.000Z","size":371,"stargazers_count":26,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-07T08:56:56.101Z","etag":null,"topics":["a11y","a11y-focus","accessibility","element-focus","focus","react-a11y","react-accessibility","web-accessibility"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anubhavsrivastava.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["anubhavsrivastava"],"patreon":"theanubhav","open_collective":"onlyanubhav","ko_fi":"theanubhav","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://donorbox.org/theanubhav","https://www.buymeacoffee.com/theanubhav","https://paypal.me/onlyanubhav","https://theanubhav.com/sponsor"]}},"created_at":"2018-10-31T16:50:10.000Z","updated_at":"2021-01-11T10:41:11.000Z","dependencies_parsed_at":"2023-01-24T10:15:26.244Z","dependency_job_id":null,"html_url":"https://github.com/anubhavsrivastava/react-selffocus-element","commit_stats":null,"previous_names":["anubhavsrivastava/react-selffocus-a11y"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/anubhavsrivastava/react-selffocus-element","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anubhavsrivastava%2Freact-selffocus-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anubhavsrivastava%2Freact-selffocus-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anubhavsrivastava%2Freact-selffocus-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anubhavsrivastava%2Freact-selffocus-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anubhavsrivastava","download_url":"https://codeload.github.com/anubhavsrivastava/react-selffocus-element/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anubhavsrivastava%2Freact-selffocus-element/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268213651,"owners_count":24214349,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","a11y-focus","accessibility","element-focus","focus","react-a11y","react-accessibility","web-accessibility"],"created_at":"2024-08-02T13:01:15.011Z","updated_at":"2025-08-01T11:02:31.753Z","avatar_url":"https://github.com/anubhavsrivastava.png","language":"JavaScript","funding_links":["https://github.com/sponsors/anubhavsrivastava","https://patreon.com/theanubhav","https://opencollective.com/onlyanubhav","https://ko-fi.com/theanubhav","https://donorbox.org/theanubhav","https://www.buymeacoffee.com/theanubhav","https://paypal.me/onlyanubhav","https://theanubhav.com/sponsor"],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-selffocus-element ![A project badge featuring the A11Y logo and the text \"Built for Accessibility\"](https://img.shields.io/badge/-Built_for_Accessibility-_.svg?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDUxMiI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmxvZ28td2hpdGU8L3RpdGxlPjxwYXRoIGNsYXNzPSJhIiBkPSJNMjYyLjYsMjYyLjc3cTE1LTEuODEsMjEuNzctNC41NywxMi4wOC00Ljc1LDE0LjI3LTE0LjgyLDIuNTctMTIuMjUtNC45NC0xNi45M3QtMjQtNC42NnEtMTguNDgsMC0yOC4xOCw5LjE1LTYuNzcsNi43Ni0xMS4xNiwxOC4yOUgxODAuMDhxNy4zMi0yNi4xNiwyMy43OC00MywyNi4zNS0yNi4zNiw3Ni42Ny0yNi4zNSwzMi43NSwwLDU1LjQ0LDEzdDE1LDQ5TDMzMS4zOSwzMzMuNHEtMiw5LjUxLTQuMzksMjMuMDUtMS42NSwxMC4yNC4wOSwxMy45MWExMy41NCwxMy41NCwwLDAsMCw2LjMxLDZsLTEuNDYsNy42OEgyNzUuMjJhNTIuNzcsNTIuNzcsMCwwLDEtLjkxLTExLjM0cS4xOC01LjMxLDEuMDktMTIuMDhhMTQ3Ljk0LDE0Ny45NCwwLDAsMS0yOS4wOSwxOS45NCw4Ny40LDg3LjQsMCwwLDEtNDAuMjUsOS43cS0yNy4wOCwwLTQxLjQ0LTE1LjQ2VDE1Ni4yOSwzMzFxNy44OC0zNi43OCwzOS43MS01My4yNCwxNy4zNy05LDQ4LjQ4LTEyLjgxWm0yNi41MywyNC4zNGE2Ny44LDY3LjgsMCwwLDEtMTEsNSw5OS4zMiw5OS4zMiwwLDAsMS0xNC42NCwzLjU3bC0xMi4wNywyLjE5cS0xNy4yLDIuOTQtMjUuMjUsNy4xNGEzMSwzMSwwLDAsMC0xNi42NSwyMi4xNHEtMi45NCwxMy4zNSwzLjIsMTkuM3QxNi43NCw1Ljk1cTE2LjgzLDAsMzMuMTItOS44OHQyMi41LTM2LjA1Wk03MjkuNCw0MjguNTJsNi41OC4zNmE4My41LDgzLjUsMCwwLDAsMTQuNjQtLjU1LDMyLjE1LDMyLjE1LDAsMCwwLDEyLjYzLTQuMjFxNS4yOS0zLjExLDExLjM0LTEzYzQtNi41OCw5Ljg2LTE2LjgsOS42MS0xOC4yN0w3NTUuMywxODQuNjVoNThsMTIuMjYsMTQ3LjFMODk4LDE4NC42NWg1NS40NEw4NDMuMywzODAuNzljLTIxLjIyLDM3LjgxLTQwLjU3LDY3LjQ2LTUwLjE0LDc2LjU0Uzc2Ny4yNyw0NzEsNzQ0LjIyLDQ3MXEtNywwLTExLjE2LS4wOXQtMTIuNDUtLjY0Wk01MzIsMzQ4SDQ4Mi4wNmw0OC42OS0yMjkuMjNINDg3LjM5cS0uNzQsMy40OC00LjM5LDEwLjYxYTU4LjMyLDU4LjMyLDAsMCwxLTE0LjI4LDE5LDYyLjYsNjIuNiwwLDAsMS0yOC41NCwxMy45cS0xMC4yNCwyLjItMzUuMzEsMy4zbC03LjUsMzUuNDloNjIuMzlMNDI4LjYyLDM0OEgzNzkuMzVsLTcuODgsMzYuMDVINDIxdjBINDc0LjR2MGg0OS43MVptMTgxLjkzLS4wOEg2NjRsNDguNjktMjI5LjcxSDY2OS4zMnEtLjc0LDMuNS00LjM5LDEwLjY0YTU4LjYyLDU4LjYyLDAsMCwxLTE0LjI3LDE5LjA3LDYyLjY4LDYyLjY4LDAsMCwxLTI4LjU1LDEzLjkzcS0xMC4yNSwyLjItMzUuMzEsMy4zbC03LjUsMzUuNTdoNjIuMzlsLTMxLjE0LDE0Ny4ySDU2MS4yOGwtNy44OCwzNi4xM2g0OS41MXYwaDUzLjQzdjBINzA2WiIvPjxwYXRoIGNsYXNzPSJhIiBkPSJNOTQ3LjEyLDgzLjI4bDE5LjcxLTM2LjA1SDEzMy40OWEzMi4yOCwzMi4yOCwwLDAsMC0zMS41OCwyNS42M0wyNi40OSw0MzEuMzJhMzIuMjgsMzIuMjgsMCwwLDAsMzEuNTksMzguOTJINjY1LjQ5bDcuODgtMzYuMDVINjMuMDZMMTM2Ljg5LDgzLjI4WiIvPjwvc3ZnPg==\u0026logoWidth=28\u0026colorA=20c997\u0026colorB=343a40\u0026style=flat)\n\n[![Build Status](https://travis-ci.org/anubhavsrivastava/react-selffocus-element.svg?branch=master)](https://travis-ci.org/anubhavsrivastava/react-selffocus-element)\n[![Coverage Status](https://coveralls.io/repos/github/anubhavsrivastava/react-selffocus-element/badge.svg?branch=master)](https://coveralls.io/github/anubhavsrivastava/react-selffocus-element?branch=master)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n[![GitHub issues](https://img.shields.io/github/issues/anubhavsrivastava/react-selffocus-element.svg?style=flat-square)](https://github.com/anubhavsrivastava/react-selffocus-element/issues)\n\n[![NPM](https://nodei.co/npm/react-selffocus-element.png?downloads=true\u0026stars=true)](https://nodei.co/npm/react-selffocus-element/)\n\nA React component to focus on an element when it is mounted. This is essential for seeking attention on a particular element. This can also help in getting attention of screen readers like VoiceOver, JAWS, NVDA, and friends.\n\n## Purpose\n\nAs soon there is some user event (e.g click) which cause rendering of a section on React app. For eg, a `nav` link may cause a subsection to be mounted. At few instances and to help a11y, that particular section might require focus to seek user attention.\n\nIn case of a11y, for section that are not role=`document` and do not contain `heading` section fail to get screen-reader's attention and are ignored until user manually tabs over them.\nSuch case required a user focus, `react-selffocus-element` helps in solving this for react based apps.\n\nFor few scenarios, `aria-live` or `alert` does not make sense to seek attention for screen reader because that may not be same control. e.g. Seeking a focus on `list` or `tree` item helps them navigate as their respective roles without making them `alert`.\n\n## Install\n\n```\n$ npm install react-selffocus-element --save\n```\n\nor\n\n```\nyarn add react-selffocus-element\n```\n\n## Example\n\n1.  `\u003cSelfFocus\u003e`\n\n        import SelfFocus from 'react-selffocus-element';\n\n        ...\n        render(){\n            return (\n                \u003cSelfFocus\u003e\n                    This will only be content that will be focused on component mount.\n                \u003c/SelfFocus\u003e\n            )\n        }\n        ...\n\n    This is render `div`(by default) tag with autofocus. This element will also be focus-able by default.\n\n    `Rendered DOM`\n\n        \u003cdiv tabindex=\"0\" \u003eThis will only be content that will be focused on component mount.\u003c/div\u003e\n\n2.  With Custom Tag and TabIndex\n\n\n        import SelfFocus from 'react-selffocus-element';\n\n        ...\n        render(){\n            return (\n                \u003cSelfFocus tag=\"p\" tabIndex={-1}\u003e\n                    This will only be content for custom tag and will be focused on component mount.\n                \u003c/SelfFocus\u003e\n            )\n        }\n        ...\n\n    This is render `p`(`tag` prop) tag with autofocus. This element will be focus-able based on tabIndex prop. It is recommended that value of this prop should be 0 (natural tab order) or -1 (not tabbable).\n\n    `Rendered DOM `\n\n         \u003cp tabindex=\"0\" \u003eThis will only be content for custom tag and will be focused on component mount.\u003c/div\u003e\n\n## APIs\n\n### `SelfFocus` Component\n\n#### Import mechanism\n\n    import SelfFocus from 'react-selffocus-element'\n\n#### Properties\n\n| prop               | type            | description                                 | default value |\n| ------------------ | --------------- | ------------------------------------------- | ------------- |\n| children (default) | --              | Inner children for selfFocus Component      | `null`        |\n| tag                | htmlTag(String) | Component/Node to be rendered for focussing | `div`         |\n| className          | string          | additional Classname for particular div     | `\u003cempty\u003e`     |\n| tabIndex           | string/number   | tabbable order - 0/-1                       | `0`           |\n\n## FAQ\n\n#### 1.  I do not see focused element with outline. How can it be controlled?\n\n  One should use additional custom css to achieve outline, which is normally in this form,\n\n        *:focus {\n            outline-style: auto !important;\n            outline: auto !important;\n            outline-color: #2793f8 !important;\n        }\n\n  Also note that outline behavior for screen reader will also rely on screen reader and browser ( for eg, on electron running on window will be default render yellow border unless overwritten by css)\n\n#### 2.  Should I use it for form input tag?\n\n  This component can be used for input tags but default `autoFocus` prop support provided by React should be used in conjunction with input tags. This will help browser functionalities to work as per focus specifications.\n\n#### 3.  What about `role` and `aria-\\*` attributes for that elements\n\n  You can specify `role` and all `aria-*` attributes on SelfFocus component and would be available on parent element.\n\n  e.g.\n\n        \u003cSelfFocus tag=\"p\" role=\"alert\"\u003e\n\n  This will render a `p` tag with `role` as `alert`\n\n#### 4.  What about other props that my component requires?\n\n  You can pass any key-value prop to `SelfFocus` and it will be rendered on main parent element. This is also how `aria-*` and `role` is supported.\n\n#### 5.  Does this work on ComponentDidUpdate?\n\n  No. There is no use case of focusing again on element after some state/prop change. In addition, there may be `componentDidUpdate` function triggered when it does not require focusing. Hence, it is currently not supported.\n\n## License\n\n[![Open Source Love](https://badges.frapsoft.com/os/mit/mit.svg?v=102)](LICENSE)\n\nRefer `LICENSE` file in this repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanubhavsrivastava%2Freact-selffocus-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanubhavsrivastava%2Freact-selffocus-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanubhavsrivastava%2Freact-selffocus-element/lists"}