# has-tabbed: A small library for keyboard focus states

DevFeed: [has-tabbed: A small library for keyboard focus states](<https://devfeed.tech/articles/has-tabbed-aka-should-i-release-small-libraries-37278.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/has-tabbed-aka-should-i-release-small-libraries/>)

Author: Stanko

Published: 2018-01-22T00:00:00Z

Content type: release

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [User experience (UX)](<https://devfeed.tech/topics/ux.md>), [Library](<https://devfeed.tech/topics/library.md>), [Web](<https://devfeed.tech/topics/web.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [html](<https://devfeed.tech/tags/html.md>), [libraries](<https://devfeed.tech/tags/libraries.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [release](<https://devfeed.tech/tags/release.md>), [ux](<https://devfeed.tech/tags/ux.md>)

## AI overview

The author announces has-tabbed, a small open-source library that adds a CSS class when users navigate with the Tab key and removes it when they click elsewhere. The article argues that small libraries are worth releasing and presents has-tabbed as an accessibility and UX improvement for managing focus states.

## Source excerpt

I just released tiny library called has-tabbed. Again, it is a small piece of code I regularly copy from project to project. I always considered it too insignificant for releasing it as a standalone package. When user presses tab key, it adds CSS classBy default --tabbed is used, but it accepts custom class as parameter. to html element. Then, if user clicks anywhere on the page, it removes it. That's why I though it is too small. But after giving it some thought, my answer to the question in the title is "YES". You should release small libraries no matter how small they are. It is ok if library does only one small thingIt should do it right though.. It will save you time as you don't have to copy it all the time, and sharing will allow other people to use and improve it. Now when we resolved that question, let's get back to has-tabbed. What is it for? # It is a small accessibility and UX improvement. Web apps need focus states with "ugly" focus rings. Most developers will just remove them. This is something you shouldn't do, as it impacts accessibility and overall UX. More people than you think are using keyboard to navigate through websites and apps. has-tabbed allows you to have the best of both worlds. It gives you a way yo differentiate if user is using keyboard or mouse to get around. You can safely remove focus rings for people using a mouse, but as soon as they start tabbing you can put them back in. You'll understand what I'm talking about when you see the demo. On the left, you can see colorful buttons without focus state (with hover state on the first one). As soon as user presses tab we can add focus state as shown on the right. Of course it is open source and code is available here. Enjoy!