nupplaPhil/friendica
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #8240 from annando/a11y-3

Browse source 
Accessibility again: Notifications are now accessible
This commit is contained in:
Hypolite Petovan 2020-02-05 16:22:26 -05:00 committed by GitHub
parent e42b843505 d8a19f7a27
commit 1595cf413d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 43 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/Content/Nav.php
View file

@ -73,6 +73,7 @@ class Nav
'$userinfo' => $nav_info['userinfo'], '$userinfo' => $nav_info['userinfo'],
'$sel' => self::$selected, '$sel' => self::$selected,
'$apps' => self::getAppMenu(), '$apps' => self::getAppMenu(),
'$home' => DI::l10n()->t('Go back'),
'$clear_notifs' => DI::l10n()->t('Clear notifications'), '$clear_notifs' => DI::l10n()->t('Clear notifications'),
'$search_hint' => DI::l10n()->t('@name, !forum, #tags, content') '$search_hint' => DI::l10n()->t('@name, !forum, #tags, content')
]); ]);

5
view/theme/frio/css/style.css
View file

@ -454,6 +454,8 @@ nav.navbar {
#topbar-first .nav>li>a:hover, #topbar-first .nav>li>a:hover,
#topbar-first .nav>li>a:focus, #topbar-first .nav>li>a:focus,
#topbar-first .nav>.open>a, #topbar-first .nav>.open>a,
#dropdownMenu1:hover,
#dropdownMenu1:focus,
nav.navbar .nav>li>a:hover, nav.navbar .nav>li>a:hover,
nav.navbar .nav>li>a:focus{ nav.navbar .nav>li>a:focus{
background-color: $nav_icon_hover_color; background-color: $nav_icon_hover_color;
@ -860,6 +862,9 @@ nav.navbar a, nav.navbar .btn-link {
} }
/* Dropdown Menus */ /* Dropdown Menus */
#dropdownMenu1 {
padding: 15px 15px;
}
.nav > li > .btn-link { .nav > li > .btn-link {
position: relative; position: relative;
display: block; display: block;

2
view/theme/frio/php/default.php
View file

@ -64,7 +64,7 @@ $is_singleuser_class = $is_singleuser ? "is-singleuser" : "is-not-singleuser";
</head> </head>
<body id="top" class="mod-<?php echo DI::module()->getName() . " " . $is_singleuser_class . " " . $view_mode_class;?>"> <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 <?php
if (!empty($page['nav']) && !$minimal) { if (!empty($page['nav']) && !$minimal) {
echo str_replace( echo str_replace(

2
view/theme/frio/php/standard.php
View file

@ -18,7 +18,7 @@
</head> </head>
<body id="top"> <body id="top">
<?php if($_SERVER['REQUEST_URI'] == "/"){header('Location: /login');} ?> <?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 <?php
if(!empty($page['nav'])) { if(!empty($page['nav'])) {
echo str_replace("~config.sitename~",Friendica\DI::config()->get('config','sitename'), echo str_replace("~config.sitename~",Friendica\DI::config()->get('config','sitename'),

38
view/theme/frio/templates/nav.tpl
View file

@ -7,12 +7,12 @@
<div id="banner" class="hidden-sm hidden-xs"> <div id="banner" class="hidden-sm hidden-xs">
{{* show on remote/visitor connections an other logo which symols that fact*}} {{* show on remote/visitor connections an other logo which symols that fact*}}
{{if $nav.remote}} {{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}} {{else}}
{{* #logo-img is the the placeholder to insert a mask (friendica logo) into this div {{* #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). 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 *}} 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}} {{/if}}
</div> </div>
</header> </header>
@ -38,46 +38,52 @@
{{* Left section of the NavBar with navigation shortcuts/icons *}} {{* Left section of the NavBar with navigation shortcuts/icons *}}
<ul class="nav navbar-nav navbar-left" role="menubar"> <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> <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>
</li>
{{/if}} {{/if}}
{{if $nav.home}} {{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> <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>
</li>
{{/if}} {{/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> <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> </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> <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>
</li>
{{/if}} {{/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> <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>
</li>
{{/if}} {{/if}}
{{if $nav.contacts}} {{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> <li class="nav-segment hidden-xs">
<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> <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>
{{/if}}
</li> </li>
{{/if}}
{{* The notifications dropdown *}} {{* The notifications dropdown *}}
{{if $nav.notifications}} {{if $nav.notifications}}
<li id="nav-notification" class="nav-segment dropdown" role="presentation"> <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"> <button id="dropdownMenu1" class="btn-link dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-notifications-menu">
<i class="fa fa-bell fa-lg" aria-hidden="true"></i>
<span id="notification-update" class="nav-notification-badge badge nav-notification dropdown" data-toggle="dropdown"></span> <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>
{{* 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 *}} {{* 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 :-/ *}} {{* 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"> <li role="presentation" id="nav-notifications-mark-all" class="dropdown-header">
<div class="arrow"></div> <div class="arrow"></div>
@ -284,7 +290,7 @@
<ul id="nav-notifications-template" class="media-list" style="display:none;" rel="template"> <ul id="nav-notifications-template" class="media-list" style="display:none;" rel="template">
<li class="{4} notif-entry"> <li class="{4} notif-entry">
<div class="notif-entry-wrapper media"> <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"> <a href="{0}" class="notif-desc-wrapper media-body">
{2} {2}
<div><time class="notif-when time" data-toggle="tooltip" title="{5}">{3}</time></div> <div><time class="notif-when time" data-toggle="tooltip" title="{5}">{3}</time></div>