Nested Configurations
Sometimes you'll need a different configuration for a specific part of your website for any number of reasons. Focus Tracker allows you to create nested configurations to handle these cases.
Color Contrast
To fix contrast issues, a nested configuration makes it simple to change just the color while still retaining any other configuration.
Tab
Tab
- Typescript
- React
<body style="background-color: white; color: black">
<header style="background-color: blue; color: white">
<h1>Cool Stuff</h1>
<button>Get started</button>
</header>
<p>Lorem ipsum dolor sit amet...</p>
<button>Another button</button>
</body>
import { registerFocusTrackerConfiguration } from '@michaeldrotar/focus-tracker-js/registerFocusTrackerConfiguration'
import { startUserFocusTracker } from '@michaeldrotar/focus-tracker-js/startUserFocusTracker'
registerFocusTrackerConfiguration(document.body, {
color: 'blue',
thickness: 2
})
registerFocusTrackerConfiguration(document.querySelector('header'), {
color: 'white'
})
startUserFocusTracker()
import { FocusTrackerRegistration } from '@michaeldrotar/react-focus-tracker/FocusTrackerRegistration'
import { UserFocusTracker } from '@michaeldrotar/react-focus-tracker/UserFocusTracker'
function App() {
return (
<FocusTrackerRegistration color="blue" thickness={2}>
<body style="background-color: white; color: black">
<FocusTrackerRegistration color="white">
<header style={{ backgroundColor: 'blue', color: 'white' }}>
<h1>Cool Stuff</h1>
<button>Get started</button>
</header>
</FocusTrackerRegistration>
<p>Lorem ipsum dolor sit amet...</p>
<button>Another button</button>
</body>
</FocusTrackerRegistration>
<UserFocusTracker />
)
}