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

Ensure keyboard focus is indicated visually

    Details

    • 12 status:
      Resolved
    • Previous Issue Keys:
      A11YTEST-273
    • Test Plan:
      Hide
      1. Using keyboard only (tab, space, enter, etc.), go to Resources.
      2. Select Actions > Upload Files.
      3. Use tab key to navigate to the Drop files to upload, or click here to browse button. Make sure visual focus is indicated by focus ring.
      4. Test in all browsers.
      Show
      Using keyboard only (tab, space, enter, etc.), go to Resources . Select Actions > Upload Files . Use tab key to navigate to the Drop files to upload, or click here to browse button. Make sure visual focus is indicated by focus ring. Test in all browsers.

      Description

      [Partially Fixed] - 3/18/2018

      It does receive focus. However, it does not have visual keyboard focus and as a result, screen reader users who can see the screen not able to track visual focus on the page and not able to activate the element.

      [Note: Earlier best practice was different for this issue]

      The "Upload Files" page of the Resources section of the environment provides a method for users to upload files of their own to the shared resources of Sakai. This is achieved by interacting with a file input control on the main page. However, this control cannot receive keyboard focus and currently relies solely on the use of a mouse to operate. As such, keyboard only users are unable to navigate to or activate the control.

      <form name="dropzone-form" action="http://qa03-sakai.marist.edu:8080/portal/site/e72d72d4-f582-4dce-8261-6b923060787c/tool/2f629dad-7e64-41c5-bb12-64d95eb17a15/sakai.resource.type.helper.helper?sakai_action=doPost&flow=save" class="dropzone dz-clickable" id="file-uploader"><input type="hidden" name="sakai_csrf_token" value="34b2d5489efb82c7670ee30f30849cb6e1f25ffa278386c91f50464b12af3550"><div class="dz-default dz-message">Drop files here to upload.</div></form>

      Developers must ensure that all actionable elements can receive keyboard focus. As this form is functioning as a file uploader (input type="file") the simplest solution is to utilize the standard HTML markup of <input type="file"> as this will provide the necessary keyboard support to allow the user to both navigate to and activate the control with the keyboard.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code