Popup button focus color

Jeff-Reinhart — Thu, 08 Feb 2024 15:12:44 GMT

How do I get the popup buttons to have the same outline color on focus using CSS only? Using version 4.28.

I was able to get the Dock button and the Zoom To button to a custom color on focus using:

calcite-action { --calcite-ui-focus-color: red; }

However, the Collapse and Close buttons are not affected.

Please see this codepen for example. When you click the map, the popup will appear and the title will be highlighted. Press the tab key to get to the Dock, Collapse, Close, and Zoom To. Dock and Zoom To will be red, Collapse and Close will be the stock blue.

I have tried multiple different selectors to style these buttons on focus but have been unsuccessful. I noticed that Dock and Zoom To are not in a shadow DOM (at least their calcite-action parents are not) while Collapse and Close are buried under two shadow roots each. I suspect this is the reason for the difficulty.

I have read @JoelBennett's post here and while that is some excellent work, it seems ridiculous to need JavaScript to get this simple styling done.

Re: Popup button focus color

ReneRubalcava — Thu, 08 Feb 2024 16:51:55 GMT

Try updating it from the :root of your css

:root { --calcite-ui-focus-color: red; }

That should do it, but it's global for everywhere that token is used, so keep that in mind.

Re: Popup button focus color

Jeff-Reinhart — Thu, 08 Feb 2024 17:27:39 GMT

That works for my example. I have a little more digging to do for the actual Angular implementation, but we can call this resolved. Thanks!

topic Re: Popup button focus color in ArcGIS JavaScript Maps SDK Questions

Popup button focus color

Re: Popup button focus color

Re: Popup button focus color