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

Ensure all active elements receive keyboard focus

    XMLWordPrintable

    Details

      Description

      The Sakai Project or Component this issue was associated with is: PreferencesThe "Preferences" page of the environment provides a series of radio button groups that can be expanded or collapsed by activating the control placed on the text element titling the radio button group. However, these controls are created by placing an onclick event handler on a <legend> element, and do not receive keyboard focus. As such, a keyboard only user has no way of navigating to or activating the control.

      <fieldset><legend onclick="javascript:showHideDivBlock('options_form:typeOverride:0:decoItemDiv', '/library', 'sakai:announcement');" style="cursor:pointer"><img style="cursor:pointer" src="/library/image/sakai/collapse.gif" alt="Announcements" id="options_form:typeOverride:0:decoItemDiv__img_hide_division_">Announcements</legend>

      Developers must ensure that all active elements on the page can receive keyboard focus. As this element is a simulated control, it must be assigned <tabindex="0"> in order to draw keyboard focus. The following code is provided as an example:

      <fieldset><legend tabindex="0" onclick="javascript:showHideDivBlock('options_form:typeOverride:0:decoItemDiv', '/library', 'sakai:announcement');" style="cursor:pointer"><img style="cursor:pointer" src="/library/image/sakai/collapse.gif" alt="Announcements" id="options_form:typeOverride:0:decoItemDiv__img_hide_division_">Announcements</legend>

      http://qa03-sakai.marist.edu:8080/portal/site/~admin/tool/~admin-1125/noti#a0ff54fdfea287b3e030bc48d7626194-HTML

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  Unassigned
                  Reporter:
                  mclare Matt Clare
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  2 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code