Uploaded image for project: 'Nuxeo Web UI'
  1. Nuxeo Web UI
  2. WEBUI-906

Queue view during search should narrate the selected item to the screen reader

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Resolved
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 3.0.15
    • Fix Version/s: 3.0.17
    • Component/s: A11y

      Description

      In web ui
      Trigger a search
      Switch to queue view
      Select an item in the list
      => Screen reader doesn't narrate the item as selected

      Expected: selected item should leverage the aria-expanded property, and this property should be kept in sync with the UI.

      ______________________________
      Source Code
      <div class="list-item-info">
      <div class="vertical layout center">
      <nuxeo-document-thumbnail></nuxeo-document-thumbnail>
      </div>
      <span class="list-item-title ellipsis">000291</span>
      </div>

      Description
      The expand/collapse state of a toggle-type element is missing or is used incorrectly.

      Element Name:
      Select item under Queue view

      Location:
      Homepage-> Select Search from Left Navigation-> Select 'Switch to Queue view'

      NVDA is not narrating the state as 'Selected' for the list of options in Queue pane
      Recommendation to fix
      RULE :
      The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

      HOW TO FIX:
      Fix this issue by using the aria-expanded attribute on the actionable toggle element (e.g. the <button> element) with a value of "true" (when the section is expanded) or "false" (when the section is collapsed).

      <h3><button aria-expanded="true">When will I receive my refund?</button></h3>
      <div class="faq-expanded">You should receive your refund within 5 business days....</div>

      REFERENCE:
      W3C ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-expanded

      BACKGROUND:
      The aria-expanded attribute is placed on the toggle element (not the content that is hidden/shown).

        Attachments

          Activity

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: