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

Make each label unique for button to remove file during import

    Details

    • Type: Improvement
    • Status: Open
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: 3.0.6
    • Fix Version/s: None
    • Component/s: A11y

      Description

      Related to WCAG 2.1 level AA criteria 2.4.6
      https://www.w3.org/TR/WCAG21/#headings-and-labels

      Multiple buttons have the same labels/names but perform different actions. This is not conveyed via text associated with individual buttons.

      Elements:
      "Remove" button (X icon) adjacent to uploaded file names under "Import" tab

      Location:
      Modal appears upon activating the FAB button
      Recommendation to fix
      RULE :
      Labels MUST be meaningful.

      HOW TO FIX:
      Fix this issue by using ONE of the following techniques:
      1. Use an aria-label attribute to provide a complete programmatic label for the button.

      <button aria-label="Register for Class A: House training your puppy">Register</button>

      2. Use an aria-describedby attribute to associate visible text with the button to provide a complete description of the button purpose.

      <h3 id="class-a">Class A: House training your puppy</h3>
      .....

      <button aria-describedby="class-a">Register</button>

      3. Change the button label (both visible and programmatic) to provide a complete description of the button purpose.

      REFERENCE:
      Deque University: https://dequeuniversity.com/class/forms2/labels/meaningful

      BACKGROUND:
      When multiple buttons on a page have the same name but a different action, visual users may be able to tell the purpose of each button by its location on the screen or the content near it, but screen reader users may not be able to figure that out so easily. (For example, when there are multiple "Buy Me" buttons on the screen, which product will a particular button buy?) Buttons with the same name but different action can be differentiated programmatically without changing the visual appearance of the content. This will allow a screen reader user to understand what each button will do and avoid making mistakes.

        Attachments

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:

                  PagerDuty

                  Error rendering 'com.pagerduty.jira-server-plugin:PagerDuty'. Please contact your Jira administrators.