{"id":32507236,"url":"https://github.com/mmdevcodes/focusoverlay","last_synced_at":"2026-03-14T18:26:05.472Z","repository":{"id":50710361,"uuid":"96220629","full_name":"mmdevcodes/FocusOverlay","owner":"mmdevcodes","description":"Library for creating animated overlays on focused elements","archived":false,"fork":false,"pushed_at":"2023-03-03T21:34:18.000Z","size":6202,"stargazers_count":185,"open_issues_count":17,"forks_count":13,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-10-15T16:48:25.363Z","etag":null,"topics":["a11y","accessibility","css","focus","javascript","library","overlay"],"latest_commit_sha":null,"homepage":"https://focusoverlay.js.org/","language":"SCSS","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/mmdevcodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-04T13:23:09.000Z","updated_at":"2025-09-10T20:26:13.000Z","dependencies_parsed_at":"2024-05-20T00:46:42.438Z","dependency_job_id":null,"html_url":"https://github.com/mmdevcodes/FocusOverlay","commit_stats":null,"previous_names":["mmdevcodes/focusoverlay","mmahandev/focusoverlay","mauricemahan/focusoverlay"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/mmdevcodes/FocusOverlay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmdevcodes%2FFocusOverlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmdevcodes%2FFocusOverlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmdevcodes%2FFocusOverlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmdevcodes%2FFocusOverlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmdevcodes","download_url":"https://codeload.github.com/mmdevcodes/FocusOverlay/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmdevcodes%2FFocusOverlay/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281332391,"owners_count":26483032,"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-10-27T02:00:05.855Z","response_time":61,"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","accessibility","css","focus","javascript","library","overlay"],"created_at":"2025-10-27T19:55:14.597Z","updated_at":"2025-10-27T19:55:15.430Z","avatar_url":"https://github.com/mmdevcodes.png","language":"SCSS","readme":"# Focus Overlay\n\nLibrary for creating overlays on focused elements. It was built with accessibility in mind with trigger keys and ARIA roles.\n\n![Focus Overlay](http://i.imgur.com/zMFb7m4.gif)\n\n## Install\n\nInstall with npm:\n\n```bash\nnpm install focus-overlay\n```\n\nInstall in browser:\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003c!-- In the \u003chead\u003e --\u003e\n\u003clink rel=\"stylesheet\" href=\"//unpkg.com/focus-overlay@latest/dist/focusoverlay.css\" /\u003e\n\n\u003c!-- End of \u003cbody\u003e --\u003e\n\u003cscript src=\"//unpkg.com/focus-overlay@latest/dist/focusoverlay.js\"\u003e\u003c/script\u003e\n```\n\nThe CSS is small enough to copy directly into your project's main stylesheet if you desire.\n\n## Usage\n\n`FocusOverlay(element, options)`\n\n```js\nimport FocusOverlay from 'focus-overlay';\n\n// Option 1: Zero config - Scopes to \u003cbody\u003e element and uses default settings\nconst fo = new FocusOverlay();\n\n// Option 2: Define an element\nconst fo = new FocusOverlay(document.body, options);\n```\n\nThe `element` is what FocusOverlay will be scoped to. It takes either a string CSS selector or an HTML element. If no element is supplied it will scope to the `\u003cbody\u003e` element by default.\n\nThe `options` is an optional parameter. Takes an object. See [options](#options) for more info.\n\nBy default Focus Overlay will show and animate when hitting keyboard keys such as the `Tab` key. It's also preconfigured to animate via CSS transitions.\n\n## Options\n\nThe default `options` are:\n\n```js\n// Class added to the focus box\nclass: 'focus-overlay',\n// Class added while the focus box is active\nactiveClass: 'focus-overlay-active',\n// Class added while the focus box is animating\nanimatingClass: 'focus-overlay-animating',\n// Class added to the target element\ntargetClass: 'focus-overlay-target',\n// z-index of focus box\nzIndex: 9001,\n// Duration of the animatingClass (milliseconds)\nduration: 500,\n// Removes activeClass after duration\ninactiveAfterDuration: false,\n// Tab, Arrow Keys, Enter, Space, Shift, Ctrl, Alt, ESC\ntriggerKeys: [9, 36, 37, 38, 39, 40, 13, 32, 16, 17, 18, 27],\n// Make focus box inactive when a non specified key is pressed\ninactiveOnNonTriggerKey: true,\n// Make focus box inactive when a user clicks\ninactiveOnClick: true,\n// Force the box to always stay active. Overrides everything\nalwaysActive: false,\n// Reposition focus box on transitionEnd for focused elements\nwatchTransitionEnd: true,\n// Initialization event\nonInit: function(focusoverlay) {},\n// Before focus box move\nonBeforeMove: function(focusoverlay) {},\n// After focus box move\nonAfterMove: function(focusoverlay) {},\n// After FocusOverlay is destroyed\nonDestroy: function(focusoverlay) {}\n```\n\n## Methods\n\n```js\n// Example use of the \"moveFocusBox\" method\nfocusoverlay.moveFocusBox(document.querySelector('body'));\n```\n\n### moveFocusBox\n\n**Arguments:** Element\n\nMoves the focusBox to a target element\n\n### Destroy\n\n**Arguments:** None\n\nDeconstructs the FocusOverlay instance\n\n## Data Attribute Settings\n\nIn some cases you might want FocusOverlay to ignore certain elements, or focus **other** elements instead. There are a few options available:\n\n### Example usage for `data-focus`:\n\n```html\n\u003cdiv id=\"input-wrapper\"\u003e\n  \u003cinput type=\"text\" data-focus=\"#input-wrapper\" /\u003e\n\u003c/div\u003e\n```\n\nIn this example when the user focuses the input, FocusOverlay will instead target the wrapper. The `data-focus` attribute accepts a querySelector string.\n\n### Example usage for `data-focus-label`:\n\n```html\n\u003clabel for=\"stylized-checkbox\" class=\"rounded-checkbox\"\u003eClick me\u003c/label\u003e\n\u003cinput\n  id=\"stylized-checkbox\"\n  type=\"checkbox\"\n  class=\"visually-hidden\"\n  data-focus-label\n/\u003e\n```\n\nIn this example when the user focuses the input, FocusOverlay will instead target its associated label.\n\n### Example usage for `data-focus-ignore`:\n\n```html\n\u003ca href=\"/info.html\" data-focus-ignore\u003eReally important information here!\u003c/a\u003e\n```\n\nIn this example FocusOverlay will not target this element at all.\n\n## Browser support\n\nFocus Overlay works on all modern browsers including IE11.\n\n## Notes\n\n- Special thanks to NV as it was inspired by his [Flying Focus](https://github.com/NV/flying-focus) UI concept.\n- The jQuery version is still available at in the [jQuery](https://github.com/mmahandev/FocusOverlay/tree/jquery) branch. It is no longer mantained.\n\n#### Todo\n\n- Make zIndex be CSS only\n- Add refreshPosition method\n- Add currentTarget var\n- Fix iframe focus when alwaysActive is true\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmdevcodes%2Ffocusoverlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmdevcodes%2Ffocusoverlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmdevcodes%2Ffocusoverlay/lists"}