Skip to content
This repository has been archived by the owner on Dec 2, 2022. It is now read-only.

Commit

Permalink
Fix: Apply 'aria-hidden="true"' to FontAwesome icons as much as possi…
Browse files Browse the repository at this point in the history 
…ble. Still a few 'content' CSS attributes to consider.
  • Loading branch information
@gjb2048
gjb2048 committed Mar 12, 2016
1 parent a45f2b5 commit f52f590
Show file tree
Hide file tree
Showing 35 changed files with 307 additions and 551 deletions.
1 change: 1 addition & 0 deletions CHANGES.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ New in 3.0.1.1
- FIX: Issue #634: Improve icon replacement performance.
- FIX: Style guide settings tooltips and popups.
- FIX: MDL-52936 - Fix link hover bug on iOS.
- FIX: Apply 'aria-hidden="true"' to FontAwesome icons as much as possible. Still a few 'content' CSS attributes to consider.
- NEW: Issue #632: View StyleGuide without logging on.

New in 3.0.1
Expand Down
4 changes: 2 additions & 2 deletions classes/core_course_renderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ protected function coursecat_category(coursecat_helper $chelper, $coursecat, $de
}
}
if (!empty($val)) {
$icon = html_writer::tag('i', '', array('class' => 'fa fa-' . $val));
$icon = html_writer::tag('span', '', array('aria-hidden' => 'true', 'class' => 'fa fa-'.$val));
} else {
$icon = '';
}
Expand Down Expand Up @@ -231,7 +231,7 @@ protected function coursecat_coursebox_content(coursecat_helper $chelper, $cours
$content .= html_writer::start_tag('ul', array('class' => $teacherclass));
foreach ($course->get_course_contacts() as $userid => $coursecontact) {
$faiconsetting = \theme_essential\toolbox::get_setting('courselistteachericon');
$faiconsettinghtml = (empty($faiconsetting)) ? '' : '<i class="fa fa-'.$faiconsetting.'"></i> ';
$faiconsettinghtml = (empty($faiconsetting)) ? '' : '<span aria-hidden="true" class="fa fa-'.$faiconsetting.'"></span> ';
$name = $faiconsettinghtml.$coursecontact['rolename'].': '.
html_writer::link(new moodle_url('/user/view.php',
array('id' => $userid, 'course' => SITEID)),
Expand Down
4 changes: 2 additions & 2 deletions classes/format_renderer_toolbox.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ protected function get_nav_links_content($course, $sections, $sectionno, $buffer
$left = $right;
$right = $temp;
}
$previousarrow = '<i class="fa fa-chevron-circle-' . $left . '"></i>';
$nextarrow = '<i class="fa fa-chevron-circle-' . $right . '"></i>';
$previousarrow = '<span aria-hidden="true" class="fa fa-chevron-circle-' . $left . '"></span>';
$nextarrow = '<span aria-hidden="true" class="fa fa-chevron-circle-' . $right . '"></span>';
$canviewhidden = \has_capability('moodle/course:viewhiddensections', \context_course::instance($course->id))
or ! $course->hiddensections;

Expand Down
208 changes: 153 additions & 55 deletions classes/output/core_renderer.php
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions classes/toolbox.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,9 +307,9 @@ static public function render_slide_controls($left) {
$faright = $temp;
}
$prev = '<a class="left carousel-control" href="#essentialCarousel" data-slide="prev">';
$prev .= '<i class="fa fa-chevron-circle-'.$faleft.'"></i></a>';
$prev .= '<span aria-hidden="true" class="fa fa-chevron-circle-'.$faleft.'"></span></a>';
$next = '<a class="right carousel-control" href="#essentialCarousel" data-slide="next">';
$next .= '<i class="fa fa-chevron-circle-'.$faright.'"></i></a>';
$next .= '<span aria-hidden="true" class="fa fa-chevron-circle-'.$faright.'"></span></a>';

return $prev . $next;
}
Expand Down
81 changes: 41 additions & 40 deletions essential_admin_setting_styleguide.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,45 +60,46 @@ public function __construct($name, $visiblename, $description) {
$bc = new block_contents();
$bc->title = get_string('styleguide', 'theme_essential');
$bc->attributes['class'] = 'block block_style_guide';
$bc->attributes['data-block'] = 'style_guide';
$bc->content = '<ul class="nav nav-list">';
$bc->content .= '<li><a href="#gridSystem"><i class="fa fa-hand-o-right"></i> Grid system</a></li>';
$bc->content .= '<li><a href="#fluidGridSystem"><i class="fa fa-hand-o-right"></i> Fluid grid system</a></li>';
$bc->content .= '<li><a href="#layouts"><i class="fa fa-hand-o-right"></i> Layouts</a></li>';
$bc->content .= '<li><a href="#responsive"><i class="fa fa-hand-o-right"></i> Responsive design</a></li>';
$bc->content .= '<li><a href="#typography"><i class="fa fa-hand-o-right"></i> Typography</a></li>';
$bc->content .= '<li><a href="#code"><i class="fa fa-hand-o-right"></i> Code</a></li>';
$bc->content .= '<li><a href="#tables"><i class="fa fa-hand-o-right"></i> Tables</a></li>';
$bc->content .= '<li><a href="#forms"><i class="fa fa-hand-o-right"></i> Forms</a></li>';
$bc->content .= '<li><a href="#buttons"><i class="fa fa-hand-o-right"></i> Buttons</a></li>';
$bc->content .= '<li><a href="#images"><i class="fa fa-hand-o-right"></i> Images</a></li>';
$bc->content .= '<li><a href="#dropdowns"><i class="fa fa-hand-o-right"></i> Dropdowns</a></li>';
$bc->content .= '<li><a href="#buttonGroups"><i class="fa fa-hand-o-right"></i> Button groups</a></li>';
$bc->content .= '<li><a href="#buttonDropdowns"><i class="fa fa-hand-o-right"></i> Button dropdowns</a></li>';
$bc->content .= '<li><a href="#navs"><i class="fa fa-hand-o-right"></i> Navs</a></li>';
$bc->content .= '<li><a href="#navbar"><i class="fa fa-hand-o-right"></i> Navbar</a></li>';
$bc->content .= '<li><a href="#breadcrumbs"><i class="fa fa-hand-o-right"></i> Breadcrumbs</a></li>';
$bc->content .= '<li><a href="#pagination"><i class="fa fa-hand-o-right"></i> Pagination</a></li>';
$bc->content .= '<li><a href="#labels-badges"><i class="fa fa-hand-o-right"></i> Labels and badges</a></li>';
$bc->content .= '<li><a href="#typography"><i class="fa fa-hand-o-right"></i> Typography</a></li>';
$bc->content .= '<li><a href="#thumbnails"><i class="fa fa-hand-o-right"></i> Thumbnails</a></li>';
$bc->content .= '<li><a href="#alerts"><i class="fa fa-hand-o-right"></i> Alerts</a></li>';
$bc->content .= '<li><a href="#progress"><i class="fa fa-hand-o-right"></i> Progress bars</a></li>';
$bc->content .= '<li><a href="#media"><i class="fa fa-hand-o-right"></i> Media object</a></li>';
$bc->content .= '<li><a href="#misc"><i class="fa fa-hand-o-right"></i> Misc</a></li>';
$bc->content .= '<li><a href="#overview"><i class="fa fa-hand-o-right"></i> JavaScript overview</a></li>';
$bc->content .= '<li><a href="#transitions"><i class="fa fa-hand-o-right"></i> Transitions</a></li>';
$bc->content .= '<li><a href="#modals"><i class="fa fa-hand-o-right"></i> Modal</a></li>';
$bc->content .= '<li><a href="#dropdowns"><i class="fa fa-hand-o-right"></i> Dropdown</a></li>';
$bc->content .= '<li><a href="#scrollspy"><i class="fa fa-hand-o-right"></i> Scrollspy</a></li>';
$bc->content .= '<li><a href="#tabs"><i class="fa fa-hand-o-right"></i> Tab</a></li>';
$bc->content .= '<li><a href="#tooltips"><i class="fa fa-hand-o-right"></i> Tooltip</a></li>';
$bc->content .= '<li><a href="#popovers"><i class="fa fa-hand-o-right"></i> Popover</a></li>';
$bc->content .= '<li><a href="#alerts"><i class="fa fa-hand-o-right"></i> Alert</a></li>';
$bc->content .= '<li><a href="#buttons"><i class="fa fa-hand-o-right"></i> Button</a></li>';
$bc->content .= '<li><a href="#collapse"><i class="fa fa-hand-o-right"></i> Collapse</a></li>';
$bc->content .= '<li><a href="#carousel"><i class="fa fa-hand-o-right"></i> Carousel</a></li>';
$bc->content .= '<li><a href="#typeahead"><i class="fa fa-hand-o-right"></i> Typeahead</a></li>';
$bc->content .= '<li><a href="#affix"><i class="fa fa-hand-o-right"></i> Affix</a></li>';
$bc->content .= '<li><a href="#gridSystem"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Grid system</a></li>';
$bc->content .= '<li><a href="#fluidGridSystem"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Fluid grid system</a></li>';
$bc->content .= '<li><a href="#layouts"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Layouts</a></li>';
$bc->content .= '<li><a href="#responsive"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Responsive design</a></li>';
$bc->content .= '<li><a href="#typography"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Typography</a></li>';
$bc->content .= '<li><a href="#code"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Code</a></li>';
$bc->content .= '<li><a href="#tables"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Tables</a></li>';
$bc->content .= '<li><a href="#forms"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Forms</a></li>';
$bc->content .= '<li><a href="#buttons"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Buttons</a></li>';
$bc->content .= '<li><a href="#images"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Images</a></li>';
$bc->content .= '<li><a href="#dropdowns"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Dropdowns</a></li>';
$bc->content .= '<li><a href="#buttonGroups"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Button groups</a></li>';
$bc->content .= '<li><a href="#buttonDropdowns"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Button dropdowns</a></li>';
$bc->content .= '<li><a href="#navs"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Navs</a></li>';
$bc->content .= '<li><a href="#navbar"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Navbar</a></li>';
$bc->content .= '<li><a href="#breadcrumbs"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Breadcrumbs</a></li>';
$bc->content .= '<li><a href="#pagination"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Pagination</a></li>';
$bc->content .= '<li><a href="#labels-badges"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Labels and badges</a></li>';
$bc->content .= '<li><a href="#typography"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Typography</a></li>';
$bc->content .= '<li><a href="#thumbnails"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Thumbnails</a></li>';
$bc->content .= '<li><a href="#alerts"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Alerts</a></li>';
$bc->content .= '<li><a href="#progress"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Progress bars</a></li>';
$bc->content .= '<li><a href="#media"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Media object</a></li>';
$bc->content .= '<li><a href="#misc"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Misc</a></li>';
$bc->content .= '<li><a href="#overview"><span aria-hidden="true" class="fa fa-hand-o-right"></span> JavaScript overview</a></li>';
$bc->content .= '<li><a href="#transitions"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Transitions</a></li>';
$bc->content .= '<li><a href="#modals"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Modal</a></li>';
$bc->content .= '<li><a href="#dropdowns"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Dropdown</a></li>';
$bc->content .= '<li><a href="#scrollspy"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Scrollspy</a></li>';
$bc->content .= '<li><a href="#tabs"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Tab</a></li>';
$bc->content .= '<li><a href="#tooltips"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Tooltip</a></li>';
$bc->content .= '<li><a href="#popovers"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Popover</a></li>';
$bc->content .= '<li><a href="#alerts"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Alert</a></li>';
$bc->content .= '<li><a href="#buttons"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Button</a></li>';
$bc->content .= '<li><a href="#collapse"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Collapse</a></li>';
$bc->content .= '<li><a href="#carousel"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Carousel</a></li>';
$bc->content .= '<li><a href="#typeahead"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Typeahead</a></li>';
$bc->content .= '<li><a href="#affix"><span aria-hidden="true" class="fa fa-hand-o-right"></span> Affix</a></li>';
$bc->content .= '</ul>';
$defaultregion = $PAGE->blocks->get_default_region();
$PAGE->blocks->add_fake_block($bc, $defaultregion);
Expand Down Expand Up @@ -7106,9 +7107,9 @@ public function output_html($data, $query = '') {
$faright = $temp;
}
$return .= '<a class="left carousel-control" href="#myCarousel" data-slide="prev">';
$return .= '<i class="fa fa-chevron-circle-'.$faleft.'"></i></a>';
$return .= '<span aria-hidden="true" class="fa fa-chevron-circle-'.$faleft.'"></span></a>';
$return .= '<a class="right carousel-control" href="#myCarousel" data-slide="next">';
$return .= '<i class="fa fa-chevron-circle-'.$faright.'"></i></a>';
$return .= '<span aria-hidden="true" class="fa fa-chevron-circle-'.$faright.'"></span></a>';
$return .= '</div>';
$return .= '</div>';
$return .= '<pre class="prettyprint linenums">';
Expand Down
12 changes: 6 additions & 6 deletions layout/frontpage.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@
$enable3alert = \theme_essential\toolbox::get_setting('enable3alert');

if ($enable1alert || $enable2alert || $enable3alert) {
$alertinfo = '<span class="fa-stack"><i class="fa fa-info fa-stack-1x fa-inverse"></i></span>';
$alerterror = '<span class="fa-stack"><i class="fa fa-warning fa-stack-1x fa-inverse"></i></span>';
$alertsuccess = '<span class="fa-stack"><i class="fa fa-bullhorn fa-stack-1x fa-inverse"></i></span>';
$alertinfo = '<span class="fa-stack"><span aria-hidden="true" class="fa fa-info fa-stack-1x fa-inverse"></span></span>';
$alerterror = '<span class="fa-stack"><span aria-hidden="true" class="fa fa-warning fa-stack-1x fa-inverse"></span></span>';
$alertsuccess = '<span class="fa-stack"><span aria-hidden="true" class="fa fa-bullhorn fa-stack-1x fa-inverse"></span></span>';
}
?>

Expand Down Expand Up @@ -67,7 +67,7 @@
<!-- Alert #1 -->
<?php if ($enable1alert) { ?>
<div class="useralerts alert alert-<?php echo \theme_essential\toolbox::get_setting('alert1type'); ?>">
<a class="close" data-dismiss="alert" href="#"><i class="fa fa-times-circle"></i></a>
<a class="close" data-dismiss="alert" href="#"><span aria-hidden="true" class="fa fa-times-circle"></span></a>
<?php
$alert1icon = 'alert' . \theme_essential\toolbox::get_setting('alert1type');
echo $$alert1icon.'<span class="title">'.\theme_essential\toolbox::get_setting('alert1title', true);
Expand All @@ -80,7 +80,7 @@
<!-- Alert #2 -->
<?php if ($enable2alert) { ?>
<div class="useralerts alert alert-<?php echo \theme_essential\toolbox::get_setting('alert2type'); ?>">
<a class="close" data-dismiss="alert" href="#"><i class="fa fa-times-circle"></i></a>
<a class="close" data-dismiss="alert" href="#"><span aria-hidden="true" class="fa fa-times-circle"></span></a>
<?php
$alert2icon = 'alert' . \theme_essential\toolbox::get_setting('alert2type');
echo $$alert2icon.'<span class="title">'.\theme_essential\toolbox::get_setting('alert2title', true);
Expand All @@ -93,7 +93,7 @@
<!-- Alert #3 -->
<?php if ($enable3alert) { ?>
<div class="useralerts alert alert-<?php echo \theme_essential\toolbox::get_setting('alert3type'); ?>">
<a class="close" data-dismiss="alert" href="#"><i class="fa fa-times-circle"></i></a>
<a class="close" data-dismiss="alert" href="#"><span aria-hidden="true" class="fa fa-times-circle"></span></a>
<?php
$alert3icon = 'alert' . \theme_essential\toolbox::get_setting('alert3type');
echo $$alert3icon.'<span class="title">'.\theme_essential\toolbox::get_setting('alert3title', true);
Expand Down
2 changes: 1 addition & 1 deletion layout/redirect.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
<div id="page-content" class="row-fluid text-center">
<section id="region-main" class="span12">
<?php echo $OUTPUT->main_content(); ?>
<i class="fa fa-refresh fa-spin fa-2x" style="margin-bottom: 10px;"></i>
<span aria-hidden="true" class="fa fa-refresh fa-spin fa-2x" style="margin-bottom: 10px;"></span>
</section>
</div>

Expand Down
2 changes: 1 addition & 1 deletion layout/secure.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
</div>

<footer>
<a href="#top" class="back-to-top" ><i class="fa fa-angle-up "></i></a>
<a href="#top" class="back-to-top" ><span aria-hidden="true" class="fa fa-angle-up "></span></a>
</footer>

<?php echo $OUTPUT->standard_end_of_body_html(); ?>
Expand Down
2 changes: 1 addition & 1 deletion layout/tiles/footer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,6 @@
</div>
</div>
</footer>
<a href="#top" class="back-to-top" ><i class="fa fa-angle-up "></i></a>
<a href="#top" class="back-to-top" ><span aria-hidden="true" class="fa fa-angle-up "></span></a>
<?php }
echo $OUTPUT->standard_end_of_body_html();
2 changes: 1 addition & 1 deletion layout/tiles/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
echo '<a class="textlogo" href="';
echo preg_replace("(https?:)", "", $CFG->wwwroot);
echo '">';
echo '<i id="headerlogo" class="fa fa-'.\theme_essential\toolbox::get_setting('siteicon').'"></i>';
echo '<span id="headerlogo" aria-hidden="true" class="fa fa-'.\theme_essential\toolbox::get_setting('siteicon').'"></span>';
echo '<div class="titlearea">'.$OUTPUT->get_title('header').'</div>';
echo '</a>';
} else {
Expand Down
2 changes: 1 addition & 1 deletion layout/tiles/marketingspots.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
echo '<!-- Spot #'.$mspot.' -->'; ?>
<div class="marketing-spot span4">
<div class="title"><h5><span>
<i class="fa fa-<?php echo \theme_essential\toolbox::get_setting('marketing'.$mspot.'icon'); ?>"></i>
<span aria-hidden="true" class="fa fa-<?php echo \theme_essential\toolbox::get_setting('marketing'.$mspot.'icon'); ?>"></span>
<?php echo \theme_essential\toolbox::get_setting('marketing'.$mspot, true); ?>
</span></h5></div>
<?php if ($spotimage[$mspot]) { ?>
Expand Down
Loading

0 comments on commit f52f590

Please sign in to comment.