Enable settings by default

[MatzeKitt]

First of all: thank you for providing Sa11y! ❤️

I was curious whether there is a way to enable some settings by default. E.g. I want to automatically enable the contrast setting to also check this without having to first enable it manually by going into the settings. Besides manually setting the corresponding value into the local storage, is there any method to allow this? I couldn’t find any, unfortunately.

So my current workaround is:

new Sa11y();
localStorage.setItem( 'sa11y-remember-contrast', 'On' );

[adamchaboryk]

You're welcome, @MatzeKitt!! Thanks for the kind words. 🤠

Yes, the best way to do this would be to use props. The closest prop for this would be checkAllHideToggles, which will effectively turn all the toggleable checks on by default and would also hide their corresponding toggle in the Settings panel.

const sa11y = new Sa11y({
    checkAllHideToggles: true,
});

Please give this a try and let me know if this works for you!

[MatzeKitt]

Ah, I missed that. Works fine, thanks! 🙂

[adamchaboryk]

I like your idea about turning on some of those toggleable settings on by default. I think I'm going to make Contrast & Form Labels on by default for next release. Thank you for your request/feedback!!

[MatzeKitt]

Maybe you can also add a setting so that everyone can set a default for themself:

new Sa11y({
    defaultSettings: {
        contrast: true,
        labels: true,
        'links-advanced': false,
        readability: false,
        theme: window.matchMedia('(prefers-color-scheme: dark)'.matches ? 'dark' : 'light'
    }
});