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

Remove from favorites button should have a role and label

    XMLWordPrintable

    Details

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

      Description

      Add a document to favorites
      Open the favorites panel from the drawer
      => The remove button for the favorite is missing a role and label, preventing a screen reader to convey its purpose and name

      Expected: button should have a role and name

      __________________

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

      Element Name:
      -"Remove" button

      Location of the element: Present inside the "Favorites" 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>

      REFERENCE:
      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

      BACKGROUND:
      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.

        Attachments

          Activity

            People

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

              Dates

              • Created:
                Updated:
                Resolved:

                Time Tracking

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 5 hours
                5h