Skip to content

Commit

Permalink
MDL-49811 lib: Added js to skiplinks
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@jinhofer
jinhofer committed Oct 5, 2015
1 parent fd57d68 commit 0b7856e
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 22 deletions.
30 changes: 15 additions & 15 deletions index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,9 +205,9 @@
$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'));
Expand All @@ -234,16 +234,16 @@
// 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'));
Expand All @@ -254,17 +254,17 @@
// 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'.

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'));
Expand All @@ -275,14 +275,14 @@
// 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'));
Expand All @@ -293,13 +293,13 @@
// 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'));
Expand All @@ -310,7 +310,7 @@
// 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:
Expand Down
14 changes: 14 additions & 0 deletions lib/javascript-static.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
};
9 changes: 6 additions & 3 deletions lib/outputrenderers.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1394,8 +1394,11 @@ public function block(block_contents $bc, $region) {
$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);
Expand Down Expand Up @@ -2960,7 +2963,7 @@ protected function render_paging_bar(paging_bar $pagingbar) {
* @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'));
}

/**
Expand Down
7 changes: 4 additions & 3 deletions lib/outputrequirementslib.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1537,12 +1537,13 @@ public function get_head_code(moodle_page $page, core_renderer $renderer) {
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();
Expand Down
3 changes: 2 additions & 1 deletion mod/choice/renderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -378,7 +378,8 @@ public function display_publish_anonymous_vertical($choices) {

$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;
Expand Down

0 comments on commit 0b7856e

Please sign in to comment.