Uploaded image for project: 'Apps Development Framework'
  1. Apps Development Framework
  2. ADF-4830

DocumentList - sort state is not being announced

    Details

      Description

      "Table sort state is not being announced by the screen reader, but visually an arrow icon is toggled based on the user interaction
      Refer to
      1. Name
      2. Size
      3. Modified
      4. Modified by"

      "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 following techniques:
      1. Use the aria-sort attribute values of ""ascending"" or ""descending"" or ""none"" on the column header to indicate the sort state of the data in a sortable column. This technique also requires that role=""columnheader"" be added to the <th> element.

      <th role=""columnheader"" aria-sort=""descending"">
      <button class=""sortableColumnLabel"">Name</button>
      </th>

      2. Add CSS clipped (visually hidden) text to the sorting element to indicate the sorted state.

      <th>
      <div tabindex=""0"" role=""button"" id=""date-sort"">
      Date <span class=""sr-text"">sorted ascending</span>
      </div>
      </th>

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

      BACKGROUND:
      States and properties are attributes used to convey essential information about an element to screen readers and other assistive technologies. Some roles require certain state and property information - such as the checked/unchecked state of a checkbox. Native HTML elements provide those required states and properties, 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 states and properties using ARIA."

        TestRail: Results

          Attachments

            Issue Links

              Structure

                Activity

                  People

                  • Assignee:
                    Unassigned
                    Reporter:
                    bcilibiu Bogdan Cilibiu
                  • Votes:
                    0 Vote for this issue
                    Watchers:
                    2 Start watching this issue

                    Dates

                    • Created:
                      Updated:
                      Resolved:

                      TestRail: Cases

                        Structure Helper Panel