Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4950

Improve accessibility of the buttons in a caption

XMLWordPrintable

    • Icon: New Feature New Feature
    • Resolution: Done
    • Icon: Normal Normal
    • 9.6.0
    • 9.5.1.3
    • None
    • Security Level: Jimmy

      User Story


      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.

      Acceptance Criteria

      put buttons/icons in a caption is a common requirement, so it's better to avoid nested UI controls.

      Details

      • 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.*

      groubox

      west

      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.

      Proposed solution

      • 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

        1. axeDevtool.jpg
          152 kB
          hawk
        2. voiceOver.jpg
          41 kB
          hawk
        3. west.jpg
          146 kB
          hawk

            rudyhuang rudyhuang
            hawk hawk
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 1 day
                1d
                Remaining:
                Time Spent - 6 hours Remaining Estimate - 2 hours
                2h
                Logged:
                Time Spent - 6 hours Remaining Estimate - 2 hours
                6h