mirror of https://github.com/friendica/friendica
Merge pull request #8237 from annando/a11y-2
Accessibility: Improve navigation and contact approval
This commit is contained in:
GitHub
commit
16c2705016
|
|
@ -95,38 +95,17 @@ class Introductions extends BaseNotifications
|
|||
|
||||
// Normal connection requests
|
||||
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) {
|
||||
$lbl_knowyou = DI::l10n()->t('Claims to be known to you: ');
|
||||
$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');
|
||||
$dfrn_text = Renderer::replaceMacros($dfrn_tpl, [
|
||||
'$intro_id' => $notification->getIntroId(),
|
||||
'$friend_selected' => $friend_selected,
|
||||
'$fan_selected' => $fan_selected,
|
||||
'$approve_as1' => $helptext,
|
||||
'$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')),
|
||||
]);
|
||||
$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());
|
||||
|
||||
$friend = ['duplex', DI::l10n()->t('Friend'), '1', $helptext2, true];
|
||||
$follower = ['duplex', DI::l10n()->t('Subscriber'), '0', $helptext3, false];
|
||||
|
||||
$contact = DBA::selectFirst('contact', ['network', 'protocol'], ['id' => $notification->getContactId()]);
|
||||
|
||||
|
|
@ -155,7 +134,6 @@ class Introductions extends BaseNotifications
|
|||
'$header' => $header,
|
||||
'$str_notification_type' => DI::l10n()->t('Notification type:'),
|
||||
'$str_type' => $notification->getType(),
|
||||
'$dfrn_text' => $dfrn_text,
|
||||
'$dfrn_id' => $notification->getDfrnId(),
|
||||
'$uid' => $notification->getUid(),
|
||||
'$intro_id' => $notification->getIntroId(),
|
||||
|
|
@ -171,6 +149,9 @@ class Introductions extends BaseNotifications
|
|||
'$gender' => $notification->getGender(),
|
||||
'$lbl_gender' => DI::l10n()->t('Gender:'),
|
||||
'$hidden' => ['hidden', DI::l10n()->t('Hide this contact from others'), $notification->isHidden(), ''],
|
||||
'$lbl_connection_type' => $helptext,
|
||||
'$friend' => $friend,
|
||||
'$follower' => $follower,
|
||||
'$url' => $notification->getUrl(),
|
||||
'$zrl' => $notification->getZrl(),
|
||||
'$lbl_url' => DI::l10n()->t('Profile URL'),
|
||||
|
|
|
|||
|
|
@ -20,12 +20,16 @@
|
|||
|
||||
<form class="intro-approve-form" action="{{$action}}" method="post">
|
||||
{{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="intro_id" value="{{$intro_id}}" >
|
||||
<input type="hidden" name="contact_id" value="{{$contact_id}}" >
|
||||
|
||||
{{$dfrn_text nofilter}}
|
||||
|
||||
<input class="intro-submit-approve" type="submit" name="submit" value="{{$approve}}" />
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
|
||||
<div class="notif-item {{if !$item_seen}}unseen{{/if}}">
|
||||
<a href="{{$item_link}}"><img src="{{$item_image}}" class="notif-image">{{$item_text nofilter}} <span class="notif-when">{{$item_ago}}</span></a>
|
||||
</div>
|
||||
<div class="notif-item {{if !$item_seen}}unseen{{/if}}" {{if $item_seen}}aria-hidden="true"{{/if}}>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
<div class="field checkbox" id="div_id_{{$field.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}}">
|
||||
{{$field.1}}
|
||||
{{if $field.3}}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
<div class="field 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}}">
|
||||
{{$field.1}}
|
||||
{{if $field.3}}
|
||||
|
|
|
|||
|
|
@ -38,41 +38,40 @@
|
|||
|
||||
{{* 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" role="presentation">
|
||||
<li id="nav-communication" class="nav-segment">
|
||||
{{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 $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 $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}}
|
||||
</li>
|
||||
|
||||
<li id="nav-personal" class="nav-segment hidden-xs" role="presentation">
|
||||
<li id="nav-personal" class="nav-segment hidden-xs">
|
||||
{{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 $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 $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>
|
||||
{{/if}}
|
||||
</li>
|
||||
|
||||
{{* The notifications dropdown *}}
|
||||
{{if $nav.notifications}}
|
||||
<li id="nav-notification" class="nav-segment" 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">
|
||||
<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>
|
||||
<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>
|
||||
</a>
|
||||
|
||||
|
|
@ -94,7 +93,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -120,7 +119,7 @@
|
|||
{{if $nav.userinfo}}
|
||||
<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">
|
||||
<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>
|
||||
{{if $nav.remote}}<span class="trunctate">{{$nav.remote}}</span>{{/if}}
|
||||
</div>
|
||||
|
|
@ -285,7 +284,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"><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">
|
||||
{2}
|
||||
<div><time class="notif-when time" data-toggle="tooltip" title="{5}">{3}</time></div>
|
||||
|
|
|
|||
|
|
@ -9,15 +9,6 @@
|
|||
</div>
|
||||
|
||||
<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-desc"><span class="intro-desc-label">{{$str_notification_type}}</span> {{$str_type}}</div>
|
||||
{{* 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>
|
||||
|
||||
{{* 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
|
||||
a bootstrap modal in the case of approval *}}
|
||||
<div id="intro-approve-wrapper-{{$intro_id}}" style="display: none;">
|
||||
|
|
@ -54,14 +55,17 @@
|
|||
<h3 class="heading">{{$fullname}}{{if $addr}} ({{$addr}}){{/if}}</h3>
|
||||
<form class="intro-approve-form" {{if $request}}action="{{$request}}" method="get"{{else}}action="{{$action}}" method="post"{{/if}}>
|
||||
{{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"}}
|
||||
<input type="hidden" name="dfrn_id" value="{{$dfrn_id}}" >
|
||||
<input type="hidden" name="intro_id" value="{{$intro_id}}" >
|
||||
<input type="hidden" name="contact_id" value="{{$contact_id}}" >
|
||||
{{/if}}
|
||||
|
||||
{{$dfrn_text nofilter}}
|
||||
|
||||
<div class="pull-right">
|
||||
<button class="btn btn-primary intro-submit-approve" type="submit" name="submit" value="{{$approve}}">{{$approve}}</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue