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

Avoid the sole use of device-dependent event handlers

    Details

    • Previous Issue Keys:
      A11YTEST-263

      Description

      [New] - 3/18/2018[Issue]None of the element in the text area is accessible by any of the assistive technologies users. It is accessible by mouse users only. Elements such as "B(bold)", "I (Italic)" and etc. Please reference screenshot.It has the following problem:- It has

      <a> element and provided the role of a button which is fine, however, there is no tabindex="0" and as a result, it does not receive keyboard focus.When there is hyperlink <a> used, it is necessary to use "href" which helps to receive keyboard focus. here, only <a> element is used but the actual role is a button and hence, there is no "href" which is ok and instead need to use tabindex="0".- It using mouse event handler "onfocus" and "onclick" which made to accessible by mouse only.[Code]<a id="cke_13" class="cke_button cke_button__bold cke_button_off" title="Bold (Ctrl+B)" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_13_label" aria-describedby="cke_13_description" aria-haspopup="false" onblur="this.style.cssText = this.style.cssText;" onkeydown="return CKEDITOR.tools.callFunction(2,event);" onfocus="return CKEDITOR.tools.callFunction(3,event);" onclick="CKEDITOR.tools.callFunction(4,this);return false;"><span class="cke_button_icon cke_button__bold_icon" style="background-image:url('http://qa03-sakai.marist.edu:8080/library/webjars/ckeditor/4.8.0/full/plugins/icons.png?t=HBDD');background-position:0 -24px;background-size:auto;"> </span>

      [Expected behavior]Developers must ensure that they use appropriate properties and equivalent event handlers for the keyboard so that element can receive keyboard focus and it can be accessible by keyboard users.Developers need to inspect entire section code since when tester applied tabindex and href then also it does not receive keyboard focus. Developers need to make sure all active elements receive visual and programmatic keyboard focus.Additionally, developers need to use corresponding keyboard event handlers.Following are some event handlers:Keyboard Event Handler:OnKeyPressOnKeyDownOnKeyUpOnFocusOnBlurOnKeyDownngKeypress (angular)Mouse Event HandlerOnClickOnMouseDownOnMouseUpOnMouseOverOnMouseOut OnDblClickng-click (angular)

        Gliffy Diagrams

          Attachments

            Activity

              People

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

                Dates

                • Created:
                  Updated:

                  Git Source Code