[CARDS][Note] Removed incorrect aria attributes, polished Note card

public/assets/default_theme/pages/feeds.css

@@ -321,7 +321,12 @@ embed header {
     font-size: 0.937rem;
     background: var(--gradient-backwards);
     padding: 4px 8px;
-    border-radius: 0 0 var(--s) 0;
+    border-radius: var(--s) 0 var(--s) var(--s);
+}
+
+.note-complementary:empty,
+.note-complementary:-moz-only-whitespace {
+    display: none !important;
 }
 
 .note-complementary-info a {

public/assets/default_theme/root.css

@@ -16,8 +16,8 @@
         --shadow: 0 5px 20px -10px rgba(255,255,255,0.1)!important;
         --shadow-inset-accent: inset 0 0 0 2px var(--accent);
         --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round;
-        --gradient: linear-gradient(5deg,var(--border) -33%,transparent 66%)!important;
-        --gradient-backwards: linear-gradient(-5deg,var(--border) -33%,transparent 66%)!important;
+        --gradient: linear-gradient(5deg,var(--border) -33%,transparent 66%) !important;
+        --gradient-backwards: linear-gradient(-5deg,var(--border) -33%,transparent 66%) !important;
     }
 }
 
@@ -28,10 +28,10 @@
         --background-card: #f0f0f0;
         --border: #C2C2C2;
         --accent: #a22430;
-        --shadow: 0 25px 42px -10px rgba(0,0,0,0.1)!important;
+        --shadow: 0 5px 20px -10px rgba(0,0,0,0.1)!important;
         --shadow-inset-accent: inset 0 0 0 2px var(--accent);
         --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round;
-        --gradient: linear-gradient(10deg,var(--background-hard) 0,transparent 60%)!important;
-        --gradient-backwards: linear-gradient(290deg,var(--background-hard) 0,var(--background-card) 100%)!important;
+        --gradient: linear-gradient(10deg,var(--background-hard) 0,transparent) !important;
+        --gradient-backwards: linear-gradient(290deg,var(--background-hard) 0,var(--background-card) 100%) !important;
     }
 }

templates/cards/blocks/note.html.twig

@@ -93,8 +93,8 @@
 
 {% 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" role="doc-credit"
-       title="{% trans %} %nickname%'s profile {% endtrans %}">
+    <a href="{{ actor_url }}" class="note-author-url u-url"
+       title="{{ nickname }}{{ '\'s profile' | trans }}">
         {% if fullname is not null %}{{ fullname }}{% else %}{{ nickname }}{% endif %}
     </a>
 
@@ -128,16 +128,17 @@
 {% endblock note_info %}
 
 {% block note_complementary %}
+    {% set complementary_info_array = handle_event('AppendCardNote', { 'note': note, 'request': app.request }) %}
     <aside
         title="{{ 'Additional note context information and actions' | trans }}"
-        class="note-complementary"
-        role="complementary">
+        class="note-complementary">
+    {% if complementary_info_array is not empty %}
         <div class="note-complementary-info">
-            {% for complementary_info in handle_event('AppendCardNote', { 'note': note, 'request': app.request }) %}
+            {% for complementary_info in complementary_info_array %}
                 {% set actor_count = complementary_info['actors'] | length %}
                 {% set counter = 0 %}
                 {% for complementary_info_actor in complementary_info['actors'] %}
-                <span role="doc-acknowledgments">
+                <span>
                     {% 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>
@@ -167,6 +168,7 @@
                 </span>
             {% endfor %}
         </div>
+    {% endif %}
     {{ block('note_actions', 'cards/blocks/note.html.twig') }}
     </aside>
 {% endblock note_complementary %}

templates/cards/macros/note.html.twig

@@ -8,12 +8,11 @@
     {% set note_language = note.getNoteLanguageShortDisplay() %}
 
     <article
-        id="{{ 'note-anchor-' ~ note.getId() }}"
-        class="h-entry hentry note"
-        lang="{{ note.getLanguageLocale() }}"
-        title="{{'A note by actor' | trans}} {{ nickname }}"
-        role="article"
-        tabindex="0">
+            tabindex="0"
+            title="{{'A note by actor' | trans}} {{ nickname }}"
+            id="{{ 'note-anchor-' ~ note.getId() }}"
+            class="h-entry hentry note"
+            lang="{{ note.getLanguageLocale() }}">
         {{ block('note_sidebar', 'cards/blocks/note.html.twig') }}
 
         <div class="note-wrapper">
@@ -21,7 +20,11 @@
 
             <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">
+                    <em
+                            tabindex="0"
+                            class="note-replies-parent"
+                            title="{{'This is a reply with depth: ' | trans}} {{ extra.depth }}"
+                            aria-flowto="note-anchor-">
                         {{'in reply to' | trans}} {{ extra.parent | raw }}
                     </em>
                 {% endif %}
@@ -46,7 +49,11 @@
     {% set actor_url = actor.getUrl() %}
     {% set mention = mention(actor) %}
 
-    <article class="h-entry hentry note" lang={{ note.getLanguageLocale() }}>
+    <article
+            tabindex="0"
+            title="{{'A note by actor' | trans}} {{ nickname }}"
+            class="h-entry hentry note"
+            lang={{ note.getLanguageLocale() }}>
         {{ block('note_sidebar', 'cards/blocks/note.html.twig') }}
         <div class="note-wrapper">
             <header class="note-info">