]> git.mxchange.org Git - friendica.git/commitdiff
projects / friendica.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 16c2705)
Accessibility again: Notifications are now accessible
authorMichael <heluecht@pirati.ca>
Wed, 5 Feb 2020 21:06:03 +0000 (21:06 +0000)
committerMichael <heluecht@pirati.ca>
Wed, 5 Feb 2020 21:06:03 +0000 (21:06 +0000)
src/Content/Nav.php patch | blob | history
view/theme/frio/css/style.css patch | blob | history
view/theme/frio/php/default.php patch | blob | history
view/theme/frio/php/standard.php patch | blob | history
view/theme/frio/templates/nav.tpl patch | blob | history

diff --git a/src/Content/Nav.php b/src/Content/Nav.php
index 8f565cc3d241e625ef1af87983f259a4f5425fcb..cbca1314acc6540a572859ba2eeb797e164760c3 100644 (file)
--- a/src/Content/Nav.php
+++ b/src/Content/Nav.php
@@ -73,6 +73,7 @@ class Nav
                        '$userinfo'     => $nav_info['userinfo'],
                        '$sel'          => self::$selected,
                        '$apps'         => self::getAppMenu(),
+                       '$home'         => DI::l10n()->t('Go back'),
                        '$clear_notifs' => DI::l10n()->t('Clear notifications'),
                        '$search_hint'  => DI::l10n()->t('@name, !forum, #tags, content')
                ]);
diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 295c065bb0b605438e809e71241e38f489d12735..337817553a2ca4bf939927c36dbca2e31633b2a9 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -454,6 +454,8 @@ nav.navbar {
 #topbar-first .nav>li>a:hover,
 #topbar-first .nav>li>a:focus,
 #topbar-first .nav>.open>a,
+#dropdownMenu1:hover,
+#dropdownMenu1:focus,
 nav.navbar .nav>li>a:hover,
 nav.navbar .nav>li>a:focus{
     background-color: $nav_icon_hover_color;
@@ -860,6 +862,9 @@ nav.navbar a, nav.navbar .btn-link {
 }
 
 /* Dropdown Menus */
+#dropdownMenu1 {
+    padding: 15px 15px;
+}
 .nav > li > .btn-link {
     position: relative;
     display: block;
diff --git a/view/theme/frio/php/default.php b/view/theme/frio/php/default.php
index 451fdfc5e46fda3cb6d122438d301b68c130d5df..bdc6eeb49b093ed4e4330757d7fe9b8b32bddb3a 100644 (file)
--- a/view/theme/frio/php/default.php
+++ b/view/theme/frio/php/default.php
@@ -64,7 +64,7 @@ $is_singleuser_class = $is_singleuser ? "is-singleuser" : "is-not-singleuser";
        </head>
 
        <body id="top" class="mod-<?php echo DI::module()->getName() . " " . $is_singleuser_class . " " . $view_mode_class;?>">
-               <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
+               <a href="#content" class="sr-only sr-only-focusable"><?php echo DI::l10n()->t('Skip to main content'); ?></a>
 <?php
        if (!empty($page['nav']) && !$minimal) {
                echo str_replace(
diff --git a/view/theme/frio/php/standard.php b/view/theme/frio/php/standard.php
index a48c76dd9a5397fbd71118947afef554f9345f78..9b6796f674987801f8b2ef5605b0324dce1e6846 100644 (file)
--- a/view/theme/frio/php/standard.php
+++ b/view/theme/frio/php/standard.php
@@ -18,7 +18,7 @@
 </head>
 <body id="top">
 <?php if($_SERVER['REQUEST_URI'] == "/"){header('Location: /login');} ?>
-<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
+<a href="#content" class="sr-only sr-only-focusable"><?php echo DI::l10n()->t('Skip to main content'); ?></a>
 <?php
        if(!empty($page['nav'])) {
        echo    str_replace("~config.sitename~",Friendica\DI::config()->get('config','sitename'),
diff --git a/view/theme/frio/templates/nav.tpl b/view/theme/frio/templates/nav.tpl
index 25af5aeea1d2d536516374b91cfacccdcbda1bcc..b8fcb3475c0202d6120cd1a8b5176a8802927e77 100644 (file)
--- a/view/theme/frio/templates/nav.tpl
+++ b/view/theme/frio/templates/nav.tpl
@@ -7,12 +7,12 @@
        <div id="banner" class="hidden-sm hidden-xs">
                {{* show on remote/visitor connections an other logo which symols that fact*}}
                {{if $nav.remote}}
-               <a href="{{$baseurl}}"><div id="remote-logo-img"></div></a>
+               <a href="{{$baseurl}}"><div id="remote-logo-img" aria-label="{{$home}}"></div></a>
                {{else}}
                {{* #logo-img is the the placeholder to insert a mask (friendica logo) into this div
                For Firefox we have to call the paths of the mask (look at the bottom of this file).
                Because for FF we need relative paths we apply them with js after the page is loaded (look at theme.js *}}
-               <a href="{{$baseurl}}"><div id="logo-img"></div></a>
+               <a href="{{$baseurl}}"><div id="logo-img" aria-label="{{$home}}"></div></a>
                {{/if}}
        </div>
 </header>
@@ -38,46 +38,60 @@
 
                                {{* Left section of the NavBar with navigation shortcuts/icons *}}
                                <ul class="nav navbar-nav navbar-left" role="menubar">
-                                       <li id="nav-communication" class="nav-segment">
-                                               {{if $nav.network}}
+                                       {{if $nav.network}}
+                                       <li class="nav-segment">
                                                <a accesskey="n" class="nav-menu {{$sel.network}}" href="{{$nav.network.0}}" data-toggle="tooltip" aria-label="{{$nav.network.3}}" title="{{$nav.network.3}}"><i class="fa fa-lg fa-th" aria-hidden="true"></i><span id="net-update" class="nav-network-badge badge nav-notification"></span></a>
-                                               {{/if}}
-
-                                               {{if $nav.home}}
+                                       </li>
+                                       {{/if}}
+                                       {{if $nav.home}}
+                                       <li class="nav-segment">
                                                <a accesskey="p" class="nav-menu {{$sel.home}}" href="{{$nav.home.0}}" data-toggle="tooltip" aria-label="{{$nav.home.3}}" title="{{$nav.home.3}}"><i class="fa fa-lg fa-home" aria-hidden="true"></i><span id="home-update" class="nav-home-badge badge nav-notification"></span></a>
-                                               {{/if}}
+                                       </li>
+                                       {{/if}}
 
-                                               {{if $nav.community}}
+                                       {{if $nav.community}}
+                                       <li class="nav-segment">
                                                <a accesskey="c" class="nav-menu {{$sel.community}}" href="{{$nav.community.0}}" data-toggle="tooltip" aria-label="{{$nav.community.3}}" title="{{$nav.community.3}}"><i class="fa fa-lg fa-bullseye" aria-hidden="true"></i></a>
-                                               {{/if}}
                                        </li>
+                                       {{/if}}
 
-                                       <li id="nav-personal" class="nav-segment hidden-xs">
-                                               {{if $nav.messages}}
+                                       {{if $nav.messages}}
+                                       <li class="nav-segment hidden-xs">
                                                <a accesskey="m" id="nav-messages-link" href="{{$nav.messages.0}}" data-toggle="tooltip" aria-label="{{$nav.messages.1}}" title="{{$nav.messages.1}}" class="nav-menu {{$sel.messages}}"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i><span id="mail-update" class="nav-mail-badge badge nav-notification"></span></a>
-                                               {{/if}}
+                                       </li>
+                                       {{/if}}
 
-                                               {{if $nav.events}}
+                                       {{if $nav.events}}
+                                       <li class="nav-segment hidden-xs">
                                                <a accesskey="e" id="nav-events-link" href="{{$nav.events.0}}" data-toggle="tooltip" aria-label="{{$nav.events.1}}" title="{{$nav.events.1}}" class="nav-menu"><i class="fa fa-lg fa-calendar"></i></a>
-                                               {{/if}}
+                                       </li>
+                                       {{/if}}
 
-                                               {{if $nav.contacts}}
-                                               <a accesskey="k" id="nav-contacts-link" class="nav-menu {{$sel.contacts}} {{$nav.contacts.2}}" href="{{$nav.contacts.0}}" data-toggle="tooltip" aria-label="{{$nav.contacts.1}}" title="{{$nav.contacts.1}}" ><i class="fa fa-users fa-lg" aria-hidden="true"></i></a>
-                                               <span id="intro-update" class="nav-intro-badge badge nav-notification" onclick="window.location.href = '{{$nav.introductions.0}}' " data-toggle="tooltip" aria-label="{{$nav.introductions.3}}" title="{{$nav.introductions.3}}"></span>
-                                               {{/if}}
+                                       {{if $nav.contacts}}
+                                       <li class="nav-segment hidden-xs">
+                                               <a accesskey="k" id="nav-contacts-link" href="{{$nav.contacts.0}}" data-toggle="tooltip" aria-label="{{$nav.contacts.1}}" title="{{$nav.contacts.1}}"class="nav-menu {{$sel.contacts}} {{$nav.contacts.2}}"><i class="fa fa-users fa-lg"></i></a>
+<!--                                           <span id="intro-update" aria-hidden="true" class="nav-intro-badge badge nav-notification" onclick="window.location.href = '{{$nav.introductions.0}}' " data-toggle="tooltip" title="{{$nav.introductions.3}}"></span>
+-->
                                        </li>
+                                       {{/if}}
 
                                        {{* The notifications dropdown *}}
                                        {{if $nav.notifications}}
+
                                                <li id="nav-notification" class="nav-segment dropdown" role="presentation">
+<!--
                                                        <a href="{{$nav.notifications.0}}" class="dropdown-toggle" rel="#nav-notifications-menu" data-toggle="tooltip" aria-label="{{$nav.notifications.1}}" title="{{$nav.notifications.1}}" role="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="nav-notifications-menu">
-                                                               <i class="fa fa-bell fa-lg" aria-hidden="true"></i>
+-->
+                                                       <button id="dropdownMenu1" class="btn-link dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-notifications-menu">
                                                                <span id="notification-update" class="nav-notification-badge badge nav-notification dropdown" data-toggle="dropdown"></span>
-                                                       </a>
-
+                                                               <i class="fa fa-bell fa-lg" aria-label="{{$nav.notifications.1}}"></i>
+                                               </button>
+<!--                                                   </a>
+-->
                                                        {{* The notifications dropdown menu. There are two parts of menu. The second is at the bottom of this file. It is loaded via js. Look at nav-notifications-template *}}
-                                                       <ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="dropdownMenu1" style="display: none;">
-
+                                                       <ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="dropdownMenu1">
+<!--                                                   <ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="dropdownMenu1" style="display: none;">
+-->
                                                                {{* the following list entry must have the id "nav-notificaionts-mark-all". Without it this isn't visable. ....strange behavior :-/ *}}
                                                                <li role="presentation" id="nav-notifications-mark-all" class="dropdown-header">
                                                                        <div class="arrow"></div>
@@ -284,7 +298,7 @@
 <ul id="nav-notifications-template" class="media-list" style="display:none;" rel="template">
        <li class="{4} notif-entry">
                <div class="notif-entry-wrapper media">
-                       <div class="notif-photo-wrapper media-object pull-left" aria-hidden="true"><a href="{6}" class="userinfo click-card"><img data-src="{1}"></a></div>
+                       <div class="notif-photo-wrapper media-object pull-left" aria-hidden="true"><a href="{6}" class="userinfo click-card" tabIndex="-1"><img data-src="{1}"></a></div>
                        <a href="{0}" class="notif-desc-wrapper media-body">
                                {2}
                                <div><time class="notif-when time" data-toggle="tooltip" title="{5}">{3}</time></div>
Unnamed repository; edit this file 'description' to name the repository.