From 0b7856efbe637043a0e4eeb473bd118af8bf778c Mon Sep 17 00:00:00 2001 From: jinhofer Date: Wed, 19 Aug 2015 11:05:07 -0500 Subject: [PATCH] MDL-49811 lib: Added js to skiplinks I have added a JS module to handle skiplinks to send the focus to the end of the block. This improves the function and allows the user to better tab through the page. --- index.php | 30 +++++++++++++++--------------- lib/javascript-static.js | 14 ++++++++++++++ lib/outputrenderers.php | 9 ++++++--- lib/outputrequirementslib.php | 7 ++++--- mod/choice/renderer.php | 3 ++- 5 files changed, 41 insertions(+), 22 deletions(-) diff --git a/index.php b/index.php index 8e218cd5d3d..ad5dbb33ece 100644 --- a/index.php +++ b/index.php @@ -205,9 +205,9 @@ foreach (explode(',', $frontpagelayout) as $v) { $newsforumcontext = context_module::instance($newsforumcm->id, MUST_EXIST); $forumname = format_string($newsforum->name, true, array('context' => $newsforumcontext)); - echo html_writer::tag('a', + echo html_writer::link('#', get_string('skipa', 'access', core_text::strtolower(strip_tags($forumname))), - array('href' => '#skipsitenews', 'class' => 'skip-block')); + array('data-target' => '#skipsitenews', 'class' => 'skip-block skip')); // Wraps site news forum in div container. echo html_writer::start_tag('div', array('id' => 'site-news-forum')); @@ -234,16 +234,16 @@ foreach (explode(',', $frontpagelayout) as $v) { // End site news forum div container. echo html_writer::end_tag('div'); - echo html_writer::tag('span', '', array('class' => 'skip-block-to', 'id' => 'skipsitenews')); + echo html_writer::tag('span', '', array('class' => 'skip-block-to', 'id' => 'skipsitenews', 'tabindex' => '-1')); } break; case FRONTPAGEENROLLEDCOURSELIST: $mycourseshtml = $courserenderer->frontpage_my_courses(); if (!empty($mycourseshtml)) { - echo html_writer::tag('a', + echo html_writer::link('#', get_string('skipa', 'access', core_text::strtolower(get_string('mycourses'))), - array('href' => '#skipmycourses', 'class' => 'skip-block')); + array('data-target' => '#skipmycourses', 'class' => 'skip skip-block')); // Wrap frontpage course list in div container. echo html_writer::start_tag('div', array('id' => 'frontpage-course-list')); @@ -254,7 +254,7 @@ foreach (explode(',', $frontpagelayout) as $v) { // End frontpage course list div container. echo html_writer::end_tag('div'); - echo html_writer::tag('span', '', array('class' => 'skip-block-to', 'id' => 'skipmycourses')); + echo html_writer::tag('span', '', array('class' => 'skip-block-to', 'id' => 'skipmycourses', 'tabindex' => '-1')); break; } // No "break" here. If there are no enrolled courses - continue to 'Available courses'. @@ -262,9 +262,9 @@ foreach (explode(',', $frontpagelayout) as $v) { case FRONTPAGEALLCOURSELIST: $availablecourseshtml = $courserenderer->frontpage_available_courses(); if (!empty($availablecourseshtml)) { - echo html_writer::tag('a', + echo html_writer::link('#', get_string('skipa', 'access', core_text::strtolower(get_string('availablecourses'))), - array('href' => '#skipavailablecourses', 'class' => 'skip-block')); + array('data-target' => '#skipavailablecourses', 'class' => 'skip skip-block')); // Wrap frontpage course list in div container. echo html_writer::start_tag('div', array('id' => 'frontpage-course-list')); @@ -275,14 +275,14 @@ foreach (explode(',', $frontpagelayout) as $v) { // End frontpage course list div container. echo html_writer::end_tag('div'); - echo html_writer::tag('span', '', array('class' => 'skip-block-to', 'id' => 'skipavailablecourses')); + echo html_writer::tag('span', '', array('class' => 'skip-block-to', 'id' => 'skipavailablecourses', 'tabindex' => '-1')); } break; case FRONTPAGECATEGORYNAMES: - echo html_writer::tag('a', + echo html_writer::link('#', get_string('skipa', 'access', core_text::strtolower(get_string('categories'))), - array('href' => '#skipcategories', 'class' => 'skip-block')); + array('data-target' => '#skipcategories', 'class' => 'skip skip-block')); // Wrap frontpage category names in div container. echo html_writer::start_tag('div', array('id' => 'frontpage-category-names')); @@ -293,13 +293,13 @@ foreach (explode(',', $frontpagelayout) as $v) { // End frontpage category names div container. echo html_writer::end_tag('div'); - echo html_writer::tag('span', '', array('class' => 'skip-block-to', 'id' => 'skipcategories')); + echo html_writer::tag('span', '', array('class' => 'skip-block-to', 'id' => 'skipcategories', 'tabindex' => '-1')); break; case FRONTPAGECATEGORYCOMBO: - echo html_writer::tag('a', + echo html_writer::link('#', get_string('skipa', 'access', core_text::strtolower(get_string('courses'))), - array('href' => '#skipcourses', 'class' => 'skip-block')); + array('data-target' => '#skipcourses', 'class' => 'skip skip-block')); // Wrap frontpage category combo in div container. echo html_writer::start_tag('div', array('id' => 'frontpage-category-combo')); @@ -310,7 +310,7 @@ foreach (explode(',', $frontpagelayout) as $v) { // End frontpage category combo div container. echo html_writer::end_tag('div'); - echo html_writer::tag('span', '', array('class' => 'skip-block-to', 'id' => 'skipcourses')); + echo html_writer::tag('span', '', array('class' => 'skip-block-to', 'id' => 'skipcourses', 'tabindex' => '-1')); break; case FRONTPAGECOURSESEARCH: diff --git a/lib/javascript-static.js b/lib/javascript-static.js index 349d7ebfa05..1c75dddba36 100644 --- a/lib/javascript-static.js +++ b/lib/javascript-static.js @@ -1828,3 +1828,17 @@ M.util.load_flowplayer = function() { document.getElementsByTagName('head')[0].appendChild(fileref); } }; + +/** + * Initiates the listeners for skiplink interaction + * + * @param {YUI} Y + */ +M.util.init_skiplink = function(Y) { + Y.one(Y.config.doc.body).delegate('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + Y.one(this.getAttribute('data-target')).focus(); + return true; + }, 'a.skip'); +}; diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php index 435dec20308..2fd25f290f0 100644 --- a/lib/outputrenderers.php +++ b/lib/outputrenderers.php @@ -1394,8 +1394,11 @@ class core_renderer extends renderer_base { $output = ''; $skipdest = ''; } else { - $output = html_writer::tag('a', get_string('skipa', 'access', $skiptitle), array('href' => '#sb-' . $bc->skipid, 'class' => 'skip-block')); - $skipdest = html_writer::tag('span', '', array('id' => 'sb-' . $bc->skipid, 'class' => 'skip-block-to')); + $output = html_writer::link('#', get_string('skipa', 'access', $skiptitle), + array('class' => 'skip skip-block', 'id'=>'fsb-' . $bc->skipid, + 'data-target' => '#sb-'.$bc->skipid)); + $skipdest = html_writer::span('', 'skip-block-to', + array('id' => 'sb-' . $bc->skipid, 'tabindex' => '-1')); } $output .= html_writer::start_tag('div', $bc->attributes); @@ -2960,7 +2963,7 @@ EOD; * @return string the HTML to output. */ public function skip_link_target($id = null) { - return html_writer::tag('span', '', array('id' => $id)); + return html_writer::span('', '', array('id' => $id, 'tabindex' => '-1')); } /** diff --git a/lib/outputrequirementslib.php b/lib/outputrequirementslib.php index 85fb41464df..85f86a7c2e7 100644 --- a/lib/outputrequirementslib.php +++ b/lib/outputrequirementslib.php @@ -1537,12 +1537,13 @@ class page_requirements_manager { public function get_top_of_body_code() { // First the skip links. $links = ''; - $attributes = array('class'=>'skip'); + $attributes = array('class' => 'skip'); foreach ($this->skiplinks as $url => $text) { - $attributes['href'] = '#' . $url; - $links .= html_writer::tag('a', $text, $attributes); + $attributes['data-target'] = '#'.$url; + $links .= html_writer::link('#', $text, $attributes); } $output = html_writer::tag('div', $links, array('class'=>'skiplinks')) . "\n"; + $this->js_init_call('M.util.init_skiplink'); // YUI3 JS needs to be loaded early in the body. It should be cached well by the browser. $output .= $this->get_yui3lib_headcode(); diff --git a/mod/choice/renderer.php b/mod/choice/renderer.php index f07b6a81519..87404d16f4a 100644 --- a/mod/choice/renderer.php +++ b/mod/choice/renderer.php @@ -378,7 +378,8 @@ class mod_choice_renderer extends plugin_renderer_base { $header = html_writer::tag('h3',format_string(get_string("responses", "choice"))); $html .= html_writer::tag('div', $header, array('class'=>'responseheader')); - $html .= html_writer::tag('a', get_string('skipresultgraph', 'choice'), array('href'=>'#skipresultgraph', 'class'=>'skip-block')); + $html .= html_writer::link('#', get_string('skipresultgraph', 'choice'), + array('data-target' => '#skipresultgraph', 'class'=>'skip skip-block')); $html .= html_writer::tag('div', html_writer::table($table), array('class'=>'response')); return $html; -- 2.11.4.GIT