Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-78054

Create a New Page - Blank Page: Button is missing both a role and a name

    XMLWordPrintable

Details

    Description

      Issue Summary

      The button is missing both a role and an accessible name/label.
      Element:
      1) "invite people to edit" button.

      Location:
      This is present next to "Draft".

      Issue id: 725313

      Expected Results

      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 ONE of the step 1 AND using an aria-label attribute on the element.
      1.a. Use a native HTML <button> element.

      <button>Apply now!</button>

      1.b. Add role="button" to the custom button container.

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

      2. Add an aria-label attribute on the element.

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

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

      REFERENCE: 
      W3C HTML5 Recommendation: https://www.w3.org/TR/html5/sec-forms.html#the-button-element
      Deque University: https://dequeuniversity.com/class/custom-widgets2/examples/button
      Deque University: https://dequeuniversity.com/class/custom-widgets2/concepts/name
      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.

      Actual Results

      Issue 725313: https://axeauditor.dequecloud.com/api/v1/file/abd726d0-4ebc-11ec-af91-3351b50d9dd6 

      Create new page - blank page: https://axeauditor.dequecloud.com/api/v1/testrun-unit-screenshot/8bf0f41c-50c5-11ec-a77b-a747481f46ce 

      Workaround

      Currently there is no known workaround for this behavior. A workaround will be added here when available

      Attachments

        Issue Links

          Activity

            People

              607d03f48037 Kostiantyn Smolenskyi (Inactive)
              4b5b126a48d0 ssuryavanshi
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: