UX: gives aria-label to topics count in category-row (#7307)

app/assets/javascripts/select-kit/components/category-row.js.es6

@@ -75,7 +75,7 @@ export default SelectKitRowComponent.extend({
     "options.countSubcategories"
   )
   topicCount(totalCount, topicCount, countSubcats) {
-    return `× ${countSubcats ? totalCount : topicCount}`.htmlSafe();
+    return countSubcats ? totalCount : topicCount;
   },
 
   @computed("displayCategoryDescription", "category.description")

app/assets/javascripts/select-kit/templates/components/category-row.hbs

@@ -5,12 +5,16 @@
           {{badgeForParentCategory}}
         {{/unless}}
         {{badgeForCategory}}
-        <span class="topic-count">{{topicCount}}</span>
+        <span class="topic-count" aria-label={{i18n "category_row.topic_count" count=topicCount}}>
+          &times; {{topicCount}}
+        </span>
       </div>
     {{else}}
       <div class="category-status">
         {{badgeForCategory}}
-        <span class="topic-count">{{topicCount}}</span>
+        <span class="topic-count" aria-label={{i18n "category_row.topic_count" count=topicCount}}>
+          &times; {{topicCount}}
+        </span>
       </div>
     {{/if}}
 

config/locales/client.en.yml

@@ -1429,6 +1429,9 @@ en:
     conditional_loading_section:
       loading: Loading...
 
+    category_row:
+      topic_count: "{{count}} topics in this category"
+
     select_kit:
       default_header_text: Select...
       no_content: No matches found