{"id":21951334,"url":"https://github.com/hiswe/accessible-focus-ring","last_synced_at":"2026-04-05T22:02:38.616Z","repository":{"id":44121287,"uuid":"149856444","full_name":"Hiswe/accessible-focus-ring","owner":"Hiswe","description":"handle focus ring","archived":false,"fork":false,"pushed_at":"2023-01-03T15:17:25.000Z","size":2735,"stargazers_count":0,"open_issues_count":19,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T03:34:14.076Z","etag":null,"topics":["accessibility","css","focus-ring","focusring"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@hiswe/focus-ring","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/Hiswe.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}},"created_at":"2018-09-22T07:46:14.000Z","updated_at":"2019-05-30T18:02:59.000Z","dependencies_parsed_at":"2023-02-01T07:00:42.872Z","dependency_job_id":null,"html_url":"https://github.com/Hiswe/accessible-focus-ring","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hiswe%2Faccessible-focus-ring","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hiswe%2Faccessible-focus-ring/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hiswe%2Faccessible-focus-ring/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hiswe%2Faccessible-focus-ring/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hiswe","download_url":"https://codeload.github.com/Hiswe/accessible-focus-ring/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244999193,"owners_count":20544863,"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":["accessibility","css","focus-ring","focusring"],"created_at":"2024-11-29T06:13:37.716Z","updated_at":"2025-12-30T23:45:30.125Z","avatar_url":"https://github.com/Hiswe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# accessible-focus-ring\n\n[![npm version](https://badge.fury.io/js/%40hiswe%2Ffocus-ring.svg)](https://badge.fury.io/js/%40hiswe%2Ffocus-ring) [![Build Status](https://travis-ci.org/Hiswe/accessible-focus-ring.svg?branch=master)](https://travis-ci.org/Hiswe/accessible-focus-ring)\n\nremove the focus-ring while staying accessible\nfor `1.5kb` ([0.65 kB gzipped](https://bundlephobia.com/result?p=@hiswe/focus-ring)), including JS \u0026 CSS\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [the problem](#the-problem)\n- [use](#use)\n  - [as a global variable](#as-a-global-variable)\n  - [as a NPM module](#as-a-npm-module)\n  - [styling files](#styling-files)\n- [configuration](#configuration)\n  - [class](#class)\n  - [onTab](#ontab)\n- [demo](#demo)\n  - [github pages](#github-pages)\n  - [local](#local)\n- [other stuff](#other-stuff)\n  - [run the tests](#run-the-tests)\n  - [thanks](#thanks)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## the problem\n\nFocus rings on elements are mostly not wanted on mobile.\nBut they are good for accessibility!\n\nSo we remove it until someone use the `tab` key.\n\nSee this [hackernoon article](https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2) by [David Gilbertson](https://hackernoon.com/@david.gilbertson) for more details.\n\n## use\n\n### as a global variable\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@hiswe/focus-ring/dist/focus-ring.min.css\"\u003e\n  \u003cscript src=\"https://unpkg.com/@hiswe/focus-ring/dist/focus-ring.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cscript\u003e\n    (function () {\n      focusRing()\n    }());\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n### as a NPM module\n\n```sh\nnpm install @hiswe/focus-ring\n```\n\n**commonJS**\n\n```js\nconst focusRing = require('@hiswe/focus-ring')\nfocusRing()\n```\n\n**ES module**\n\n```js\nimport focusRing from '@hiswe/focus-ring'\nfocusRing()\n```\n\n### styling files\n\nthis package provides 2 styling files:\n\n```\n@hiswe/focus-ring/dist/focus-ring.min.css\n@hiswe/focus-ring/dist/focus-ring.scss\n```\n\nif you're using the SCSS files you can override the class used by setting:\n\n```scss\n$focus-ring-selector: '.my-custom-selector';\n@import '~@hiswe/focus-ring/dist/focus-ring.scss';\n```\n\n## configuration\n\n`focus-ring` allows you to have more control by passing a configuration object:\n\n```js\nfocusRing({\n  class: 'user-not-tabbing',\n  onTab: function noop() {},\n})\n```\n\n#### class\n\n**type:** `string`  \n**default:** `'user-not-tabbing'`\n\nChange the CSS class name.\n\n⚠️ **Changing the class won't update the CSS file.**\n\nYou will have to:\n\n- provide your own\n- or use \u0026 configure the `scss` file\n\n#### onTab\n\n**type:** `function`  \n**default:** `function noop(){}`\n\nyou can specify a callback which will be called after the first user tab\n\n## demo\n\n### github pages\n\nhttps://hiswe.github.io/accessible-focus-ring/\n\n### local\n\nyou'll need [node](https://nodejs.org/en/)\n\n- clone the project\n- `npm install`\n- `npm start`\n- go to: http://localhost:8080\n\n## other stuff\n\n### run the tests\n\n- clone the project\n- `npm install`\n- `npm test`\n\n### thanks\n\n- [David Gilbertson](https://hackernoon.com/@david.gilbertson) for the snippet\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiswe%2Faccessible-focus-ring","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhiswe%2Faccessible-focus-ring","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiswe%2Faccessible-focus-ring/lists"}