Instant App Accessibility - Keyboard Tab Color

[Tiff]

I am working on building an Instant App for a public-facing audience with accessibility in mind. I observed that when keyboard-tabbing through elements on the app, the keyboard tab color is a blue color. The color does not seem to be consistent with the theme colors I have set.

Is there a way to set the keyboard tab to align with the theme?

[KellyHutchins]

If the app you are using supports custom CSS you can try setting this value to the color of your choice. 

--calcite-color-focus

[Tiff]

Thanks @KellyHutchins. I wrote this: --calcite-color-focus:#000000; but it didn't seem to do anything. Any advice?

It also looks like the tab color is blue when it's an app element, but black when it's a text/hyperlinked element.

[KellyHutchins]

Try this

.calcite-mode-light{
 --calcite-color-focus:magenta;
}

Which app are you using?  You can set specific styles for the links using something like this: 

a{
outline-color:magenta;
}
a:focus{
outline-style:inset;
}

[Tiff]

@KellyHutchins this is very cool, thanks! I'm using both Sidebar and Nearby and it worked for both. Thanks also for mentioning accessibility - my Nearby app has an introduction window icon at the top right, and that is the only thing that would contrast the black outline with a green background (due to the theme). Is there a way I can isolate that one specifically to be a different color? Photo below.

Also, it looks like all of the elements now have a black tab color except for the map (still blue). Thank you again so much!

[KellyHutchins]

Also make sure to test the color contrast of the focus outline with your apps theming to ensure it continues to meet accessibility standards. 

[KellyHutchins · Accepted solution]

You can use the esri-view-outine-color to set the map outline color and you can use the #infoButton CSS here to set a different focus color for the info button 

.calcite-mode-light{
 --calcite-color-focus:magenta;
}

.esri-view{
--esri-view-outline-color:magenta;
}

#infoButton{
 --calcite-color-focus:yellow;
}