Closed BrianJVarley closed 9 months ago
Hi, thanks for opening this PR and sorry that you had to wait for so long. I will look into this today.
I just noticed that we set the icon DOM element to be a button even if it's not clickable. I will fix that.
OK I played a bit with CSS, and also made sure that we display span
and not button
if the drilldown icon is not interactive. Before we merge this, I'd love to gather feedback from the bpmn.io team.
I built a demo website which can be accessed at https://dmn-js-a11y-demo.netlify.app/
https://github.com/bpmn-io/dmn-js/assets/28307541/f1fa3ea9-a40f-45c4-83b8-8d6e3fad52bf
[X-Posting from Slack for transparency]
The Focus has little contrast on the DRD, I think. For the first iteration, this is absolutely fine (still better than what we had before), but we could consider changing it in a follow up
I had a look how Github does it for dark buttons, and they add a white border around the blue outline. Not sure if this is something we want to do
I tested this additionally on Firefox, and the focus there is even harder to notice.
What we need to remember is that this PR is just a first step. We can do much more for the accessibility of the tools. For example, the a11y tools don't announce the element which is focused. However, I think it's still better to have some improvement than no-solution as it is without this contribution.
Increase outline offset looks good on Firefox:
https://github.com/bpmn-io/dmn-js/assets/28307541/b0ffa88b-2c52-4bfd-8c37-77df705b1fba
and in Chrome:
https://github.com/bpmn-io/dmn-js/assets/28307541/557d4ec2-0fba-4a75-be44-298a0cd93428
Thank you for raising the accessibility issue, @marstamm . I think there are three ways we could address it:
Otherwise, this looks good to me.
Thanks @BrianJVarley for initiating this and everybody else for feedback! :)
[X-Posting from Slack for transparency]
The Focus has little contrast on the DRD, I think. For the first iteration, this is absolutely fine (still better than what we had before), but we could consider changing it in a follow up
I had a look how Github does it for dark buttons, and they add a white border around the blue outline. Not sure if this is something we want to do
![]()
@marstamm @barmac I've noticed also using screen reader that the view / hide DRD buttons don't have an aria-label. I think it would improve the accesibility to label these buttons also for example "Show DRD" / "Hide Diagram"
Thanks for the feedback. Indeed, right now the user does not hear what the button action is. This could be something like View decision table/literal expression of {name}.
ViewDrd
: Remove button outline style override, allow native browser focus style to be applied on focusDrillDown
: Change element type to -button
to allow keyboard focus and capture ENTER key event to trigger drilldown.Closes #778 (💡 Discussion in progress & tests needed)