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
Icinga · Mar 19, 2015 · 5383999 · 5383999
1 parent ec60f15
commit 5383999
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
+}