From 61071a6821b1c780d84358d5e2932e5490604bdf Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Tue, 7 Sep 2021 15:23:41 +0100
Subject: [PATCH] [PLUGINS][Reply][Repeat][Favourite] Base template semantic
 rework. Reply, repeat and favourite respective classes are now assigned in
 their NoteHandlerPlugin.

---
 plugins/Favourite/Favourite.php           |  5 ++--
 plugins/Repeat/Repeat.php                 |  4 ++-
 plugins/Reply/Reply.php                   |  3 ++-
 public/assets/css/base.css                | 24 +++++++----------
 src/Twig/Runtime.php                      |  6 +++--
 templates/base.html.twig                  | 32 +++++++++++------------
 templates/network/public.html.twig        |  4 +--
 templates/note/view.html.twig             | 32 ++++++++---------------
 templates/sidepanel/right/right.html.twig |  6 ++---
 9 files changed, 53 insertions(+), 63 deletions(-)

diff --git a/plugins/Favourite/Favourite.php b/plugins/Favourite/Favourite.php
index 6b5be8a28d..c4c8d4644d 100644
--- a/plugins/Favourite/Favourite.php
+++ b/plugins/Favourite/Favourite.php
@@ -66,9 +66,10 @@ class Favourite extends NoteHandlerPlugin
         $form_fav = Form::create([
             ['submit_favourite', SubmitType::class,
                 [
-                    'label' => $is_set ? _m('Note already favourite!.') : _m('Favourite this note.'),
+                    'label' => ' ',
                     'attr'  => [
-                        'class' => $is_set ? 'note-actions-set' : 'note-actions-unset',
+                        'class' => ($is_set ? 'note-actions-set' : 'note-actions-unset') . ' button-container favourite-button-container',
+                        'title' => $is_set ? _m('Note already favourite!') : _m('Favourite this note!'),
                     ],
                 ],
             ],
diff --git a/plugins/Repeat/Repeat.php b/plugins/Repeat/Repeat.php
index d04bb73608..48ebc922b0 100644
--- a/plugins/Repeat/Repeat.php
+++ b/plugins/Repeat/Repeat.php
@@ -29,6 +29,7 @@ use App\Util\Exception\RedirectException;
 use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
 use Symfony\Component\HttpFoundation\Request;
+use function App\Core\I18n\_m;
 
 class Repeat extends NoteHandlerPlugin
 {
@@ -51,7 +52,8 @@ class Repeat extends NoteHandlerPlugin
                 [
                     'label' => ' ',
                     'attr'  => [
-                        'class' => $is_set ? 'note-actions-set' : 'note-actions-unset',
+                        'class' => ($is_set ? 'note-actions-set' : 'note-actions-unset') . ' button-container repeat-button-container',
+                        'title' => $is_set ? _m('Note already repeated!') : _m('Repeat this note!'),
                     ],
                 ],
             ],
diff --git a/plugins/Reply/Reply.php b/plugins/Reply/Reply.php
index eef6a81a42..fbd097dc7d 100644
--- a/plugins/Reply/Reply.php
+++ b/plugins/Reply/Reply.php
@@ -64,7 +64,8 @@ class Reply extends NoteHandlerPlugin
                 [
                     'label' => ' ',
                     'attr'  => [
-                        'class' => 'note-actions-unset',
+                        'class' => 'note-actions-unset button-container reply-button-container',
+                        'title' => 'Reply to this note!',
                     ],
                 ],
             ],
diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 916eda57fc..723625cac4 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -300,41 +300,35 @@ summary:hover .icon-details-open {
 }
 
 .button-container {
-    width: 1em !important;
-    height: 1em !important;
-}
-
-.button-container button {
     all: unset;
     border: none !important;
-    width: inherit !important;
-    height: inherit !important;
+    width: 1em !important;
+    height: 1em !important;
     background-size: cover !important;
     margin-left: 5px;
+    text-indent: -9999em;
+    text-transform: uppercase;
 }
 
-.button-container button:hover,
-.button-container button:focus {
+.button-container:hover,
+.button-container:focus {
     border: none !important;
     background: var(--bg3) !important;
 }
 
-.favourite-button-container button {
-    text-indent: -9999em;
-    text-transform: uppercase;
-
+.favourite-button-container {
     -webkit-mask-image: url("../icons/heart.svg") !important;
     -o-mask-image: url("../icons/heart.svg") !important;
     -moz-mask-image: url("../icons/heart.svg") !important;
     mask-image: url("../icons/heart.svg") !important;
 }
-.reply-button-container button {
+.reply-button-container {
     -webkit-mask-image: url("../icons/reply.svg") !important;
     -o-mask-image: url("../icons/reply.svg") !important;
     -moz-mask-image: url("../icons/reply.svg") !important;
     mask-image: url("../icons/reply.svg") !important;
 }
-.repeat-button-container button {
+.repeat-button-container {
     -webkit-mask-image: url("../icons/repeat.svg") !important;
     -o-mask-image: url("../icons/repeat.svg") !important;
     -moz-mask-image: url("../icons/repeat.svg") !important;
diff --git a/src/Twig/Runtime.php b/src/Twig/Runtime.php
index bdba0717c9..5e7554e4a0 100644
--- a/src/Twig/Runtime.php
+++ b/src/Twig/Runtime.php
@@ -118,8 +118,10 @@ class Runtime implements RuntimeExtensionInterface, EventSubscriberInterface
 
     public function isFirefox(): bool
     {
-        $re = '/.*(?i)\bfirefox\b.*/m';
-        return preg_match(pattern: $re, subject: $this->request->headers->get('User-Agent')) === 1;
+        $re_has_chrome = '/.*(?i)\bchrome\b.*/m';
+        $re_has_gecko = '/.*(?i)\bgecko\b.*/m';
+        return (preg_match(pattern: $re_has_chrome, subject: $this->request->headers->get('User-Agent')) !== 1)
+            && (preg_match(pattern: $re_has_gecko, subject: $this->request->headers->get('User-Agent')) === 1);
     }
 
     // ----------------------------------------------------------
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 895fd7f6e1..a584f3d8ac 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -30,12 +30,11 @@
     {% endfor %}
 </head>
 
-<body class="bg" aria-live="polite">
+<body class="bg">
 <a id="anchor-menu" class="anchor-hidden"></a>
-<aside class="accessibility-menu" tabindex="0" aria-roledescription="{{ 'Learn keybindings to select each of the main page areas.' | trans }}">
+<aside class="accessibility-menu" tabindex="0">
     <h2>{{ 'Select page section:' | trans }}</h2>
     <br>
-
     <p>
         {% if is_firefox() == true %}
             <em><kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em>
@@ -44,23 +43,24 @@
         {% endif %}
     </p>
 
-    <ul>
-        <li><a href="#anchor-menu" accesskey="m">{{ 'This menu (press \'m\' to access).' | trans }}</a></li>
-        <li><a href="#anchor-left-panel" accesskey="h">{{ 'Left panel (press \'h\' to access).' | trans }}</a></li>
-        <li><a href="#anchor-main-content" accesskey="k">{{ 'Main content (press \'k\' to access).' | trans }}</a></li>
-        <li><a href="#anchor-main-page" accesskey="j">{{ 'Main page (press \'j\' to access).' | trans }}</a></li>
-        <li><a href="#anchor-right-panel" accesskey="l">{{ 'Right panel (press \'l\' to access).' | trans }}</a></li>
-    </ul>
+    <nav>
+        <ul>
+            <li><a href="#anchor-menu" accesskey="m">{{ 'This menu, (press \'m\' to access).' | trans }}</a></li>
+            <li><a href="#anchor-left-panel" accesskey="h">{{ 'Left panel (press \'h\' to access).' | trans }}</a></li>
+            <li><a href="#anchor-main-content" accesskey="k">{{ 'Main content (press \'k\' to access).' | trans }}</a></li>
+            <li><a href="#anchor-main-page" accesskey="j">{{ 'Main page (press \'j\' to access).' | trans }}</a></li>
+            <li><a href="#anchor-right-panel" accesskey="l">{{ 'Right panel (press \'l\' to access).' | trans }}</a></li>
+        </ul>
+    </nav>
 </aside>
 
 {% block header %}
     <header id='header' role="banner">
         {{ block("leftpanel", "stdgrid.html.twig") }}
 
-        <a id="anchor-main-page" class="anchor-hidden"></a>
-        <a id='instance' href="{{ path('main_public') }}" tabindex="0" aria-roledescription="This instance name.">
-            <div aria-hidden="true">{{ icon('logo', 'icon icon-logo') | raw }}</div>
-            <h1> {{ config('site', 'name') }} </h1>
+        <a role="navigation" rel="help" id="anchor-main-page" class="anchor-hidden"></a>
+        <a id='instance' href="{{ path('main_public') }}" tabindex="0" title="{{ 'This instance\'s name. Access public timeline.' | trans }}">
+            <h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1>
         </a>
 
         {% if app.user %}
@@ -70,8 +70,8 @@
 {% endblock header %}
 
 <div class="container">
-    <a id="anchor-main-content" class="anchor-hidden"></a>
-    <div class='content' aria-roledescription="Main content.">
+    <a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"></a>
+    <div class='content'>
         {% block nav %}{% endblock %}
         {% block body %}{% endblock %}
         {% block javascripts %}{% endblock javascripts %}
diff --git a/templates/network/public.html.twig b/templates/network/public.html.twig
index f2145a4af0..64e6ef8a6b 100644
--- a/templates/network/public.html.twig
+++ b/templates/network/public.html.twig
@@ -9,8 +9,8 @@
 
 {% block body %}
     {# Backwards compatibility with hAtom 0.1 #}
-    <main class="timeline" tabindex="0" role="main" aria-label={{ 'Main public timeline feed.' | trans }}>
-        <div class="h-feed hfeed notes" role="feed">
+    <main class="timeline" tabindex="0" role="feed">
+        <div class="h-feed hfeed notes">
             {% if notes is defined and notes is not empty %}
                 {% for conversation in notes %}
                     {% include '/note/view.html.twig' with {'note': conversation['note'], 'have_user': have_user, 'replies': conversation['replies']} only %}
diff --git a/templates/note/view.html.twig b/templates/note/view.html.twig
index 9cfd658bae..9b5ba77df3 100644
--- a/templates/note/view.html.twig
+++ b/templates/note/view.html.twig
@@ -1,15 +1,12 @@
 <article class="h-entry hentry note">
-    <div class="note-info" role="complementary">
+    <header class="note-info">
         {% set nickname = note.getActorNickname() %}
 
         {# TODO: this should link to the note's user profile? #}
-        <header class="note-author u-url" href="#" >
+        <h2 title='{{ 'This note author\'s nickname.' | trans }}' class="note-author u-url" href="#">
             {# Microformat's h-card properties indicates a face icon is a "u-logo" #}
-            <img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" aria-hidden="true">
-            <label aria-roledescription={{ 'This note author nickname.' | trans }}>
-                {{ nickname }}
-            </label>
-        </header>
+            <img title='{{ 'This note author\'s avatar.' | trans }}' class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" aria-hidden="true">{{ nickname }}
+        </h2>
 
         {% set reply_to = note.getReplyToNickname() %}
         {% if reply_to is not null and not skip_reply_to is defined %}
@@ -17,33 +14,26 @@
         {% endif %}
 
         {% if app.user %}
-        <div class="note-actions" aria-roledescription="{{ 'Favourite, reply and recycle this note.' | trans }}">
+        <div class="note-actions">
             {% if have_user %}
                 {% for current_action in get_note_actions(note) %}
                     {{ form_start(current_action) }}
                         {% if current_action.submit_favourite is defined %}
-                            <span title="Favourite this note." class="button-container favourite-button-container"
-                                {% if current_action.submit_favourite is defined %}{% endif %}>
-                                {{ form_widget(current_action.submit_favourite) }}
-                            </span>
+                            {{ form_widget(current_action.submit_favourite) }}
                         {% endif %}
                         {% if current_action.submit_repeat is defined %}
-                            <span title="Repeat this note." class="button-container repeat-button-container">
-                                {{ form_widget(current_action.submit_repeat) }}
-                            </span>
+                            {{ form_widget(current_action.submit_repeat) }}
                         {% endif %}
                         {% if current_action.reply is defined %}
-                            <span title="Reply to this note." class="button-container reply-button-container">
-                                {{ form_widget(current_action.reply) }}
-                            </span>
+                            {{ form_widget(current_action.reply) }}
                         {% endif %}
                     {{ form_end(current_action) }}
                 {% endfor %}
             {% endif %}
         </div>
         {% endif %}
-    </div>
-    <div class="e-content entry-content note-content" aria-roledescription="{{ 'The note content.'  | trans }}">
+    </header>
+    <div class="e-content entry-content note-content" title="{{ 'This note\'s content.' | trans }}">
         {% block markdown %}
             {% apply markdown_to_html %}
                 {{ note.getContent() }}
@@ -61,7 +51,7 @@
                 {% endfor %}
             </div>
         {% endif %}
-        <div class="note-links">
+        <div class="note-links" title="{{ 'Shared links in this note.' | trans }}">
             {% for link in note.getLinks() %}
                 {% for block in handle_event('ViewLink', {'link': link, 'note': note}) %}
                     {{ block | raw }}
diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig
index ba68810d96..1f6229f275 100644
--- a/templates/sidepanel/right/right.html.twig
+++ b/templates/sidepanel/right/right.html.twig
@@ -6,10 +6,10 @@
     <aside class="panel-content">
 
         {% if post_form is defined %}
-            <section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}>
-                <details class="section-title-details">
+            <section class="section-widget" title={{ 'Create a new note.' | trans }}>
+                <details class="section-title-details" title={{ 'Expand if you want to access more options.' | trans }}>
                     <summary class="section-title-summary">
-                        {{ "Create a note" | trans }} {{ icon('arrow-down', 'icon icon-details-open') | raw }}
+                        {{ "Create a note" | trans }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}
                     </summary>
 
                     {% for tab in tabs %}