Select to view content in your preferred language

Icon for Introduction Window Side Bar App missing Focus

73
2
yesterday
Labels (1)
MarionC
Emerging Contributor

I am using a custom CSS to add focus to all elements in my side bar app. This has been achieved for all elements except for the "introduction window" icon on the main page. The home button works but if I use focus on the info, it doesn't show.

For my own accessibility needs I require focus, so this is not just for public users but also a personal need. I have to make this work. Same with icon size, they are too small (need to be at least 24px), and I need to turn zoom on to see them.

MarionC_0-1750877016715.png

MarionC_1-1750877091847.png

 

This is my focus CSS:

:root, .calcite-mode-light {

--calcite-icon-color:#000000;
--calcite-color-focus: #1C1C6D;
}

 

Thanks!

 

0 Kudos
2 Replies
KellyHutchins
Esri Frequent Contributor

The outline issue is a bug in the Sidebar app we'll work on a fix for that issue. Currently the target for the buttons on the map are 32x32 so they meet the target size requirements here: 

https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

 

You could update the icon color using this if changing the color would help?

--calcite-icon-color:red;

 

 

0 Kudos
MarionC
Emerging Contributor

I know how to change the icon color, from the poor contrast ESRI has as default to the highest contrast. The icon size is too small and it's not 24x24 because I was able to change some of the icons in the Media App but not all and they got larger. Please update the icon size (zoom, search, home, info, etc).  Not having a focus on even one icon is unacceptable, and I know because I rely on keyboard navigation and focus. 

I am physically disabled, neurodivergent, and I have neuro-visual disorders, please don't tell me your apps are accessible, they aren't, especially for mobile. I have to customize everything just to get them to work for me or now use them at all.  It would also help if everything was easy to customize. All text in pop-ups, headings on widgets, widget text, everything has to be changed through custom CSS or html before I can actually use an app. Please fix this as soon as possible.

0 Kudos