add aria attributes to cake day elements (#841)

Co-authored-by: BentiGorlich <benjamin_g@posteo.de>
MbinOrg · Jun 19, 2024 · 032c917 · 032c917
1 parent ccb672e
commit 032c917
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/assets/styles/components/_popover.scss b/assets/styles/components/_popover.scss
@@ -63,6 +63,14 @@
       font-size: .9rem;
       list-style: none;
       padding: 0;
+
+      li {
+        div {
+          i {
+            padding-right: .5rem;
+          }
+        }
+      }
     }
 
     .user__actions {

diff --git a/assets/styles/components/_sidebar.scss b/assets/styles/components/_sidebar.scss
@@ -176,6 +176,11 @@
         padding: 0;
       }
 
+      div {
+        i {
+          padding-right: .5rem;
+        }
+      }
     }
   }
 

diff --git a/templates/user/_info.html.twig b/templates/user/_info.html.twig
@@ -19,7 +19,7 @@
     {% endif %}
     <ul class="info">
         <li>{{ 'joined'|trans }}: {{ component('date', {date: user.createdAt}) }}</li>
-        <li>{{ 'cake_day'|trans }}: <span><i class="fa-solid fa-cake" style="margin-right: .5em"></i>{{ user.createdAt|format_date('short', '', null, 'gregorian', mbin_lang()) }}</span></li>
+        <li>{{ 'cake_day'|trans }}: <div><i class="fa-solid fa-cake" aria-hidden="true"></i> <span>{{ user.createdAt|format_date('short', '', null, 'gregorian', mbin_lang()) }}</span></div></li>
         {% if app.user is defined and app.user is not null and app.user.admin() and user.apId is not null %}
             <li>
                 {{ 'last_updated'|trans }}: {{ component('date', {date: user.apFetchedAt}) }}

diff --git a/templates/user/_user_popover.html.twig b/templates/user/_user_popover.html.twig
@@ -22,8 +22,10 @@
             <ul>
                 <li>{{ 'joined'|trans }}: {{ component('date', {date: user.createdAt}) }}</li>
                 <li>
-                    <i class="fa-solid fa-cake" style="margin-right: .5em;"></i>
-                    <span>{{ user.createdAt|format_date('short', '', null, 'gregorian', mbin_lang()) }}</span>
+                    <div title="{{ 'cake_day'|trans }}" aria-label="{{ 'cake_day'|trans }}">
+                        <i class="fa-solid fa-cake" aria-hidden="true"></i>
+                        <span>{{ user.createdAt|format_date('short', '', null, 'gregorian', mbin_lang()) }}</span>
+                    </div>
                 </li>
                 <li>
                     {%- set TYPE_ENTRY = constant('App\\Repository\\ReputationRepository::TYPE_ENTRY') -%}
-Original file line number
+Diff line change
@@ Expand Up / @@ -176,6 +176,11 @@ @@
             padding: 0;
           }
+          div {
+            i {
+              padding-right: .5rem;
+            }
+          }
         }
       }
@@ Expand Down @@