]> git.mxchange.org Git - friendica.git/commitdiff
Acessibility: Improve navigation and contact approval
authorMichael <heluecht@pirati.ca>
Wed, 5 Feb 2020 16:14:04 +0000 (16:14 +0000)
committerMichael <heluecht@pirati.ca>
Wed, 5 Feb 2020 16:14:04 +0000 (16:14 +0000)
src/Module/Notifications/Introductions.php
view/templates/notifications/intros.tpl
view/templates/notifications/notification.tpl
view/theme/frio/templates/field_checkbox.tpl
view/theme/frio/templates/field_radio.tpl
view/theme/frio/templates/nav.tpl
view/theme/frio/templates/notifications/intros.tpl

index 10919a13af058cc7fd6285cdceae78a658cc2dc2..8ca4723cf354b4b28b59dda332e3c59e2ad20a77 100644 (file)
@@ -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'),
index b04c19c1844cd3f994e4f7810de64e40aec6d100..21f35dd1b24500314125b8bcf925095cd4930df3 100644 (file)
 
 <form class="intro-approve-form" action="{{$action}}" method="post">
 {{include file="field_checkbox.tpl" field=$hidden}}
+<div role="radiogroup" aria-labelledby="connection_type">
+       <div id="connection_type">{{$lbl_connection_type}}</div>
+       {{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>
index a8de3c793d0ae575b17dfffa3c471cd24e3b3471..4ff7bc7a8b90ecb5d33e48c111257b701e1b602f 100644 (file)
@@ -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>
\ No newline at end of file
+<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>
index d687665e99de7dacc2bb3a3d5713680218bf37e2..f17c4832975c49332ac1f898ad00e99971d56abe 100644 (file)
@@ -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}}
index 35f99c9d61a14285698fbbac90ce0eb02ea0df1d..b5072cdd0e8a656ab7ad6bc8c2379c9a80104e56 100644 (file)
@@ -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}}
index 3f13bd355d344e0a70cb0a580d31dc744d951580..25af5aeea1d2d536516374b91cfacccdcbda1bcc 100644 (file)
 
                                {{* 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>
                                        {{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>
 <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>
index 8f4fa62183dd643a5905e8589c5b5834a93dbc38..110745ab39267526e6dfd0a6c29467cb1e3f7471 100644 (file)
@@ -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>&nbsp;{{$str_type}}</div>
                {{* if the contact was suggestested by another contact, the contact who made the suggestion is displayed*}}
                        <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;">
                        <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}}>
                                {{include file="field_checkbox.tpl" field=$hidden}}
+                               <div role="radiogroup" aria-labelledby="connection_type">
+                                       <div id="connection_type">{{$lbl_connection_type}}</div>
+                                       {{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>