fix(badges): Changes based on feedback

zendesk · Aug 31, 2020 · d6bdc4d · d6bdc4d
1 parent 236be98
commit d6bdc4d
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 24 deletions.
diff --git a/style.css b/style.css
@@ -2757,26 +2757,37 @@ ul {
 /***** Community Badges *****/
 /* Styles labels used next to the authors of article comments, community posts, and community comments */
 .community-badge-titles {
-  background-color: #04444D;
+  background-color: #04444d;
   border-radius: 4px;
   color: #fff;
   font-size: 12px;
   font-weight: 600;
-  margin-right: 2px;
   padding: 2px 8px;
   vertical-align: middle;
   white-space: nowrap;
   display: inline-block;
   margin-left: 10px;
+  margin-right: 2px;
+}
+
+[dir="rtl"] .community-badge-titles {
+  margin-right: 10px;
+  margin-left: 2px;
 }
 
 .community-badge-container-achievements {
-  margin-top: 0.4em;
+  margin-top: 5px;
 }
 
 .community-badge-achievements {
   display: inline-block;
-  margin-right: 0.5em;
+  margin-left: 0px;
+  margin-right: 5px;
+}
+
+[dir="rtl"] .community-badge-achievements {
+  margin-right: 0px;
+  margin-left: 0px;
 }
 
 .community-badge-achievements img {

diff --git a/styles/_community_badge.scss b/styles/_community_badge.scss
@@ -1,26 +1,37 @@
 /***** Community Badges *****/
 /* Styles labels used next to the authors of article comments, community posts, and community comments */
 .community-badge-titles {
-  background-color: #04444D;
+  background-color: #04444d;
   border-radius: 4px;
   color: #fff;
   font-size: 12px;
   font-weight: $font-weight-semibold;
-  margin-right: 2px;
   padding: 2px 8px;
   vertical-align: middle;
   white-space: nowrap;
   display: inline-block;
   margin-left: 10px;
+  margin-right: 2px;
+}
+
+[dir="rtl"] .community-badge-titles {
+  margin-right: 10px;
+  margin-left: 2px;
 }
 
 .community-badge-container-achievements {
-  margin-top: 0.4em;
+  margin-top: 5px;
 }
 
 .community-badge-achievements {
   display: inline-block;
-  margin-right: 0.5em;
+  margin-left: 0px;
+  margin-right: 5px;
+}
+
+[dir="rtl"] .community-badge-achievements {
+  margin-right: 0px;
+  margin-left: 0px;
 }
 
 .community-badge-achievements img {

diff --git a/templates/article_page.hbs b/templates/article_page.hbs
@@ -212,7 +212,7 @@
                             {{/link}}
                             {{#each author.badges}}
                               {{#is category_slug "titles"}}
-                                <span class="community-badge community-badge-{{category_slug}}" title="{{description}}">
+                                <span class="community-badge community-badge-titles" title="{{description}}" aria-label="{{name}}">
                                   {{#if icon_url}}
                                     <img src="{{icon_url}}" alt="" />
                                   {{/if}}
@@ -235,8 +235,8 @@
                             {{#each author.badges}}
                               {{#is category_slug "achievements"}}
                                 {{#if icon_url}}
-                                  <div class="community-badge community-badge-{{category_slug}}">
-                                    <img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" />
+                                  <div class="community-badge community-badge-achievements">
+                                    <img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" aria-label="{{name}}" />
                                   </div>
                                 {{/if}}
                               {{/is}}

diff --git a/templates/community_post_page.hbs b/templates/community_post_page.hbs
@@ -63,7 +63,7 @@
                   {{/link}}
                   {{#each post.author.badges}}
                     {{#is category_slug "titles"}}
-                      <span class="community-badge community-badge-{{category_slug}}" title="{{description}}">
+                      <span class="community-badge community-badge-titles" title="{{description}}" aria-label="{{name}}">
                         {{#if icon_url}}
                           <img src="{{icon_url}}" alt="" />
                         {{/if}}
@@ -84,8 +84,8 @@
                   {{#each post.author.badges}}
                     {{#is category_slug "achievements"}}
                       {{#if icon_url}}
-                        <div class="community-badge community-badge-{{category_slug}}">
-                          <img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" />
+                        <div class="community-badge community-badge-achievements">
+                          <img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" aria-label="{{name}}" />
                         </div>
                       {{/if}}
                     {{/is}}
@@ -200,7 +200,7 @@
                       {{/link}}
                       {{#each author.badges}}
                         {{#is category_slug "titles"}}
-                          <span class="community-badge community-badge-{{category_slug}}" title="{{description}}">
+                          <span class="community-badge community-badge-titles" title="{{description}}" aria-label="{{name}}">
                             {{#if icon_url}}
                               <img src="{{icon_url}}" alt="" />
                             {{/if}}
@@ -223,8 +223,8 @@
                       {{#each author.badges}}
                         {{#is category_slug "achievements"}}
                           {{#if icon_url}}
-                            <div class="community-badge community-badge-{{category_slug}}">
-                              <img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" />
+                            <div class="community-badge community-badge-achievements">
+                              <img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" aria-label="{{name}}" />
                             </div>
                           {{/if}}
                         {{/is}}

diff --git a/templates/user_profile_page.hbs b/templates/user_profile_page.hbs
@@ -18,7 +18,7 @@
           {{/if}}
           {{#each user.badges}}
             {{#is category_slug "titles"}}
-              <span class="community-badge community-badge-{{category_slug}}" title="{{description}}">
+              <span class="community-badge community-badge-titles" title="{{description}}" aria-label="{{name}}">
                 {{#if icon_url}}
                   <img src="{{icon_url}}" alt="" />
                 {{/if}}
@@ -31,8 +31,8 @@
           {{#each user.badges}}
             {{#is category_slug "achievements"}}
               {{#if icon_url}}
-                <div class="community-badge community-badge-{{category_slug}}">
-                  <img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" />
+                <div class="community-badge community-badge-achievements">
+                  <img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" aria-label="{{name}}" />
                 </div>
               {{/if}}
             {{/is}}
@@ -250,9 +250,9 @@
               <span class="profile-section-description">{{t 'badges_description' name=user.name}}</span>
             </header>
 
-            <div class="profile-badges-items">
+            <ul class="profile-badges-items">
               {{#each user.badges}}
-                <section role="region" class="profile-badges-item" aria-labelledby="title-{{id}}" aria-describedby="desc-{{id}}">
+                <li role="region" class="profile-badges-item" aria-labelledby="title-{{id}}" aria-describedby="desc-{{id}}">
                   <div class="profile-badges-item-image">
                     {{#if icon_url}}
                       <img class="badge" src="{{icon_url}}" alt="">
@@ -274,9 +274,9 @@
                       {{date assigned_at format='medium'}}
                     </p>
                   </div>
-                </section>
+                </li>
               {{/each}}
-            </div>
+            </ul>
           {{else}}
             <span class="no-activity">{{t 'no_badges'}}</span>
           {{/if}}