nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Encontre mais publicações marcadas com

Accepted answers

khutchins

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

All comments

khutchins

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

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!

khutchins

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

khutchins

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

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.

khutchins

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

--calcite-color-focus

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.