[arcgis js api 4.*] remove blue frame/outline around MapView

[DivisionSIG]

Since javascript API vV4.* there is a blue outline around the map, when we interact with the view.

You can see this on the sample app https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html Just move the map and you'll notice that blue outline around the view.

Do you know how to remove or disable that feature ?

thank you all

[RobertScheitlin__GISP · Accepted solution]

Focus rectangles are an important part of accessibility. But if you really want to remove it anyway.

.esri-view .esri-view-surface--inset-outline:focus::after {
  outline: none !important;
}‍‍‍

[DivisionSIG]

thank you, it worked

[MiroslavUmlauf]

Indeed it stopped working due to change of DOM inside view from version 4.26 to 4.27. Updated CSS adjusted by this change:

.esri-view .esri-view-surface--touch-none:focus::after {
  outline: none !important;
}

[SebastianKrings]

does not seem to work anymore in 5.x, any new idea?

[miro_aus]

Adjusted for version 5.0.

.esri-view .esri-view-surface:focus::after,
.esri-view .esri-view-surface:focus-visible::after {
  outline: none !important;
}

 Just a small accessibility note: while removing the focus outline may look better visually, it can make keyboard navigation less accessible. Keeping some subtle visible focus indicator is usually a better approach.

.esri-view .esri-view-surface:focus::after,
.esri-view .esri-view-surface:focus-visible::after {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: -4px;
}

[Sage_Wall]

If / when you migrate to use the arcgis-map component, we added a css variable to change the focus color.  If you are not concerned about accessibility you could set it to be transparent

    arcgis-map {
      --arcgis-view-color-focus: transparent;
    }

[SebastianKrings]

Hi, thanks.
That does work.
Accessability is a thing, yes, but the permanent toggling of the Map-Frame, when doing different interactions with tools, was irritating pretty much.