From 97f5018247027fd0c3894b7114d3f9e251774200 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 16 Feb 2015 10:23:54 +0100 Subject: [PATCH 1/5] WCAG/1.1.1: Fix example for accessible icon fonts to work with NVDA too refs #8358 --- doc/accessibility/ifont.html | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/doc/accessibility/ifont.html b/doc/accessibility/ifont.html index 481cbff71..32f122127 100644 --- a/doc/accessibility/ifont.html +++ b/doc/accessibility/ifont.html @@ -10,22 +10,9 @@ .icon-star:before { content: "★"; } - .sr-only { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } - - - Top rated article - + - + \ No newline at end of file From 243bc6ec0cdcddc6363533a28d2d62055e32740f Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 16 Feb 2015 10:26:03 +0100 Subject: [PATCH 2/5] Make the view helpers qlink, img and icon handle aria-tags automatically refs #8358 refs #8360 --- library/Icinga/Web/View/helpers/url.php | 63 +++++++++++++++---------- 1 file changed, 38 insertions(+), 25 deletions(-) diff --git a/library/Icinga/Web/View/helpers/url.php b/library/Icinga/Web/View/helpers/url.php index 1f1450b5e..9fa5d4a69 100644 --- a/library/Icinga/Web/View/helpers/url.php +++ b/library/Icinga/Web/View/helpers/url.php @@ -27,55 +27,68 @@ $this->addHelperFunction('url', function ($path = null, $params = null) { return $url; }); +$this->addHelperFunction('qlink', function ($title, $url, $params = null, $properties = array(), $escape = true) use ($view) { + if (array_key_exists('title', $properties) && !array_key_exists('aria-label', $properties)) { + $properties['aria-label'] = $properties['title']; + } -$this->addHelperFunction('qlink', function ($title, $url, $params = null, $properties = array()) use ($view) { return sprintf( '%s', $view->url($url, $params), $view->propertiesToString($properties), - $view->escape($title) + $escape ? $view->escape($title) : $title ); }); -$this->addHelperFunction('img', function ($url, array $properties = array()) use ($view) { +$this->addHelperFunction('img', function ($url, $params = null, array $properties = array()) use ($view) { if (! array_key_exists('alt', $properties)) { $properties['alt'] = ''; } + if (array_key_exists('title', $properties)) { + if (! array_key_exists('aria-label', $properties)) { + $properties['aria-label'] = $properties['title']; + } + } elseif (! array_key_exists('aria-hidden', $properties)) { + $properties['aria-hidden'] = 'true'; + } + return sprintf( '', - $view->url($url), + $view->url($url, $params), $view->propertiesToString($properties) ); }); $this->addHelperFunction('icon', function ($img, $title = null, array $properties = array()) use ($view) { - $isClass = strpos($img, '.') === false; - $class = null; - - if ($isClass) { - $class = 'icon-' . $img; - } else { - $class = 'icon'; - } - if ($title !== null) { - $properties['alt'] = $title; - $properties['title'] = $title; - } - - if ($class !== null) { - if (isset($props['class'])) { - $properties['class'] .= ' ' . $class; + if (strpos($img, '.') !== false) { + if (array_key_exists('class', $properties)) { + $properties['class'] .= ' icon'; } else { - $properties['class'] = $class; + $properties['class'] = 'icon'; } - } - if ($isClass) { - return sprintf('', $view->propertiesToString($properties)); - } else { return $view->img('img/icons/' . $img, $properties); } + + if ($title !== null) { + $properties['role'] = 'img'; + $properties['title'] = $title; + + if (! array_key_exists('aria-label', $properties)) { + $properties['aria-label'] = $title; + } + } elseif (! array_key_exists('aria-hidden', $properties)) { + $properties['aria-hidden'] = 'true'; + } + + if (isset($properties['class'])) { + $properties['class'] .= ' icon-' . $img; + } else { + $properties['class'] = 'icon-' . $img; + } + + return sprintf('', $view->propertiesToString($properties)); }); $this->addHelperFunction('propertiesToString', function ($properties) use ($view) { From 5321c2f9e5bd7ae23a5b5ea5d8d1492f99662c63 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 16 Feb 2015 10:52:42 +0100 Subject: [PATCH 3/5] Mute icons properly using the new automatic mechanisms of our view helpers refs #8360 --- application/layouts/scripts/pdf.phtml | 2 +- .../views/scripts/authentication/login.phtml | 4 ++-- .../scripts/config/authentication/reorder.phtml | 2 +- application/views/scripts/config/resource.phtml | 2 +- .../Icinga/Web/Form/Decorator/NoScriptApply.php | 2 +- library/Icinga/Web/Widget/FilterEditor.php | 2 +- library/Icinga/Web/Widget/Tab.php | 4 ++-- library/Icinga/Web/Widget/Tabs.php | 2 +- .../views/scripts/alertsummary/index.phtml | 6 +++--- .../application/views/scripts/config/index.phtml | 4 ++-- .../application/views/scripts/hosts/show.phtml | 14 +++++++------- .../views/scripts/list/contactgroups.phtml | 2 +- .../application/views/scripts/list/contacts.phtml | 2 +- .../partials/command/objects-command-form.phtml | 4 ++-- .../application/views/scripts/services/show.phtml | 14 +++++++------- .../scripts/show/components/acknowledgement.phtml | 2 +- .../scripts/show/components/checkstatistics.phtml | 2 +- .../views/scripts/show/components/command.phtml | 2 +- .../views/scripts/show/components/comments.phtml | 2 +- .../views/scripts/show/components/contacts.phtml | 4 ++-- .../views/scripts/show/components/downtime.phtml | 2 +- .../views/scripts/show/components/hostgroups.phtml | 2 +- .../scripts/show/components/servicegroups.phtml | 2 +- .../setup/application/forms/AuthenticationPage.php | 4 ++-- 24 files changed, 44 insertions(+), 44 deletions(-) diff --git a/application/layouts/scripts/pdf.phtml b/application/layouts/scripts/pdf.phtml index 38c9bdc2c..c5b28ecbf 100644 --- a/application/layouts/scripts/pdf.phtml +++ b/application/layouts/scripts/pdf.phtml @@ -31,7 +31,7 @@ if ( isset($pdf) ) } -img('img/logo_icinga_big_dark.png', array('align' => 'right', 'width' => '75')) ?> +img('img/logo_icinga_big_dark.png', null, array('align' => 'right', 'width' => '75')) ?>