Remove or customize the accessibility styling on elements

[therealokoro]

So I get the fact that Chakra UI is built with accessibility in mind. But to be honest the styling giving to elements on focus(a box shadow) doesn't really look good in all cases. In my case i'd like to either remove it or possibly customize it to look more like my brand design. I've seen a few solutions online for this, but none worked for me.

I've tried overwriting the style using css

*:focus{ box-shadow: 0 !important; }

But the code above is ignored. I also saw a solution for react using some npm package on focus, but of course that was a solution for react.

I love Chakra UI so much. Because I see as a building block in creating useful components. My only drawback right now is not being able to either remove the accessibility visuals or atleast customizing them to my taste.

I'd appreciate a possible walkaround for this. Thank you in advance 😊😊

Desktop

• OS: Windows 10
• Browser: Chrome
• Version: Latest

[codebender828]

Hi @REDEAKAA ! How are you doing? I understand you'd like to modify the base styling for the focus styles.

One possible way you could try is to modify the theme object in chakra UI.

On this demo I modified the focus styles to match those of Slack's theme colors.

Here's how to do it in Chakra UI Vue. https://codesandbox.io/s/customize-focus-styles-in-chakra-ui-vue-qko53?file=/src/main.js:152-1042

[codebender828]

@REDEAKAA Take note however that modifying this will change the focus styles of most components

[therealokoro]

Okay so, i've tried the fix you gave, but it still doesn't work, though this time i believe it'll have to do with extending the theme. Am using chakra UI in a nuxt.js project. And in a file inside a folder on the root of my app, i export an object holding both the extendTheme option and config option. I import this into my nuxt.config.js and set it to the chakra option. Now the config works, as am able to use the auto-import feature, but nothing in my extendTheme object works.

See my chakra config file below

export default {
	extendTheme: {
		fonts: {
			heading:
				'Prompt Black, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
			body:
				'Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
		},
		shadows: {
			/**
			 * Modifying this will change the focus styles of most components
			 */
			// outline: "0 0 0 3px rgb(91 29 98 / 58%)"
			outline: "0"
		},
		colors: {
			brand: {
				100: '#dbeaff',
				200: '#c7ddff',
				300: '#adceff',
				400: '#85b6ff',
				500: '#3d8bff',
				'main': '#0066ff'
			}
		}
	},
	config: {
		autoImport: true
	}
}

[codebender828]

Okay. I'm unable to see why it won't work from here. Do you think you can provide a reproduction from codesandbox?