Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-38309

Ensure all active elements receive keyboard focus

    Details

    • Previous Issue Keys:
      A11YTEST-261

      Description

      [New] - 3/16/2018

      [Issue]

      Active tab (for example in the screenshot "My profile" is active tab) does not receive keyboard focus at all. Since when it is activated, it implemented as regular text with title in <span> which is incorrect.

      [User Impact]

      Screen reader users never get to know that which active tab elements they are rendering.

      [Code]

      <span class="current" title="View and edit your profile"><span>My profile</span></span>

      [Expected behavior]

      Developers need to make sure that elements which behaves as tab feature, have proper role of tab, tablist, tabpanel with appropriate properties that which tab is selected currently. Developers can use "aria-selected" property for the activated tab.Here, developers need to remove <span> and implement as TAB.

      [Reference link]

      https://www.w3.org/TR/wai-aria/#tab
      https://www.w3.org/TR/wai-aria/#tablist
      https://www.w3.org/TR/wai-aria/#tabpanel
      https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
      https://www.w3.org/TR/wai-aria-1.1/#aria-selected

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                jonespm Matthew Jones
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:

                  Git Source Code