Description
Is your feature request related to a problem? Please describe.
There is WCAG 2.1 success criterion 2.4.7 (Focus Visible - Level A). Interactive elements are visually highlighted when they are in focus. (on a side note in the general settings in camunda the focus outline for the executable checkbox is close to invisible)
There isn't a similar success criterion in the WCAG for hover yet, but it is very convenient and it is lowering the cognitive load for the user to add style changes for interactive elements along the appropriate mouse pointer type changes. Hover styles help the user understand that one can interact with an element. This is particularly useful for people with learning impairments, cognitive disabilities, and limited computer literacy. In part that is already done in bpmn (i've cross checked Camunda and ECA in Drupal).
On hover you have style changes for the details toggle for the properties panel, the section toggles and checkboxes in the properties panel. for the toolbar there is only one nitpick. you are able to select one of the first four elements and make it active (a blueish outline) and on hover for any other of the toolbar elements you have another blueish outline. for one i am not sure if having more or less identical highlights is beneficial:
the other detail is that one of the two blues leads to a color contrast no meeting SC 1.4.11 which requires a color contrast of 3:1
https://contrast-ratio.com/#hsl%28205%2C%20100%25%2C%2050%25%29-on-hsl%28225%2C%2010%25%2C%2097%25%29 (color contrast 2.9)
https://contrast-ratio.com/#hsl%28205%2C%20100%25%2C%2045%25%29-on-hsl%28225%2C%2010%25%2C%2097%25%29. (color contrast 3.53)
in the bpmn model the icons in the context menu of an element have only a slight grayish background change. but that is hard to spot. and i am uncertain if it would make sense to change the style and highlight the bpmn element on hover. on a side note in camunda the buttons in the small toolbar in the lower right of the canvas dont have any changes on hover.
Describe the solution you'd like
one example from the drupal admin interface. that way the user has some sort of visual feedback where on the screen the cursor currently is. it eases the cognitive load tremendously.
Screen.Recording.2023-01-16.at.04.05.11.mov
-
for the properties panel it might be worth a thought to highlight the first row of a toggle section and not only the toggle on the right on hover. because you are able expand and collapse a section also by clicking the label of the toggle section or anywhere between the label and the toggle on the right within the whitespace.
for text fields i like the pattern that was used in the video which would be easily applicable for bpmn as well to change on hover from the grayish outline to a solid black one. -
for the toolbar it might be worth a thought to change the background of the element on hover and leave the blueish outline for the active element or the other way around.
-
for the bpmn model the mouse pointer changes over the different types of elements. but it might be still helpful to highlight the element itself. perhaps change the outline from solid black to another color? and in regards of the context menu use a more visible color as background color perhaps or instead change the color of the icon on hover?
and the suggested changes for the toolbar also apply to the tiny toolbar in the lower right in Camunda. one additional comment for the toolbar a blueish highlighting color is used while in this toolbar some orange style color is used.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.