{"id":21418147,"url":"https://github.com/stamat/focus-outline","last_synced_at":"2025-06-14T22:03:25.568Z","repository":{"id":68772144,"uuid":"289725553","full_name":"stamat/focus-outline","owner":"stamat","description":"Remove element outlines on mouse click, show them on TAB key","archived":false,"fork":false,"pushed_at":"2023-08-04T10:21:13.000Z","size":45,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-23T06:09:01.364Z","etag":null,"topics":["a11y","accessibility","focus","outline"],"latest_commit_sha":null,"homepage":"","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/stamat.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":"2020-08-23T16:36:19.000Z","updated_at":"2023-07-31T18:15:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"f6af71bf-70ee-45e1-88b6-f6e4ddc2ecc6","html_url":"https://github.com/stamat/focus-outline","commit_stats":null,"previous_names":["stamat/focus-outline"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stamat%2Ffocus-outline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stamat%2Ffocus-outline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stamat%2Ffocus-outline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stamat%2Ffocus-outline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stamat","download_url":"https://codeload.github.com/stamat/focus-outline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243918641,"owners_count":20368745,"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","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","focus","outline"],"created_at":"2024-11-22T19:19:11.819Z","updated_at":"2025-03-16T19:23:45.477Z","avatar_url":"https://github.com/stamat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# focus-outline [![npm version](https://img.shields.io/npm/v/focus-outline)](https://www.npmjs.com/package/focus-outline)\nRemove element outlines on mouse click, show them on TAB key. Extremely simple code. Inspired by [outline.js](https://github.com/lindsayevans/outline.js) \n\n## Usage\n\nInstall it via npm:\n\n```bash\nnpm i focus-outline\n```\n\nOffered as ESM and IIFE.\n\n```javascript\nimport FocusOutline from 'focus-outline';\n\nconst focusOutline = new FocusOutline(); // initializes functionality\n```\n\nto remove functionality you can destroy the instance like so:\n\n```javascript\nfocusOutline.destroy();\n```\n\nand if you want to re-initialize it:\n\n```javascript\nfocusOutline.init();\n```\n\nOr you can use the IIFE version:\n\n```html\n\u003cscript src=\"path/to/focus-outline.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var focusOutline = new FocusOutline();\n\u003c/script\u003e\n```\n\n## Configuration\n\nYou can pass an object with options to the constructor and configure the css used to disable the outline.\n\n```javascript\nconst focusOutline = new FocusOutline({\n  css: ':focus { outline: none; } ::-moz-focus-inner { border: 0; }', // this is the default, you can have whatever you want here, if there is ever need for that lol\n  removeBoxShadow: true, // removes the box shadow too, default is `false`\n  bodyClass: 'no-focus-outline', // adds a class to the body when the outline is removed\n  keyCodes: [9], // array of key codes that trigger the outline to be shown, default is `[9]` (TAB)\n  callback: function(focusOutline) { if (focusOutline.enabled) console.log('outline is shown') } // callback function on outline disable and enable\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstamat%2Ffocus-outline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstamat%2Ffocus-outline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstamat%2Ffocus-outline/lists"}