Security Level: Jimmy
As an application developer, I want to put buttons in a caption of a groupbox, but groupbox caption has role="button", so the buttons inside become nested UI controls.
put buttons/icons in a caption is a common requirement, so it's better to avoid nested UI controls.
- test case 1
<groupbox> <caption>my caption <button label="b1"/> <button label="b2"/></caption> button in caption. </groupbox>
- test case 2
<borderlayout> <west collapsible="true" > <caption>my caption in west <button label="b1"/> <button label="b2"/></caption> </west> </borderlayout>
axe DevTool reports the accessibility issue: *Nested interactive controls are not announced by screen readers.*
buttons are under <div id="z_2-cap" class="z-west-header" role="button" tabindex="0" aria-expanded="true">
- mac VoiceOver and ChromeVos still can read those buttons in the caption. But I think screen readers don't always follow the strictest WCAG rule.
- Add a UI control (e.g. a button or an icon) to open/close a groupbox instead of the whole caption.
- add a UI control (e.g. a button or an icon) to expand/collapse a west instead of the whole .z-west-header