Entity Diagram: Clickable elements do not have a visible focus indicator

I've been poking at this a little bit tonight, and I think it's an issue specific to the way the Claro theme (and probably others based on it, like Gin) handles focus indicators—the typical green outline visible when focusing on an element in Claro is actually a box-shadow, and the outline is transparent (I think because of something having to do with Windows High Contrast Mode). I'm not positive why the box-shadow doesn't show up, but assume it has something to do with the <a> element being within an <svg> element.

If I switch to another admin theme (I switched to Umami; it's meant to be a front-end theme, but still illustrated what I needed), I do see focus indicators when tabbing through the diagram elements.

Anyway, a possible solution could be to target .mermaid svg a:focus and apply an outline-color there. I wonder if that might be more suitable in the Mermaid Diagram Field module, so feel free to move this there if you'd like and I can provide a new MR, but I'll include one that adds the outline-color with a value of var(--color-focus) for themes like Claro that provide that CSS variable, and a fallback to currentColor for those that don't.

This is awesome @KurtTrowbridge thank you so much for working on it. I think you are right, this issue was created before I broke out the Mermaid handling into its own module. I will try to move this issue there. If I can't, I will just apply your change to that module, no need for you to create an additional PR.

I should be able to make this happen today. Cheers.

swirt → credited flanneryla → .

Crediting @flanneryla for raising this issue and @KurtTrowbridge for fixing it.

Closing this as fixed.
I added a setting of the outline size because on larger diagrams the outline is barely visible.
This will go out with 1.0.2

Thanks again @KurtTrowbridge and @flannerla

swirt → closed merge request !13

Released as part of https://www.drupal.org/project/mermaid_diagram_field/releases/1.0.2 →