clones/friendica
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #8237 from annando/a11y-2 

Accessibility: Improve navigation and contact approval
This commit is contained in:
Hypolite Petovan 2020-02-05 12:11:53 -05:00 committed by GitHub
parent 3f57e16a1a 2ba3cfb42c
commit 16c2705016
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 49 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/Module/Notifications/Introductions.php
View File

@ -95,38 +95,17 @@ class Introductions extends BaseNotifications
// Normal connection requests // Normal connection requests
default: default:
$friend_selected = (($notification->getNetwork() !== Protocol::OSTATUS) ? ' checked="checked" ' : ' disabled ');
$fan_selected = (($notification->getNetwork() === Protocol::OSTATUS) ? ' checked="checked" disabled ' : '');
$lbl_knowyou = '';
$knowyou = '';
$helptext = '';
$helptext2 = '';
$helptext3 = '';
if ($notification->getNetwork() === Protocol::DFRN) { if ($notification->getNetwork() === Protocol::DFRN) {
$lbl_knowyou = DI::l10n()->t('Claims to be known to you: '); $lbl_knowyou = DI::l10n()->t('Claims to be known to you: ');
$knowyou = ($notification->getKnowYou() ? DI::l10n()->t('yes') : DI::l10n()->t('no')); $knowyou = ($notification->getKnowYou() ? DI::l10n()->t('yes') : DI::l10n()->t('no'));
$helptext = DI::l10n()->t('Shall your connection be bidirectional or not?');
$helptext2 = DI::l10n()->t('Accepting %s as a friend allows %s to subscribe to your posts, and you will also receive updates from them in your news feed.', $notification->getName(), $notification->getName());
$helptext3 = DI::l10n()->t('Accepting %s as a subscriber allows them to subscribe to your posts, but you will not receive updates from them in your news feed.', $notification->getName());
} elseif ($notification->getNetwork() === Protocol::DIASPORA) {
$helptext = DI::l10n()->t('Shall your connection be bidirectional or not?');
$helptext2 = DI::l10n()->t('Accepting %s as a friend allows %s to subscribe to your posts, and you will also receive updates from them in your news feed.', $notification->getName(), $notification->getName());
$helptext3 = DI::l10n()->t('Accepting %s as a sharer allows them to subscribe to your posts, but you will not receive updates from them in your news feed.', $notification->getName());
} }
$dfrn_tpl = Renderer::getMarkupTemplate('notifications/netfriend.tpl'); $helptext = DI::l10n()->t('Shall your connection be bidirectional or not?');
$dfrn_text = Renderer::replaceMacros($dfrn_tpl, [ $helptext2 = DI::l10n()->t('Accepting %s as a friend allows %s to subscribe to your posts, and you will also receive updates from them in your news feed.', $notification->getName(), $notification->getName());
'$intro_id' => $notification->getIntroId(), $helptext3 = DI::l10n()->t('Accepting %s as a subscriber allows them to subscribe to your posts, but you will not receive updates from them in your news feed.', $notification->getName());
'$friend_selected' => $friend_selected,
'$fan_selected' => $fan_selected, $friend = ['duplex', DI::l10n()->t('Friend'), '1', $helptext2, true];
'$approve_as1' => $helptext, $follower = ['duplex', DI::l10n()->t('Subscriber'), '0', $helptext3, false];
'$approve_as2' => $helptext2,
'$approve_as3' => $helptext3,
'$as_friend' => DI::l10n()->t('Friend'),
'$as_fan' => (($notification->getNetwork() == Protocol::DIASPORA) ? DI::l10n()->t('Sharer') : DI::l10n()->t('Subscriber')),
]);
$contact = DBA::selectFirst('contact', ['network', 'protocol'], ['id' => $notification->getContactId()]); $contact = DBA::selectFirst('contact', ['network', 'protocol'], ['id' => $notification->getContactId()]);
@ -155,7 +134,6 @@ class Introductions extends BaseNotifications
'$header' => $header, '$header' => $header,
'$str_notification_type' => DI::l10n()->t('Notification type:'), '$str_notification_type' => DI::l10n()->t('Notification type:'),
'$str_type' => $notification->getType(), '$str_type' => $notification->getType(),
'$dfrn_text' => $dfrn_text,
'$dfrn_id' => $notification->getDfrnId(), '$dfrn_id' => $notification->getDfrnId(),
'$uid' => $notification->getUid(), '$uid' => $notification->getUid(),
'$intro_id' => $notification->getIntroId(), '$intro_id' => $notification->getIntroId(),
@ -171,6 +149,9 @@ class Introductions extends BaseNotifications
'$gender' => $notification->getGender(), '$gender' => $notification->getGender(),
'$lbl_gender' => DI::l10n()->t('Gender:'), '$lbl_gender' => DI::l10n()->t('Gender:'),
'$hidden' => ['hidden', DI::l10n()->t('Hide this contact from others'), $notification->isHidden(), ''], '$hidden' => ['hidden', DI::l10n()->t('Hide this contact from others'), $notification->isHidden(), ''],
'$lbl_connection_type' => $helptext,
'$friend' => $friend,
'$follower' => $follower,
'$url' => $notification->getUrl(), '$url' => $notification->getUrl(),
'$zrl' => $notification->getZrl(), '$zrl' => $notification->getZrl(),
'$lbl_url' => DI::l10n()->t('Profile URL'), '$lbl_url' => DI::l10n()->t('Profile URL'),

8
view/templates/notifications/intros.tpl
View File

@ -20,12 +20,16 @@
<form class="intro-approve-form" action="{{$action}}" method="post"> <form class="intro-approve-form" action="{{$action}}" method="post">
{{include file="field_checkbox.tpl" field=$hidden}} {{include file="field_checkbox.tpl" field=$hidden}}
<div role="radiogroup" aria-labelledby="connection_type">
<label id="connection_type">{{$lbl_connection_type}}</label>
{{include file="field_radio.tpl" field=$friend}}
{{include file="field_radio.tpl" field=$follower}}
</div>
<input type="hidden" name="dfrn_id" value="{{$dfrn_id}}" > <input type="hidden" name="dfrn_id" value="{{$dfrn_id}}" >
<input type="hidden" name="intro_id" value="{{$intro_id}}" > <input type="hidden" name="intro_id" value="{{$intro_id}}" >
<input type="hidden" name="contact_id" value="{{$contact_id}}" > <input type="hidden" name="contact_id" value="{{$contact_id}}" >
{{$dfrn_text nofilter}}
<input class="intro-submit-approve" type="submit" name="submit" value="{{$approve}}" /> <input class="intro-submit-approve" type="submit" name="submit" value="{{$approve}}" />
</form> </form>
</div> </div>

6
view/templates/notifications/notification.tpl
View File

@ -1,4 +1,4 @@
<div class="notif-item {{if !$item_seen}}unseen{{/if}}"> <div class="notif-item {{if !$item_seen}}unseen{{/if}}" {{if $item_seen}}aria-hidden="true"{{/if}}>
<a href="{{$item_link}}"><img src="{{$item_image}}" class="notif-image">{{$item_text nofilter}} <span class="notif-when">{{$item_ago}}</span></a> <a href="{{$item_link}}"><img src="{{$item_image}}" aria-hidden="true" class="notif-image">{{$item_text nofilter}} <span class="notif-when">{{$item_ago}}</span></a>
</div> </div>

2
view/theme/frio/templates/field_checkbox.tpl
View File

@ -1,7 +1,7 @@
<div class="field checkbox" id="div_id_{{$field.0}}"> <div class="field checkbox" id="div_id_{{$field.0}}">
<input type="hidden" name="{{$field.0}}" value="0"> <input type="hidden" name="{{$field.0}}" value="0">
<input type="checkbox" name="{{$field.0}}" id="id_{{$field.0}}" value="1" {{if $field.2}}checked="checked"{{/if}} aria-checked="{{if $field.2}}true{{else}}false{{/if}}" {{if $field.3}}aria-describedby="{{$field.0}}_tip"{{/if}} {{if $field.4}}{{$field.4}}{{/if}}> <input type="checkbox" name="{{$field.0}}" id="id_{{$field.0}}" value="1" {{if $field.2}}checked="checked"{{/if}} {{if $field.3}}aria-describedby="{{$field.0}}_tip"{{/if}} {{if $field.4}}{{$field.4}}{{/if}}>
<label for="id_{{$field.0}}"> <label for="id_{{$field.0}}">
{{$field.1}} {{$field.1}}
{{if $field.3}} {{if $field.3}}

2
view/theme/frio/templates/field_radio.tpl
View File

@ -1,7 +1,7 @@
<div class="field radio"> <div class="field radio">
<div class="radio"> <div class="radio">
<input type="radio" name="{{$field.0}}" id="id_{{$field.0}}_{{$field.2}}" value="{{$field.2}}" {{if $field.4}}checked{{/if}} aria-checked="{{if $field.4}}true{{else}}false{{/if}}" aria-describedby="{{$field.0}}_{{$field.2}}_tip"> <input type="radio" name="{{$field.0}}" id="id_{{$field.0}}_{{$field.2}}" value="{{$field.2}}" {{if $field.4}}checked{{/if}} tabindex="{{if $field.4}}0{{else}}-1{{/if}}" aria-describedby="{{$field.0}}_{{$field.2}}_tip">
<label for="id_{{$field.0}}_{{$field.2}}"> <label for="id_{{$field.0}}_{{$field.2}}">
{{$field.1}} {{$field.1}}
{{if $field.3}} {{if $field.3}}

27
view/theme/frio/templates/nav.tpl
View File

@ -38,41 +38,40 @@
{{* 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" role="presentation"> <li id="nav-communication" class="nav-segment">
{{if $nav.network}} {{if $nav.network}}
<a accesskey="n" role="menuitem" 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>
{{/if}} {{/if}}
{{if $nav.home}} {{if $nav.home}}
<a accesskey="p" role="menuitem" 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>
{{/if}} {{/if}}
{{if $nav.community}} {{if $nav.community}}
<a accesskey="c" role="menuitem" 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}} {{/if}}
</li> </li>
<li id="nav-personal" class="nav-segment hidden-xs" role="presentation"> <li id="nav-personal" class="nav-segment hidden-xs">
{{if $nav.messages}} {{if $nav.messages}}
<a role="menuitem" 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>
{{/if}} {{/if}}
{{if $nav.events}} {{if $nav.events}}
<a accesskey="e" role="menuitem" 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>
{{/if}} {{/if}}
{{if $nav.contacts}} {{if $nav.contacts}}
<a role="menuitem" 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> <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> <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}}
</li> </li>
{{* The notifications dropdown *}} {{* The notifications dropdown *}}
{{if $nav.notifications}} {{if $nav.notifications}}
<li id="nav-notification" class="nav-segment" role="presentation"> <li id="nav-notification" class="nav-segment dropdown" role="presentation">
<a href="{{$nav.notifications.0}}" 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"> <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> <i class="fa fa-bell fa-lg" aria-hidden="true"></i>
<span role="menuitem" class="sr-only">{{$nav.notifications.1}}</span>
<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> </a>
@ -94,7 +93,7 @@
</li> </li>
</ul> </ul>
</li> </li>
{{/if}} {{/if}}
</ul> </ul>
</div> </div>
@ -120,7 +119,7 @@
{{if $nav.userinfo}} {{if $nav.userinfo}}
<li id="nav-user-linkmenu" class="dropdown account nav-menu hidden-xs"> <li id="nav-user-linkmenu" class="dropdown account nav-menu hidden-xs">
<button accesskey="u" id="main-menu" class="btn-link dropdown-toggle nav-avatar" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-user-menu"> <button accesskey="u" id="main-menu" class="btn-link dropdown-toggle nav-avatar" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-user-menu">
<div class="user-title pull-left hidden-xs hidden-sm hidden-md"> <div aria-hidden="true" class="user-title pull-left hidden-xs hidden-sm hidden-md">
<strong>{{$nav.userinfo.name}}</strong><br> <strong>{{$nav.userinfo.name}}</strong><br>
{{if $nav.remote}}<span class="trunctate">{{$nav.remote}}</span>{{/if}} {{if $nav.remote}}<span class="trunctate">{{$nav.remote}}</span>{{/if}}
</div> </div>
@ -285,7 +284,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"><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"><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>

28
view/theme/frio/templates/notifications/intros.tpl
View File

@ -9,15 +9,6 @@
</div> </div>
<div class="media-body"> <div class="media-body">
{{* The intro actions like approve, ignore, discard intro*}}
<div class="intro-actions pull-right nav-pills preferences">
<button class="btn-link intro-action-link" onclick="addElmToModal('#intro-approve-wrapper-{{$intro_id}}');" aria-label="{{$approve}}" title="{{$approve}}" data-toggle="tooltip"><i class="fa fa-check" aria-hidden="true"></i></button>
<form class="intro-form" action="notification/{{$intro_id}}" method="post">
<button class="btn-link intro-submit-ignore intro-action-link" type="submit" name="submit" value="{{$ignore}}" aria-label="{{$ignore}}" title="{{$ignore}}" data-toggle="tooltip"><i class="fa fa-ban" aria-hidden="true"></i></button>
{{if $discard}}<button class="btn-link intro-submit-discard intro-action-link" type="submit" name="submit" value="{{$discard}}" aria-label="{{$discard}}" title="{{$discard}}" data-toggle="tooltip"><i class="fa fa-trash-o" aria-hidden="true"></i></button>{{/if}}
</form>
</div>
<div class='intro-enty-name'><h4 class="media-heading"><a href="{{$zrl}}">{{$fullname}}</a></h4></div> <div class='intro-enty-name'><h4 class="media-heading"><a href="{{$zrl}}">{{$fullname}}</a></h4></div>
<div class="intro-desc"><span class="intro-desc-label">{{$str_notification_type}}</span>&nbsp;{{$str_type}}</div> <div class="intro-desc"><span class="intro-desc-label">{{$str_notification_type}}</span>&nbsp;{{$str_type}}</div>
{{* if the contact was suggestested by another contact, the contact who made the suggestion is displayed*}} {{* if the contact was suggestested by another contact, the contact who made the suggestion is displayed*}}
@ -47,6 +38,16 @@
<div class="intro-note intro-note-{{$intro_id}}">{{$note}}</div> <div class="intro-note intro-note-{{$intro_id}}">{{$note}}</div>
</div> </div>
{{* The intro actions like approve, ignore, discard intro*}}
<div class="intro-actions pull-right nav-pills preferences">
<button class="btn-link intro-action-link" onclick="addElmToModal('#intro-approve-wrapper-{{$intro_id}}');" aria-label="{{$approve}}" title="{{$approve}}" data-toggle="tooltip"><i class="fa fa-check" aria-hidden="true"></i></button>
<form class="intro-form" action="notification/{{$intro_id}}" method="post">
<button class="btn-link intro-submit-ignore intro-action-link" type="submit" name="submit" value="{{$ignore}}" aria-label="{{$ignore}}" title="{{$ignore}}" data-toggle="tooltip"><i class="fa fa-ban" aria-hidden="true"></i></button>
{{if $discard}}<button class="btn-link intro-submit-discard intro-action-link" type="submit" name="submit" value="{{$discard}}" aria-label="{{$discard}}" title="{{$discard}}" data-toggle="tooltip"><i class="fa fa-trash-o" aria-hidden="true"></i></button>{{/if}}
</form>
</div>
{{* This sections contains special settings for contact approval. We hide it by default and load this section in {{* This sections contains special settings for contact approval. We hide it by default and load this section in
a bootstrap modal in the case of approval *}} a bootstrap modal in the case of approval *}}
<div id="intro-approve-wrapper-{{$intro_id}}" style="display: none;"> <div id="intro-approve-wrapper-{{$intro_id}}" style="display: none;">
@ -54,14 +55,17 @@
<h3 class="heading">{{$fullname}}{{if $addr}}&nbsp;({{$addr}}){{/if}}</h3> <h3 class="heading">{{$fullname}}{{if $addr}}&nbsp;({{$addr}}){{/if}}</h3>
<form class="intro-approve-form" {{if $request}}action="{{$request}}" method="get"{{else}}action="{{$action}}" method="post"{{/if}}> <form class="intro-approve-form" {{if $request}}action="{{$request}}" method="get"{{else}}action="{{$action}}" method="post"{{/if}}>
{{include file="field_checkbox.tpl" field=$hidden}} {{include file="field_checkbox.tpl" field=$hidden}}
<div role="radiogroup" aria-labelledby="connection_type">
<label id="connection_type">{{$lbl_connection_type}}</label>
{{include file="field_radio.tpl" field=$friend}}
{{include file="field_radio.tpl" field=$follower}}
</div>
{{if $type != "friend_suggestion"}} {{if $type != "friend_suggestion"}}
<input type="hidden" name="dfrn_id" value="{{$dfrn_id}}" > <input type="hidden" name="dfrn_id" value="{{$dfrn_id}}" >
<input type="hidden" name="intro_id" value="{{$intro_id}}" > <input type="hidden" name="intro_id" value="{{$intro_id}}" >
<input type="hidden" name="contact_id" value="{{$contact_id}}" > <input type="hidden" name="contact_id" value="{{$contact_id}}" >
{{/if}} {{/if}}
{{$dfrn_text nofilter}}
<div class="pull-right"> <div class="pull-right">
<button class="btn btn-primary intro-submit-approve" type="submit" name="submit" value="{{$approve}}">{{$approve}}</button> <button class="btn btn-primary intro-submit-approve" type="submit" name="submit" value="{{$approve}}">{{$approve}}</button>
</div> </div>