Instant Apps Custom CSS

[Tiff]

Hello! I am looking for support on learning custom CSS options for the Nearby Instant App.

These are some customizations we would like to have in our app. Would it be possible to:

1) Change the font size and bold text in some areas i.e., "Clear search location"

2) Change the background (secondary) color behind just the "Filter" button. We want to make this more apparent and easy to see.

3) Change the text in the filter widget to "Close Filter".

Any suggestions or help appreciated. I have only used custom CSS where Esri staff or others on this forum have suggested, so limited knowledge on this.

[Tiff]

Thank you again @KellyHutchins, I understand that. On that same topic, would you be able to share the code with me to change the text/wording of those buttons?

[KellyHutchins]

It's not a simple task using css only due to the fact that the filter is a component. It might be possible but it would be hacky and I haven't had time to dig into it yet. 

[Tiff]

Hello @KellyHutchins ! Thanks again for your help on these custom CSS in my nearby app.

I have a question about the "Zoom" text. I changed the visual text to "Zoom" instead of "Zoom to Feature" due to accessibility recommendations. Can I have the text be vertically aligned in the middle? I tried adding vertical-align: middle to the next line, but that did not work.

[KellyHutchins]

You should be able to align the button using this css

calcite-action.directions-button.left.calcite-mode-light.zoom-action:after {
   color:#007ac2;
    content: "Zoom";
    background: #fff;
    width: 80px;
    line-height:48px;
}

[Tiff]

Thanks so much! I used a combination of this and the previous CSS code and was able to achieve what I needed, plus making the font weight bold should help as well.

[Tiff]

Hi again @KellyHutchins, thanks so much for all your help. We received some accessibility testing for this same app and I have a few more questions that I wonder if are related to CSS or anything else we can do?

• Keyboard shortcuts allow you to navigate the map, as well as put in a search address. But you cannot manually place a pin on the map - is this possible using the keyboard only and not a mouse?
• For the distance slider, the only text that is displayed visually is the distance #. It was flagged that the slider is announced by its value, not by a title (when it comes to screen readers). Is it possible for us to give a title to the slider, such as "Search Distance"?
• Do you know anything about how screen readers interact with the app and if app creators may be able to fix it? For example, the x button on top right of the search instructions are announced as "Close" in the screen reader, but a recommendation was to have something like "Close instructions" instead.

Thank you very much. Any input or insight is appreciated!

[KellyHutchins]

• You can use the keyboard only to search for an location by an address. However if you want to manually place a pin on the map then you need to use a mouse. We are exploring options for positioning map locations on the map without the use of a mouse. 
• The last two issues are things we'll need to address in the app itself. We will look at this updates for the fall release of ArcGIS Online. 

[KellyHutchins]

@Tiff  we did some testing on the issue with your second bullet and we are not able to repro the accessibility violation with the slider. We tested with a screen reader and it reads out the "Search Distance Slider". I also took a look at the slider using the Accessibility developer tools in Chrome and the slider does have text associated along with the number. I've attached screenshots showing the output of Voice Over screen reader and the accessibility tools.