topic Re: Instant App Accessibility - Keyboard Tab Color in ArcGIS Instant Apps Questions

Instant App Accessibility - Keyboard Tab Color

Tiff — Fri, 18 Apr 2025 19:30:01 GMT

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?

Re: Instant App Accessibility - Keyboard Tab Color

KellyHutchins — Mon, 21 Apr 2025 16:17:50 GMT

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

--calcite-color-focus

Re: Instant App Accessibility - Keyboard Tab Color

Tiff — Mon, 21 Apr 2025 16:52:23 GMT

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.

Re: Instant App Accessibility - Keyboard Tab Color

KellyHutchins — Mon, 21 Apr 2025 17:36:51 GMT

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; }

Re: Instant App Accessibility - Keyboard Tab Color

KellyHutchins — Mon, 21 Apr 2025 17:45:57 GMT

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

Re: Instant App Accessibility - Keyboard Tab Color

Tiff — Mon, 21 Apr 2025 18:29:59 GMT

@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!

Re: Instant App Accessibility - Keyboard Tab Color

KellyHutchins — Mon, 21 Apr 2025 18:45:35 GMT

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; }