Gathering detailed insights and metrics for focus-trap
Gathering detailed insights and metrics for focus-trap
Installations
npm install focus-trapDeveloper
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
Typescript Support
Yes
Node Version
18.20.5
NPM Version
10.8.2
Statistics
1,363 Stars
1,240 Commits
113 Forks
10 Watching
2 Branches
43 Contributors
Updated on 27 Nov 2024
Languages
JavaScript (100%)
Total Downloads
Cumulative downloads
Total Downloads
207,683,988
Last day
-1.7%
364,043
Compared to previous day
Last week
5.6%
1,937,655
Compared to previous week
Last month
11%
7,844,050
Compared to previous month
Last year
63.8%
79,960,890
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
28
@babel/cli@babel/core@babel/eslint-parser@babel/preset-env@changesets/cli@rollup/plugin-babel@rollup/plugin-commonjs@rollup/plugin-node-resolve@rollup/plugin-replace@rollup/plugin-terser@testing-library/cypress@types/jqueryall-contributors-clibabel-loadercross-envcypresscypress-plugin-tabeslinteslint-config-prettiereslint-plugin-cypresseslint-plugin-jestonchangeprettierrolluprollup-plugin-livereloadrollup-plugin-servestart-server-and-testtypescript
Versions
focus-trap 
Trap focus within a DOM node.
There may come a time when you find it important to trap focus within a DOM node — so that when a user hits Tab or Shift+Tab or clicks around, she can't escape a certain cycle of focusable elements.
You will definitely face this challenge when you are trying to build accessible modals.
This module is a little, modular vanilla JS solution to that problem.
Use it in your higher-level components. For example, if you are using React check out focus-trap-react, a light wrapper around this library. If you are not a React user, consider creating light wrappers in your framework-of-choice.
What it does
When a focus trap is activated, this is what should happen:
- Some element within the focus trap receives focus. By default, this will be the first element in the focus trap's tab order (as determined by tabbable). Alternately, you can specify an element that should receive this initial focus.
- The
TabandShift+Tabkeys will cycle through the focus trap's tabbable elements but will not leave the focus trap. - Clicks within the focus trap behave normally; but clicks outside the focus trap are blocked.
- The
Escapekey will deactivate the focus trap.
When the focus trap is deactivated, this is what should happen:
- Focus is passed to whichever element had focus when the trap was activated (e.g. the button that opened the modal or menu).
- Tabbing and clicking behave normally everywhere.
For more advanced usage (e.g. focus traps within focus traps), you can also pause a focus trap's behavior without deactivating it entirely, then unpause at will.
Installation
1npm install focus-trap
UMD
You can also use a UMD version published to unpkg.com as dist/focus-trap.umd.js and dist/focus-trap.umd.min.js.
NOTE: The UMD build does not bundle the
tabbabledependency. Therefore you will have to also include that one, and include it beforefocus-trap.
1<head> 2 <script src="https://unpkg.com/tabbable/dist/index.umd.js"></script> 3 <script src="https://unpkg.com/focus-trap/dist/focus-trap.umd.js"></script> 4</head>
Browser Support
As old and as broad as reasonably possible, excluding browsers that are out of support or have nearly no user base.
Focused on desktop browsers, particularly Chrome, Edge, FireFox, Safari, and Opera.
Focus-trap is not officially tested on any mobile browsers or devices.
❗️ Safari: By default, Safari does not tab through all elements on a page, which alters the normal DOM-based tab order expected by focus-trap. If you use or support Safari with this library, make sure you and your users know they must enable the
Preferences > Advanced > Press Tab to highlight each item on a webpagefeature. Otherwise, your traps will not work the way you expect them to.
⚠️ Microsoft no longer supports any version of IE, so IE is no longer supported by this library.
💬 Focus-trap relies on tabbable so its browser support is at least what tabbable supports.
💬 Keep in mind that performance optimization and old browser support are often at odds, so tabbable may not always be able to use the most optimal (typically modern) APIs in all cases.
Usage
createFocusTrap()
1import * as focusTrap from 'focus-trap'; // ESM 2const focusTrap = require('focus-trap'); // CJS 3// UMD: `focusTrap` is defined as a global on `window` 4 5trap = focusTrap.createFocusTrap(element[, createOptions]);
Returns a new focus trap on element (one or more "containers" of tabbable nodes that, together, form the total set of nodes that can be visited, with clicks or the tab key, within the trap).
element can be:
- a DOM node (the focus trap itself);
- a selector string (which will be passed to
document.querySelector()to find the DOM node); or - an array of DOM nodes or selector strings (where the order determines where the focus will go after the last tabbable element of a DOM node/selector is reached).
A focus trap must have at least one container with at least one tabbable/focusable node in it to be considered valid. While nodes can be added/removed at runtime, with the trap adjusting to added/removed tabbable nodes, an error will be thrown if the trap ever gets into a state where it determines none of its containers have any tabbable nodes in them and the
fallbackFocusoption does not resolve to an alternate node where focus can go.
createOptions
- onActivate
{() => void}: A function that will be called before sending focus to the target element upon activation. - onPostActivate
{() => void}: A function that will be called after sending focus to the target element upon activation. - onPause
{() => void}: A function that will be called immediately after the trap's state is updated to be paused. - onPostPause
{() => void}: A function that will be called after the trap has been completely paused and is no longer managing/trapping focus. - onUnpause
{() => void}: A function that will be called immediately after the trap's state is updated to be active again, but prior to updating its knowledge of what nodes are tabbable within its containers, and prior to actively managing/trapping focus. - onPostUnpause
{() => void}: A function that will be called after the trap has been completely unpaused and is once again managing/trapping focus. - checkCanFocusTrap
{(containers: Array<HTMLElement | SVGElement>) => Promise<void>}: Animated dialogs have a small delay between whenonActivateis called and when the focus trap is focusable.checkCanFocusTrapexpects a promise to be returned. When that promise settles (resolves or rejects), focus will be sent to the first tabbable node (in tab order) in the focus trap (or the node configured in theinitialFocusoption). - onDeactivate
{() => void}: A function that will be called before returning focus to the node that had focus prior to activation (or configured with thesetReturnFocusoption) upon deactivation. - onPostDeactivate
{() => void}: A function that will be called after the trap is deactivated, afteronDeactivate. If thereturnFocusdeactivation option was set, it will be called after returning focus to the node that had focus prior to activation (or configured with thesetReturnFocusoption) upon deactivation; otherwise, it will be called after deactivation completes. - checkCanReturnFocus
{(trigger: HTMLElement | SVGElement) => Promise<void>}: An animated trigger button will have a small delay between whenonDeactivateis called and when the focus is able to be sent back to the trigger.checkCanReturnFocusexpects a promise to be returned. When that promise settles (resolves or rejects), focus will be sent to to the node that had focus prior to the activation of the trap (or the node configured in thesetReturnFocusoption). - initialFocus
{HTMLElement | SVGElement | string | false | undefined | (() => HTMLElement | SVGElement | string | false | undefined)}: By default (whenundefinedor the function returnsundefined), when a focus trap is activated, the active element will receive focus if it's in the trap, otherwise, the first element in the focus trap's tab order will receive focus. With this option you can specify a different element to receive that initial focus. Can be a DOM node, or a selector string (which will be passed todocument.querySelector()to find the DOM node), or a function that returns any of these. You can also set this option tofalse(or to a function that returnsfalse) to prevent any initial focus at all when the trap activates.- 💬 Setting this option to
false(or a function that returnsfalse) will prevent thefallbackFocusoption from being used. - 💬 If the option resolves to a non-focusable node (e.g. one that exists, but is hidden), the default behavior will be used (as though the option weren't set at all).
- 💬 If the option resolves to a non-existent node, an exception will be thrown.
- 💬 If the option resolves to a valid selector string (directly set, or returned from a function), but the selector doesn't match a node, the trap will fall back to the
fallbackFocusnode option. If that option also fails to yield a node, an exception will be thrown. - 💬 If the option resolves to
undefined(i.e. not set or function returnsundefined), the default behavior will be used. - ⚠️ See warning below about Shadow DOM and selector strings.
- 💬 Setting this option to
- fallbackFocus
{HTMLElement | SVGElement | string | () => HTMLElement | SVGElement | string}: By default, an error will be thrown if the focus trap contains no elements in its tab order. With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found. For example, you may want a popover's<div>to receive focus if the popover's content includes no tabbable elements. Make sure the fallback element has a negativetabindexso it can be programmatically focused. The option value can be a DOM node, a selector string (which will be passed todocument.querySelector()to find the DOM node), or a function that returns any of these.- 💬 If
initialFocusisfalse(or a function that returnsfalse), this function will not be called when the trap is activated, and no element will be initially focused. This function may still be called while the trap is active if things change such that there are no longer any tabbable nodes in the trap. - ⚠️ See warning below about Shadow DOM and selector strings.
- 💬 If
- escapeDeactivates
{boolean} | (e: KeyboardEvent) => boolean): Default:true. Iffalseor returnsfalse, theEscapekey will not trigger deactivation of the focus trap. This can be useful if you want to force the user to make a decision instead of allowing an easy way out. Note that if a function is given, it's only called if the ESC key was pressed. - clickOutsideDeactivates
{boolean | (e: MouseEvent | TouchEvent) => boolean}: Iftrueor returnstrue, a click outside the focus trap will immediately deactivate the focus trap and allow the click event to do its thing (i.e. to pass-through to the element that was clicked). This option takes precedence overallowOutsideClickwhen it's set totrue. Default:false.- 💬 If a function is provided, it will be called up to twice (but only if the click occurs outside the trap's containers): First on the
mousedown(ortouchstarton mobile) event and, iftruewas returned, again on theclickevent. It will get the same node each time, and it's recommended that the returned value is also the same each time. Be sure to check the event type if the double call is an issue in your code. - ⚠️ If you're using a password manager such as 1Password, where the app adds a clickable icon to all fillable fields, you should avoid using this option, and instead use the
allowOutsideClickoption to better control exactly when the focus trap can be deactivated. The clickable icons are usually positioned absolutely, floating on top of the fields, and therefore not part of the container the trap is managing. When using theclickOutsideDeactivatesoption, clicking on a field's 1Password icon will likely cause the trap to be unintentionally deactivated.
- 💬 If a function is provided, it will be called up to twice (but only if the click occurs outside the trap's containers): First on the
- allowOutsideClick
{boolean | (e: MouseEvent | TouchEvent) => boolean}: If set and is or returnstrue, a click outside the focus trap will not be prevented (letting focus temporarily escape the trap, without deactivating it), even ifclickOutsideDeactivates=false. Default:false.- 💬 If this is a function, it will be called up to twice on every click (but only if the click occurs outside the trap's containers): First on
mousedown(ortouchstarton mobile), and then on the actualclickif the function returnedtrueon the first event. Be sure to check the event type if the double call is an issue in your code. - 💡 When
clickOutsideDeactivates=true, this option is ignored (i.e. if it's a function, it will not be called). - Use this option to control if (and even which) clicks are allowed outside the trap in conjunction with
clickOutsideDeactivates=false.
- 💬 If this is a function, it will be called up to twice on every click (but only if the click occurs outside the trap's containers): First on
- returnFocusOnDeactivate
{boolean}: Default:true. Iffalse, when the trap is deactivated, focus will not return to the element that had focus before activation.- 💬 When using this option in conjunction with
clickOutsideDeactivates=true:- If
returnFocusOnDeactivate=trueand the outside click causing deactivation is on a focusable element, focus will not return to that element; instead, it will return to the node focused just before activation. - If
returnFocusOnDeactivate=falseand the outside click is on a focusable node, focus will remain on that node instead of the node focused just before activation. If the outside click is on a non-focusable node, then "nothing" will have focus post-deactivation.
- If
- 💬 When using this option in conjunction with
- setReturnFocus
{HTMLElement | SVGElement | string | (previousActiveElement: HTMLElement | SVGElement) => HTMLElement | SVGElement | string | false}: By default, on deactivation, ifreturnFocusOnDeactivate=true(or ifreturnFocus=truein the deactivation options), focus will be returned to the element that was focused just before activation. With this option, you can specify another element to programmatically receive focus after deactivation. It can be a DOM node, a selector string (which will be passed todocument.querySelector()to find the DOM node upon deactivation), or a function that returns any of these to call upon deactivation (i.e. the selector and function options are only executed at the time the trap is deactivated). Can also befalse(or returnfalse) to leave focus where it is at the time of deactivation.- 💬 Using the selector or function options is a good way to return focus to a DOM node that may not exist at the time the trap is activated.
- ⚠️ See warning below about Shadow DOM and selector strings.
- preventScroll
{boolean}: By default, focus() will scroll to the element if not in viewport. It can produce unintended effects like scrolling back to the top of a modal. If set totrue, no scroll will happen. - delayInitialFocus
{boolean}: Default:true. Delays the autofocus to the next execution frame when the focus trap is activated. This prevents elements within the focusable element from capturing the event that triggered the focus trap activation. - document {Document}: Default:
window.document. Document where the focus trap will be active. This enables the use of FocusTrap inside an iFrame.- ⚠️ Note that FocusTrap will be unable to trap focus outside the iFrame if you configure this option to be the iFrame's document. It will only trap focus inside of it (as the demo shows). If you want to trap focus outside as well, then your FocusTrap must be configured on an element that contains the iFrame.
- tabbableOptions: (optional) tabbable options configurable on FocusTrap (all the common options).
- ⚠️ See notes about testing in JSDom (e.g. using Jest).
- trapStack (optional)
{Array<FocusTrap>}: Define the global trap stack. This makes it possible to share the same stack in multiple instances offocus-trapin the same page such that auto-activation/pausing of traps is properly coordinated among all instances as activating a trap when another is already active should result in the other being auto-paused. By default, each instance will have its own internal stack, leading to conflicts if they each try to trap the focus at the same time. - isKeyForward
{(event: KeyboardEvent) => boolean}: (optional) Determines if the given keyboard event is a "tab forward" event that will move the focus to the next trapped element in tab order. Defaults to theTABkey. Use this to override the trap's behavior if you want to use arrow keys to control keyboard navigation within the trap, for example. Also seeisKeyBackward()option.- ⚠️ Using this option will not automatically prevent use of the
TABkey as the browser will continue to respond to it by moving focus forward because that's what using theTABkey does in a browser, but it will no longer respect the trap's container edges as it normally would. You will need to add your ownkeydownhandler to callpreventDefault()on aTABkey event if you want to completely suppress the use of theTABkey.
- ⚠️ Using this option will not automatically prevent use of the
- isKeyBackward
{(event: KeyboardEvent) => boolean}: (optional) Determines if the given keyboard event is a "tab backward" event that will move the focus to the previous trapped element in tab order. Defaults to theSHIFT+TABkey. Use this to override the trap's behavior if you want to use arrow keys to control keyboard navigation within the trap, for example. Also seeisKeyForward()option.- ⚠️ Using this option will not automatically prevent use of the
SHIFT+TABkey as the browser will continue to respond to it by moving focus backward because that's what using theSHIFT+TABkey sequence does in a browser, but it will no longer respect the trap's container edges as it normally would. You will need to add your ownkeydownhandler to callpreventDefault()on aTABkey event if you want to completely suppress the use of theSHIFT+TABkey sequence.
- ⚠️ Using this option will not automatically prevent use of the
Shadow DOM
Selector strings
⚠️ Beware that putting a focus-trap inside an open Shadow DOM means you must not use selector strings for options that support these (because nodes inside Shadow DOMs, even open shadows, are not visible via document.querySelector()).
Closed shadows
If you have closed shadow roots that you would like considered for tabbable/focusable nodes, use the tabbableOptions.getShadowRoot option to provide Tabbable (used internally) with a reference to a given node's shadow root so that it can be searched for candidates.
Positive Tabindexes
⚠️ Using positive tab indexes (i.e. <button tabindex="1">Label</button>) is not recommended, primarily for accessibility reasons. Supporting them properly also means a lot of hoops to jump through when Shadow DOM is used as some key DOM APIs like Node.compareDocumentPosition() do not properly support Shadow DOM.
As such, focus-trap considers using positive tabindexes an edge case and only supports them in single-container traps with some caveats for related edge case behavior (see the demo for more details).
If you try to create a multi-container trap where at least one container has one node with a positive tabindex, an exception will be thrown:
At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.
trap.active
1trap.active: boolean
True if the trap is currently active.
trap.paused
1trap.paused: boolean
True if the trap is currently paused.
trap.activate()
1trap.activate([activateOptions]) => FocusTrap
Activates the focus trap, adding various event listeners to the document.
If focus is already within it the trap, it remains unaffected. Otherwise, focus-trap will try to focus the following nodes, in order:
createOptions.initialFocus- The first tabbable node in the trap
createOptions.fallbackFocus
If none of the above exist, an error will be thrown. You cannot have a focus trap that lacks focus.
Returns the trap.
activateOptions:
These options are used to override the focus trap's default behavior for this particular activation.
- onActivate
{() => void}: Default: whatever you chose forcreateOptions.onActivate.nullorfalseare the equivalent of anoop. - onPostActivate
{() => void}: Default: whatever you chose forcreateOptions.onPostActivate.nullorfalseare the equivalent of anoop. - checkCanFocusTrap
{(containers: Array<HTMLElement | SVGElement>) => Promise<void>}: Default: whatever you chose forcreateOptions.checkCanFocusTrap.
trap.deactivate()
1trap.deactivate([deactivateOptions]) => FocusTrap
Deactivates the focus trap.
Returns the trap.
deactivateOptions:
These options are used to override the focus trap's default behavior for this particular deactivation.
- returnFocus
{boolean}: Default: whatever you set forcreateOptions.returnFocusOnDeactivate. Iftrue, then thesetReturnFocusoption (specified when the trap was created) is used to determine where focus will be returned. - onDeactivate
{() => void}: Default: whatever you set forcreateOptions.onDeactivate.nullorfalseare the equivalent of anoop. - onPostDeactivate
{() => void}: Default: whatever you set forcreateOptions.onPostDeactivate.nullorfalseare the equivalent of anoop. - checkCanReturnFocus
{(trigger: HTMLElement | SVGElement) => Promise<void>}: Default: whatever you set forcreateOptions.checkCanReturnFocus. Not called if thereturnFocusoption is falsy.triggeris either the originally focused node prior to activation, or the result of thesetReturnFocusconfiguration option.
trap.pause()
1trap.pause([pauseOptions]) => FocusTrap
Pause an active focus trap's event listening without deactivating the trap.
If the focus trap has not been activated, nothing happens.
Returns the trap.
Any onDeactivate callback will not be called, and focus will not return to the element that was focused before the trap's activation. But the trap's behavior will be paused.
This is useful in various cases, one of which is when you want one focus trap within another. demo-six exemplifies how you can implement this.
pauseOptions:
These options are used to override the focus trap's default behavior for this particular pausing.
- onPause
{() => void}: Default: whatever you chose forcreateOptions.onPause.nullorfalseare the equivalent of anoop. - onPostPause
{() => void}: Default: whatever you chose forcreateOptions.onPostPause.nullorfalseare the equivalent of anoop.
trap.unpause()
1trap.unpause([unpauseOptions]) => FocusTrap
Unpause an active focus trap. (See pause(), above.)
Focus is forced into the trap just as described for focusTrap.activate().
If the focus trap has not been activated or has not been paused, nothing happens.
Returns the trap.
unpauseOptions:
These options are used to override the focus trap's default behavior for this particular unpausing.
- onUnpause
{() => void}: Default: whatever you chose forcreateOptions.onUnpause.nullorfalseare the equivalent of anoop. - onPostUnpause
{() => void}: Default: whatever you chose forcreateOptions.onPostUnpause.nullorfalseare the equivalent of anoop.
trap.updateContainerElements()
1trap.updateContainerElements(HTMLElement | SVGElement | string | Array<HTMLElement | SVGElement | string>) => FocusTrap
Update the element(s) that are used as containers for the focus trap.
When you call createFocusTrap(), you give it an element (or selector), or an array of elements (or selectors) to keep the focus within. This method simply allows you to update which elements to keep the focus within even while the trap is active.
A use case for this is found in focus-trap-react, where React ref's may not be initialized yet, but when they are you want to have them be a container element.
Returns the trap.
Examples
Read code in docs/ and see how it works.
Here's generally what happens in default.js (the "default behavior" demo):
1const { createFocusTrap } = require('../../index'); 2 3const container = document.getElementById('default'); 4 5const focusTrap = createFocusTrap('#default', { 6 onActivate: () => container.classList.add('is-active'), 7 onDeactivate: () => container.classList.remove('is-active'), 8}); 9 10document 11 .getElementById('activate-default') 12 .addEventListener('click', focusTrap.activate); 13document 14 .getElementById('deactivate-default') 15 .addEventListener('click', focusTrap.deactivate);
Other details
One at a time
Only one focus trap can be listening at a time. If a second focus trap is activated the first will automatically pause. The first trap is unpaused and again traps focus when the second is deactivated.
Focus trap manages a queue of traps: if A activates; then B activates, pausing A; then C activates, pausing B; when C then deactivates, B is unpaused; and when B then deactivates, A is unpaused.
Use predictable elements for the first and last tabbable elements in your trap
The focus trap will work best if the first and last focusable elements in your trap are simple elements that all browsers treat the same, like buttons and inputs.**
Tabbing will work as expected with trickier, less predictable elements — like iframes, shadow trees, audio and video elements, etc. — as long as they are between more predictable elements (that is, if they are not the first or last tabbable element in the trap).
This limitation is ultimately rooted in browser inconsistencies and inadequacies, but it comes to focus-trap through its dependency Tabbable. You can read about more details in the Tabbable documentation.
Your trap should include a tabbable element or a focusable container
You can't have a focus trap without focus, so an error will be thrown if you try to initialize focus-trap with an element that contains no tabbable nodes.
If you find yourself in this situation, you should give you container tabindex="-1" and set it as initialFocus or fallbackFocus. A couple of demos illustrate this.
Development
Because of the nature of the functionality, involving keyboard and click and (especially) focus events, JavaScript unit tests don't make sense. After all, JSDom does not fully support focus events. Since the demo was developed to also be the test, we use Cypress to automate running through all demos in the demo page.
Help
Testing in JSDom
⚠️ JSDom is not officially supported. Your mileage may vary, and tests may break from one release to the next (even a patch or minor release).
This topic is just here to help with what we know may affect your tests.
In general, a focus trap is best tested in a full browser environment such as Cypress, Playwright, or Nightwatch where a full DOM is available.
Sometimes, that's not entirely desirable, and depending on what you're testing, you may be able to get away with using JSDom (e.g. via Jest), but you'll have to configure your traps using the tabbableOptions.displayCheck: 'none' option.
See Testing tabbable in JSDom for more details.
ERROR: Your focus-trap must have at least one container with at least one tabbable node in it at all times
This error happens when the containers you specified when you setup your focus trap do not have -- or no longer have -- any tabbable elements in them, which means that focus will inevitably escape your trap because focus must always go somewhere.
You will hit this error if your trap does not have (or no longer has) any tabbable (and therefore focusable) elements in it, and it was not configured with a backup element (see the fallbackFocus option -- which must still be in the trap, but does not necessarily have to be tabbable, i.e. it could have tabindex="-1", making it focusable, but not tabbable).
This often happens when traps are related to elements that appear and disappear dynamically. Typically, the error will fire either as the element is being shown (because the trap gets created before the trapped children have been inserted into the DOM), or as it's being hidden (because the trapped children are destroyed before the trap is either destroyed or disabled).
First element in trap is unreachable with the TAB key
If you create a trap and try to use the TAB key to set focus to the first element in your trap, the first element seems unreachable because focus keeps skipping over it for some reason.
This can happen in projects where the Angular-related zone.js module is being used because Zone can interfere with Focus-trap's ability to control where focus goes when it leaves an edge node (that is, a node that is on the edge of a container in which it is trapping focus).
What is actually happening is that Focus-trap is correctly wrapping focus around to that first element (or last element, if going in reverse with SHIFT+TAB, and you're seeing that get skipped) and setting focus to it, but because of Zone's interference (in which Focus-trap's call to preventDefault() on the focus event triggered by the TAB key press is rendered ineffective), once Focus-trap is done handling the event, the browser hasn't received the signal that its default behavior should be prevented, and so it proceeds to move focus to the next element -- effectively "skipping" over the element to which Focus-trap set focus, making it seem "unreachable".
Unfortunately, there's no good workaround to this issue from Focus-trap's perspective. The issue was reported to Angular (not by Focus-trap) and has a PR (also not by Focus-trap) for a fix.
This was originally investigated in #1165 if you want to go deeper.
Contributing
See CONTRIBUTING.
Contributors
In alphabetical order:
No vulnerabilities found.
Reason
30 commit(s) and 7 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
security policy file detected
Details
- Info: security policy file detected: SECURITY.md:1
- Info: Found linked content: SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: SECURITY.md:1
- Info: Found text in security policy: SECURITY.md:1
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
1 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Reason
dependency not pinned by hash detected -- score normalized to 4
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/focus-trap/focus-trap/ci.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/focus-trap/focus-trap/ci.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/focus-trap/focus-trap/ci.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:65: update your workflow using https://app.stepsecurity.io/secureworkflow/focus-trap/focus-trap/ci.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/focus-trap/focus-trap/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/focus-trap/focus-trap/release.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/focus-trap/focus-trap/release.yml/master?enable=pin
- Info: 0 out of 5 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 2 third-party GitHubAction dependencies pinned
- Info: 2 out of 2 npmCommand dependencies pinned
Reason
Found 1/3 approved changesets -- score normalized to 3
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 29 are checked with a SAST tool
Score
6
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More