[CARDS][Note] Note's 'in reply to' information added, overall polish of feeds templates and proper titles added for every single section that makes up a note

components/Collection/templates/collection/notes.html.twig

@@ -14,11 +14,11 @@
     {% endfor %}
 
     {% if notes is defined %}
-        <header class="feed-header">
+        <header class="feed-header" title="{{ 'Current page main header' | trans }}">
             {% set current_path = app.request.get('_route') %}
             {% if page_title is defined %}
                 {% if current_path starts with 'feed_' or 'conversation' in current_path %}
-                    <h1 class="section-title">{{ page_title | trans }}</h1>
+                    <h1 class="section-title" role="heading">{{ page_title | trans }}</h1>
                 {% endif %}
             {% else %}
                 {% if current_path starts with 'search' %}
@@ -27,12 +27,12 @@
                     <h1 class="section-title">{{ 'Notes' | trans }}</h1>
                 {% endif %}
             {% endif %}
-            <nav class="feed-actions">
+            <nav class="feed-actions" title="{{ 'Actions that change how the feed behaves' | trans }}">
-                <details class="feed-actions-details">
+                <details class="feed-actions-details" role="group">
                     <summary>
                         {{ icon('filter', 'icon icon-feed-actions') | raw }} {# button-container #}
                     </summary>
-                    <menu class="feed-actions-details-dropdown">
+                    <menu class="feed-actions-details-dropdown" role="toolbar">
                         {% for block in handle_event('AddFeedActions', app.request, notes is defined and notes is not empty) %}
                             {{ block | raw }}
                         {% endfor %}
@@ -43,15 +43,15 @@
 
         {% if notes is not empty %}
             {# Backwards compatibility with hAtom 0.1 #}
-            <section class="feed h-feed hfeed notes" tabindex="0" role="feed">
+            <section class="feed h-feed hfeed notes" role="feed" aria-busy="false" title="{{ 'Feed content' | trans }}">
                 {% for conversation in notes %}
                     {% block current_note %}
                         {% if conversation is instanceof('array') %}
-                            {{ noteView.note_vanilla(conversation['note'], conversation['replies']) }}
+                            {{ noteView.note_vanilla(conversation['note'], conversation['replies'], {'depth': 0}) }}
                         {% else %}
                             {{ noteView.note_vanilla(conversation) }}
                         {% endif %}
-                        <hr class="hr-replies-end" tabindex="0" title="{{ 'End of note and replies.' | trans }}">
+                        <hr class="hr-replies-end" role="separator" aria-label="{{ 'Marks the end of previous conversation\'s initial note' | trans }}">
                     {% endblock current_note %}
                 {% endfor %}
             </section>

public/assets/default_theme/pages/feeds.css

@@ -161,16 +161,22 @@
 }
 
 .note-replies-indicator {
-    content: '\201C';
     font-size: 32px;
     opacity: 0.66;
     margin-right: 8px;
     float: left;
 }
 
-.note-replies-start {
+.note-replies-indicator::before {
-    margin-top: var(--s);
+    content: '\201C';
-    margin-bottom: var(--s);
+    font-size: 1em;
+    opacity: 0.66;
+    margin-right: 0.33em;
+}
+
+.note-replies-parent {
+    opacity: 0.66;
+    font-size: 0.937rem;
 }
 
 .h-entry a:focus {
@@ -239,32 +245,24 @@ embed header {
     border-radius: 0 var(--s) 0 0;
     display: flex;
     line-height: initial;
-    padding: 4px var(--s) 4px 0;
+    padding: 4px var(--s) 0 0;
 }
 
 .note-info {
     display: flex;
-    flex-wrap: wrap;
+    align-items: flex-start;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.note-info-start {
-    flex: 1;
-    width: 15px;
     white-space: nowrap;
     overflow: auto;
     touch-action: manipulation;
     text-overflow: ellipsis;
 }
 
-.note-info-start:focus,
+.note-info .note-conversation-info,
-.note-info-start:hover {
+.note-info .note-author-uri {
-    text-align: left;
+    margin-left: 4px;
-    direction: rtl;
 }
 
-.note-info-start small {
+.note-info small {
     opacity: 0.5;
 }
 
@@ -338,7 +336,7 @@ embed header {
 .note-content {
     border-radius: 0 0 var(--s) var(--s);
     display: block;
-    padding: 0 4px 8px 0;
+    padding: 0 0 8px 0;
     flex: 1;
 }
 
@@ -349,6 +347,7 @@ embed header {
 }
 
 .hr-replies-end {
+    margin-top: var(--xl);
     margin-bottom: var(--xl);
 }
 
@@ -414,11 +413,10 @@ embed header {
         margin-left: 0.33em;
     }
 
-    .note-replies-indicator {
+    .note-replies-indicator::before {
         content: '\201C';
         font-size: 1em;
         opacity: 0.66;
         margin-right: 0.33em;
-        float: left;
     }
 }

templates/base.html.twig

@@ -100,14 +100,14 @@
     </header>
 {% endblock header %}
 
-<main class="page-content-wrapper">
+<a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"
-    <a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"
+   title="{{ 'Anchor to main content' | trans }}"></a>
-       title="{{ 'Press tab to access main content.' | trans }}"></a>
+<main class="page-content-wrapper" title="{{ 'Page main content' | trans }}">
-    <section class='page-content accessibility-target'>
+    <div class='page-content accessibility-target' role="presentation">
         {% block nav %}{% endblock %}
         {% block body %}{% endblock %}
         {% block javascripts %}{% endblock javascripts %}
-    </section>
+    </div>
 </main>
 </body>
 </html>

templates/cards/blocks/note.html.twig

@@ -26,13 +26,18 @@
     {% import '/cards/macros/note.html.twig' as noteView %}
 
     {% if replies is defined and replies is not empty %}
-        <section class="note-replies">
+        <section class="note-replies" title="{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}">
-            <div class="note-replies-start" tabindex="0" title="{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}"></div>
+            <div class="note-replies-start"></div>
             <div class="u-in-reply-to replies">
                 {% for conversation in replies %}
-                    <hr tabindex="0" title="{{ 'Start of reply' | trans }}">
+                    {% if extra.depth is defined  %}
-                    <span class="note-replies-indicator">“</span>
+                        {% set depth_increment = {'depth': extra.depth + 1} %}
-                    {{ noteView.note_vanilla(conversation['note'], conversation['replies']) }}
+                        {% set parent = {'parent': block('note_author')} %}
+                        {% set extra = extra|merge(depth_increment) %}
+                        {% set extra = extra|merge(parent) %}
+                    {% endif %}
+                    <span class="note-replies-indicator" role="presentation"></span>
+                    {{ noteView.note_vanilla(conversation['note'], conversation['replies'], extra) }}
                 {% endfor %}
             </div>
         </section>
@@ -43,7 +48,7 @@
     {% if hide_attachments is not defined %}
         {% if note.getAttachments() is not empty %}
             <section class="note-attachments" tabindex="0"
-                     title="{{ 'Note attachments.' | trans }}">
+                     title="{{ 'Attachments for this note' | trans }}">
                 {% for attachment in note.getAttachments() %}
                     {% include 'cards/blocks/attachment.html.twig' with {'attachment': attachment, 'note': note, 'title': attachment.getBestTitle(note)} only %}
                 {% endfor %}
@@ -66,7 +71,7 @@
 
 {% block note_text %}
     <div class="note-text" tabindex="0"
-         title="{{ 'Note text content.' | trans }}">
+         title="{{ 'Main note content' | trans }}">
         {% set paragraph_array = note.getRenderedSplit() %}
         {% if 'conversation' not in app.request.get('_route') and paragraph_array | length > 3 %}
             <p>{{ paragraph_array[0] | raw }}</p>
@@ -88,23 +93,18 @@
 
 {% block note_author %}
     {# Microformat's h-card properties indicates a face icon is a "u-logo" #}
-    <a href="{{ actor_url }}" class="note-author-url u-url" tabindex="0"
+    <a href="{{ actor_url }}" class="note-author-url u-url" role="doc-credit"
-       title="{{ 'Begin a note by the user: ' | trans }} {{ nickname }}">
+       title="{{ nickname }}{{ '\'s profile' | trans }}">
-        {% if fullname is not null %}
+        {% if fullname is not null %}{{ fullname }}{% else %}{{ nickname }}{% endif %}
-            {{ fullname }}
-        {% else %}
-            {{ nickname }}
-        {% endif %}
     </a>
 
-    <small class="note-author-uri">
+    <small class="note-author-uri" title="{{ 'Author related permalinks' | trans }}">
-        <a href="{{ actor_uri }}"
+        <a href="{{ actor_uri }}" class="u-url" title="{{ nickname }} {{ '\'s permalink' | trans }}">{{ mention }}</a>
-           class="u-url">{{ mention }}</a>
     </small>
 {% endblock note_author %}
 
 {% block note_sidebar %}
-    <aside class="note-sidebar">
+    <aside class="note-sidebar" title="{{ nickname }} {{ 'avatar' | trans }}">
         {% set actor_avatar_dimensions = actor.getAvatarDimensions() %}
         <img class="u-logo avatar" src="{{ note.getActorAvatarUrl() }}"
              alt="{{ nickname }}'s avatar"
@@ -114,25 +114,30 @@
 {% endblock note_sidebar %}
 
 {% block note_info %}
-    <span class="note-info-start">
+    <header class="note-info" title="{{ 'Information about note\'s author' | trans }}">
         {{ block('note_author') }}
-        <small class="note-conversation-info">
+        <small class="note-conversation-info" title="{{ 'Conversation related permalinks' | trans }}">
             <a href="{{ note.getConversationUrl() }}"
+               title="{{ 'Conversation\'s permalink' | trans }}"
                class="note-conversation-url">{{ 'in conversation' | trans }}</a>
             <a href="{{ note.getUrl() }}"
+               title="{{ 'Note\'s permalink' | trans }}"
                class="note-url">{{ note.getModified() | ago }}</a>
         </small>
-    </span>
+    </header>
 {% endblock note_info %}
 
 {% block note_complementary %}
-    <aside title="{{ 'Note\'s complementary information' | trans }}" class="note-complementary">
+    <aside
+        title="{{ 'Additional note context information and actions' | trans }}"
+        class="note-complementary"
+        role="complementary">
         <div class="note-complementary-info">
             {% for complementary_info in handle_event('AppendCardNote', { 'note': note, 'request': app.request }) %}
                 {% set actor_count = complementary_info['actors'] | length %}
                 {% set counter = 0 %}
                 {% for complementary_info_actor in complementary_info['actors'] %}
-                <span>
+                <span role="doc-acknowledgments">
                     {% if app.user is not null %}
                         {% if complementary_info_actor is defined and complementary_info_actor.getNickname() != app.user.nickname %}
                             <a href="{{ complementary_info_actor.getUrl() }}">{{ complementary_info_actor.getNickname() }}{% if actor_count > 1 and counter < actor_count - 2 %}{{ ', ' | trans }}{% endif %}</a>

templates/cards/macros/note.html.twig

@@ -1,4 +1,4 @@
-{% macro note_vanilla(note, replies) %}
+{% macro note_vanilla(note, replies, extra) %}
     {% set actor = note.getActor() %}
     {% set nickname = actor.getNickname() %}
     {% set fullname = actor.getFullname() %}
@@ -7,16 +7,24 @@
     {% set mention = mention(actor) %}
     {% set note_language = note.getNoteLanguageShortDisplay() %}
 
-    <article id="{{ 'note-anchor-' ~ note.getId() }}"
+    <article
-             class="h-entry hentry note" lang={{ note.getLanguageLocale() }}>
+        id="{{ 'note-anchor-' ~ note.getId() }}"
+        class="h-entry hentry note"
+        lang="{{ note.getLanguageLocale() }}"
+        title="{{'A note by actor' | trans}} {{ nickname }}"
+        role="article"
+        tabindex="0">
         {{ block('note_sidebar', 'cards/blocks/note.html.twig') }}
 
         <div class="note-wrapper">
-            <header class="note-info">
             {{ block('note_info', 'cards/blocks/note.html.twig') }}
-            </header>
 
-            <section role="dialog" class="e-content entry-content note-content">
+            <section class="e-content entry-content note-content" title="{{ 'Note\'s main content' | trans }}">
+                {% if extra.parent is defined  %}
+                    <em class="note-replies-parent" title="{{'Reply with depth' | trans}} {{ extra.depth }}" tabindex="0">
+                        {{'in reply to' | trans}} {{ extra.parent | raw }}
+                    </em>
+                {% endif %}
                 {{ block('note_text', 'cards/blocks/note.html.twig') }}
                 {{ block('note_attachments', 'cards/blocks/note.html.twig') }}
                 {{ block('note_links', 'cards/blocks/note.html.twig') }}
@@ -25,7 +33,9 @@
         {{ block('note_complementary', 'cards/blocks/note.html.twig') }}
     </article>
 
+    {% if replies is defined %}
         {{ block('note_replies', 'cards/blocks/note.html.twig') }}
+    {% endif %}
 {% endmacro note_vanilla %}
 
 {% macro note_compact(note) %}