Uploaded image for project: 'stripes-components'
  1. stripes-components
  2. STCOM-703

Filter headings are not descriptive when using a screenreader

    XMLWordPrintable

    Details

    • Template:
    • Sprint:
      EPAM-Veg Sprint 91, EPAM-Veg Sprint 92
    • Story Points:
      2
    • Development Team:
      Vega

      Description

      1. use NVDA
      2. Go to Requests App
      3. Navigate the filter headings

      Actual outcome: When using a screenreader the headers are not descriptive

      Expected outcome: The screenreader reads the labels that display

      See code:

      <h3 class="headline---jFsYs size-small---15mum margin-small---23EO2 font-weight-bold---2bOyO"><button type="button" tabindex="0" aria-label="[object Object] filter list" aria-controls="accordion62" aria-expanded="true" class="filterSetHeader---VZHca interactionStyles---3DsW3 boxOffsetStartMedium---NIHb0 header---AM0aA clearButtonVisible---2w4Nl boxOffsetEndSmall---2n1YL" role="tab" id="accordion-toggle-button-requestType"><span class="icon---1LZSj" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="stripes__icon filterSetHeaderIcon---2QZnJ icon-caret-up small---3E3eK" focusable="false"><path d="M14.7 9.4L4.9 19c-.8.8-.8 2 0 2.8s2 .8 2.8 0l8.4-8.2 8.2 8.2c.8.8 2 .8 2.8 0s.8-2 0-2.8l-9.6-9.6c-.9-.8-2.1-.8-2.8 0z"></path></svg></span><div class="labelArea---3MNZj"><div>Request type</div></div></button></h3>
      

      Attached is a screencast

      And I think this issue violates 3.3.2 Labels or Instructions (Level A) - http://www.w3.org/TR/WCAG20/#minimize-error-cues

        TestRail: Results

          Attachments

            Activity

              People

              Assignee:
              annamelnyk Anna Melnyk
              Reporter:
              kgambrell Khalilah Gambrell
              Tester Assignee:
              Khalilah Gambrell Khalilah Gambrell
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  TestRail: Runs

                    TestRail: Cases