Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
WCAG 2.4.7: The clickable elements within the content model do not have a visible focus indicator
I am focused on the Landing page node item - you can tell by the URL at the bottom of the screen. However, you can't tell just by looking at the screen:
Proposed resolution
Any clickable elements should have an indicator when it has focus.
Remaining tasks
User interface changes
API changes
Data model changes
| Comment | File | Size | Author |
|---|---|---|---|
| no-visible-focus.png | 123.99 KB | swirt |
Issue fork content_model_documentation-3345104
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
- 3345104-entity-diagram-clickable
changes, plain diff MR !13
1 hidden branch
Comments
Comment #2
swirtComment #3
KurtTrowbridgeI'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 theoutlineis transparent (I think because of something having to do with Windows High Contrast Mode). I'm not positive why thebox-shadowdoesn'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:focusand apply anoutline-colorthere. 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 theoutline-colorwith a value ofvar(--color-focus)for themes like Claro that provide that CSS variable, and a fallback tocurrentColorfor those that don't.Comment #5
KurtTrowbridgeComment #6
swirtThis 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.
Comment #7
swirtComment #9
swirtCrediting @flanneryla for raising this issue and @KurtTrowbridge for fixing it.
Comment #11
swirtClosing 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
Comment #13
swirtReleased as part of https://www.drupal.org/project/mermaid_diagram_field/releases/1.0.2