DMN Overlay buttons must have discernible text - Githubissues

bpmn-io / dmn-js

View and edit DMN diagrams in the browser.

https://bpmn.io/toolkit/dmn-js/

Other

288 stars 137 forks source link

DMN Overlay buttons must have discernible text #842

Closed vpellegrino closed 3 months ago

vpellegrino commented 4 months ago

Describe the Bug

The buttons used for navigating from the DRD to the Decision Table or the Literal Expression definitions must have text that describes their purpose.

Axe recommendation: To solve this problem, you need to fix at least (1) of the following:

Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"

My suggestion is to just add a title attribute to the buttons, with a small explanation of the button purpose (e.g. title="Navigate to the Decision Table definition").

Steps to Reproduce

Steps to reproduce the behavior:

Open the DMN editor (for example, on the Web Modeler)
Create a new Decision Table/Literal Expression
Execute the page scan, by using the "axe DevTools" extension

Expected Behavior

The axe scan reports no accessibility issue related to the overlay buttons.

Environment

Please complete the following information:

Browser: Chrome
OS: MacOS
Library version: Library version: current one (reproducible on https://demo.bpmn.io/dmn/new)

vpellegrino commented 4 months ago

@nikku, feel free to include this one in https://github.com/bpmn-io/internal-docs/issues/909

vpellegrino commented 4 months ago

@barmac was this issue fixed too with this bump?

barmac commented 4 months ago

Correct, this is supposed to be fixed in v16.1.0

nikku commented 3 months ago

Fixed, cf. https://github.com/bpmn-io/dmn-js/issues/842#issuecomment-2039516080.