bpmn-io / properties-panel

Library for creating bpmn-io properties panels.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Improve the extension properties badge

rpkoller opened this issue · comments

Is your feature request related to a problem? Please describe
If you tab through the properties panel in voiceover in safari 16.1 on macos 12.6.1 the badge counting the created number of extension properties is not announced and gets unnoticed by the user:

Screen.Recording.2023-01-16.at.11.06.19.mov

if you step through the properties granularly by ctrl-option-arrow right only the text wrapped by the div (2) is announced instead of the title list contains 2 items.

Screen.Recording.2023-01-16.at.11.06.52.mov

similar to #210 list contains 2 items is sort of missing a context in particular if someone has a small working memory.

Describe the solution you'd like

to provide more context the title could be changed to something like 2 extension properties to be more in line with the toggle section label and front load the most important information with the number of extension properties created and afterwards providing the context by appending the toggle section label.

In regards of the aural interface i am not sure. a div is not an interactive element and therefore it doesn't work to add something like an aria-label. i wonder if you take the suggestion with the details and the summary element in #209 the number of available extension properties there announcing something like Extension properties, 2 properties available

wrap the 2 properties available in a span and the properties available in another visually hidden span (<span>2<span class="visually-hidden"> properties available</span></span>). that way the 2 could be styled like it currently is, while the screen reader user would get the complete context with the toggle section title and that the section has a number of x extension properties created.

Describe alternatives you've considered

Additional context

Thanks for opening the issue. Indeed this is a problem that we should fix.