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

Icon for Introduction Window Side Bar App missing Focus

MarionC

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.

This is my focus CSS:

:root, .calcite-mode-light {

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

Thanks!

Find more posts tagged with

Content Management

Accepted answers

All comments

khutchins

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;

MarionC

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.

khutchins

We have a fix for the focus issue for the info button and it will start working in Online within the next week. In records to the icon size I'm sorry for the confusion I didn't mean that the icon size was 24x24 rather the target (the button) is that size.

We do plan to add support for additional customization capabilities especially for mobile and increasing button size or optionally adding in a text label in a future release of Online so we'd love to hear feedback about specific things you've had to modify via HTML and CSS so we can provide configuration options to make this easier.

MarionC

I thought I had everything except icon size and focus corrected. Then the update. Now I no longer can set the color for hover and focus on zoom controls and home. Also, tab to the introduction window no longer works. I am trying hard to make this work, but these updates take away accessible functionality.

Suggestions:

Darker hover colors (customize) and a dark focus - light mode
Color options for widget backgrounds
High contrast icon and text - My preference is 7:1 or higher, 15:1 or higher is optimal. Or White on dark, black on light (simple fix).
At least 24px for icon sizes.
Customize widget text and headings, I use an 18px for heading, 16px for text.
All icons should have the option of adding a text description like sidebar app.
Screen reader support for the map, automatically speak the pop-up, and legend. This benefits visually impaired people but also those with other visual disorders and learning disabilities. Even though I can read, it can be difficult as I require reading glasses with an eye patch. This can be the case with people that have brain injuries or stroke. I happen to have Cerebellar Ataxia. Try looking at these apps and maps with only one eye, poor convergence, double and unsteady vision. VoiceOver and screen readers can give a relief. But they don't work properly in ESRI apps.
Allow for easy custom text for pop-up. I change everything to a 16px font for paragraphs and at least 18px for headings and icon text. Titles I keep at 24px.
Stop automatic adjusting HTML code, this is annoying as I don't know what I did wrong and can't correct. It even removes any accessible code like ARIA.
Keyboard support for map, I can't use keyboard to click symbols.
Select which tables to show.
Easier keyboard navigation, selection, and zoom to functions in tables. For instance, have a zoom to feature clearly visible in the table for a selection that can be easily tabbed to with a keyboard.
Not having to tab back and forth all the time to get a widget. How about keyboard shortcuts to table, legend, layer list, map, and search.
I have tremors and poor coordination and would love to use voice control. However, the map symbology doesn't exist in voice control, both mobile and computer. On Apple maps each symbol is numbered. Can we have an automated numbering system for visible symbols?

I really want better contrast, focus enhancements, customizable widget text, more prominent hovers, and actual screen reader support. Please keep in mind people like myself have tremors and poor coordination. On mobile devices it is difficult to hit small targets or buttons, even onscreen keyboards cause issues. Having voice control support would be great. I can always zoom in, but ESRI maps aren't great for zoom, for instance if zoomed in I might miss a pop-up, not see all information because of positioning, multiple windows for an experience builder app, or there are too many symbols. Simple UIs and only the important information works. Also, greater contrast between the basemap and symbology. No need for a high contrast basemap.

khutchins

Thank you for the detailed and helpful response we'll review this information.

In my test app I still see the custom focus and icon colors. Here's the url to a sidebar app that should have red icon colors and pink outline focus.

https://jsapi.maps.arcgis.com/apps/instant/sidebar/index.html?appid=95f26b9abb834827a168f628c08d9695

MarionC

I still have my icon colors and focus, except on the introduction window Icon. Also, I just use black text for everything and darker blue background for hover and focus that still keeps a good contrast with the black text. Unfortunately, the hover colors work for everything except Zoom controls, and the home button.

My focus should be for everything this darker blue with a dark focus. Except nothing for legend. Now legend has the custom hover.

But the color now disappears on the floating icons, and nothing for the "i".

Is there a way to just hide the Intro window icon and use only a details tab but keep the splash page?

khutchins

Can you send me all the custom CSS you are currently using? I want to make a reproducible test case so we can help you get the hover colors working again.

MarionC

Sorry but this is still not addressing the real issue of an icon for the introduction window not accessible with keyboard navigation. If I give out code, will it be looked at by a real human or fed to some stupid climate and human soul-destroying AI. I refuse to use anything that used a stupid AI bot to write or review.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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