Uploaded image for project: 'Nuxeo Elements'
  1. Nuxeo Elements
  2. ELEMENTS-1536

Make remove selection button announced by screen reader in nuxeo-selectivity



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


      In web ui
      Open default search
      Add an author in the authors list
      => the remove button has no role or label
      Expected: button should have a role and label so that it can be conveyed by a screen reader

      Source Code
      <span class="selectivity-multiple-selected-item" data-item-id="inProcess"><a class="preserve-white-space selectivity-multiple-selected-item-remove"><span class="selectivity-remove"></span></a>In Process</span>

      The button is missing both a role and an accessible name/label.

      Element : Clear X button of every selected option in the following multi select combo boxes

      Location: Tags when viewing a document, authors or tag search in default search

      NVDA Is not narrating the Name and Role property of 'clear' button of each selected option under multi selected combo boxes.
      NVDA is narrating as
      ×In Process ×Completed
      when its focus is on ' Clear/Remove ×In Process' button and 'Clear/ Remove ×Completed' button.
      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:
      To fix this issue, BOTH a ROLE and a NAME must be provided for the button.

      Provide a ROLE by using one of the following techniques:
      1. Use a native HTML <button> element.

      <button>Apply now!</button>

      2. Add role="button" to the custom button container.

      <span role="button" class="apply-btn" aria-label="Apply Now!"></span>

      Provide a NAME by using any of the following techniques:
      1. Use the innertext of the <button> or role="button" element

      <button>Apply now!</button>

      <button class="apply-btn"><span class="sr-text">Apply now!</span></button>

      2. Use a non-empty aria-label attribute on the <button> or role="button" element.

      <button class="apply-btn" aria-label="Apply now!"></button>

      <span role="button" class="apply-btn" aria-label="Apply Now!"></span>

      Deque University: https://dequeuniversity.com/class/custom-widgets/concepts/name
      Deque University: https://dequeuniversity.com/class/custom-widgets/examples/button
      W3C ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-label

      Every user interface control must have a role to convey what type of control it is for screen reader and other assistive technology users. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) using ARIA as well as expected keyboard interactions.

      Buttons must have discernible text that describes the button's function or action for screen reader and other assistive technology users.


          Issue Links



              • Votes:
                0 Vote for this issue
                1 Start watching this issue


                • Created:

                  Time Tracking

                  Original Estimate - Not Specified
                  Not Specified
                  Remaining Estimate - 0 minutes
                  Time Spent - 6 hours