From 5383999ef7f8f5d03052a55e6e2fb8ce475ddabd Mon Sep 17 00:00:00 2001
From: Matthias Jentsch <matthias.jentsch@netways.de>
Date: Mon, 16 Mar 2015 17:38:07 +0100
Subject: [PATCH] Add warning to links that open in a new window

Add warning on mouseover / focus as recommended by as recommended by WCAG20 G201

refs #7937
---
 library/Icinga/Web/Widget/Tab.php               | 17 +++++++++++++++++
 .../Web/Widget/Tabextension/OutputFormat.php    |  7 +++----
 .../views/scripts/show/components/actions.phtml |  6 +++++-
 public/css/icinga/tabs.less                     | 16 ++++++++++++++++
 4 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/library/Icinga/Web/Widget/Tab.php b/library/Icinga/Web/Widget/Tab.php
index a210a206e2..28e3fd3bdb 100644
--- a/library/Icinga/Web/Widget/Tab.php
+++ b/library/Icinga/Web/Widget/Tab.php
@@ -84,6 +84,13 @@ class Tab extends AbstractWidget
      */
     private $tagParams;
 
+    /**
+     * Whether to open the link target on a new page
+     *
+     * @var boolean
+     */
+    private $targetBlank = false;
+
     /**
      * Sets an icon image for this tab
      *
@@ -198,6 +205,11 @@ public function setTagParams(array $tagParams)
         $this->tagParams = $tagParams;
     }
 
+    public function setTargetBlank($value = true)
+    {
+        $this->targetBlank =  $value;
+    }
+
     /**
      * Create a new Tab with the given properties
      *
@@ -244,6 +256,11 @@ public function render()
 
         $caption = $view->escape($this->getLabel());
         $tagParams = $this->tagParams;
+        if ($this->targetBlank) {
+            // add warning to links that open in new tabs to improve accessibility, as recommended by WCAG20 G201
+            $caption .= '<span class="info-box display-on-hover"> opens in new window </span>';
+            $tagParams['target'] ='_blank';
+        }
 
         if ($this->title) {
             if ($tagParams !== null) {
diff --git a/library/Icinga/Web/Widget/Tabextension/OutputFormat.php b/library/Icinga/Web/Widget/Tabextension/OutputFormat.php
index 0ef7eea698..f2da29f226 100644
--- a/library/Icinga/Web/Widget/Tabextension/OutputFormat.php
+++ b/library/Icinga/Web/Widget/Tabextension/OutputFormat.php
@@ -48,10 +48,9 @@ public function __construct(array $disabled = array())
         foreach ($this->getSupportedTypes() as $type => $tabConfig) {
             if (!in_array($type, $disabled)) {
                 $tabConfig['url'] = Url::fromRequest();
-                $tabConfig['tagParams'] = array(
-                    'target' => '_blank'
-                );
-                $this->tabs[] = new Tab($tabConfig);
+                $tab = new Tab($tabConfig);
+                $tab->setTargetBlank();
+                $this->tabs[] = $tab;
             }
         }
     }
diff --git a/modules/monitoring/application/views/scripts/show/components/actions.phtml b/modules/monitoring/application/views/scripts/show/components/actions.phtml
index 1d926b33a4..2defd616db 100644
--- a/modules/monitoring/application/views/scripts/show/components/actions.phtml
+++ b/modules/monitoring/application/views/scripts/show/components/actions.phtml
@@ -1,7 +1,11 @@
 <?php
 
 $links = array();
-$linkText = '<a href="%s" target="_blank">%s</a>';
+
+// add warning to links that open in new tabs to improve accessibility, as recommended by WCAG20 G201
+$newTabInfo = sprintf('<span class="info-box display-on-hover"> %s </span>', $this->translate('opens in new window'));
+
+$linkText = '<a href="%s" target="_blank">%s ' . $newTabInfo . '</a>';
 $localLinkText = '<a href="%s">%s</a>';
 
 if ($object->notes_url) {
diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less
index d9161f6722..8d391b038f 100644
--- a/public/css/icinga/tabs.less
+++ b/public/css/icinga/tabs.less
@@ -148,3 +148,19 @@ a.close-tab {
     content: '\e874';
   }
 }
+
+span.display-on-hover {
+  font-size: 0.8em;
+  left: -9000px;
+  position: relative;
+  display: inline;
+  width: 0;
+  overflow: hidden;
+  color: #000000;
+  text-decoration: none;
+}
+
+:hover > span.display-on-hover, :focus > span.display-on-hover {
+  left:1em; width:12em;
+  text-align: center
+}