add aria attributes to delete icon

Author: wxiaoguang

templates/repo/home.tmpl

@@ -36,7 +36,11 @@
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
 		<div class="ui form gt-hidden gt-df gt-mt-4" id="topic_edit">
 			<div class="field gt-f1 gt-mr-3">
-				<div class="ui fluid multiple search selection dropdown">
+				<div class="ui fluid multiple search selection dropdown"
+						 data-text-count-prompt="{{.locale.Tr "repo.topic.count_prompt"}}"
+						 data-text-format-prompt="{{.locale.Tr "repo.topic.format_prompt"}}"
+						 data-text-remove="{{.locale.Tr "remove"}}"
+				>
 					<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if lt (Add $i 1) (len $.Topics)}},{{end}}{{end}}">
 					{{range .Topics}}
 						{{/* lalels generated by Fomantic still use `<i class="delete icon">`, to avoid mixing different style together and to remind future developers, use it instead of svg*/}}
@@ -51,10 +55,6 @@
 			</div>
 		</div>
 		{{end}}
-		<div class="gt-hidden" id="validate_prompt">
-			<span id="count_prompt">{{.locale.Tr "repo.topic.count_prompt"}}</span>
-			<span id="format_prompt">{{.locale.Tr "repo.topic.format_prompt"}}</span>
-		</div>
 		{{if .Repository.IsArchived}}
 			<div class="ui warning message">
 				{{.locale.Tr "repo.archive.title"}}

web_src/js/features/aria.js

@@ -6,14 +6,14 @@ function generateAriaId() {
   return `_aria_auto_id_${ariaIdCounter++}`;
 }
 
-// make the item has role=option, and add an id if there wasn't one yet.
+// make the item has role=menuitem/option, and add an id if there wasn't one yet.
 function prepareMenuItem($item) {
   if (!$item.attr('id')) $item.attr('id', generateAriaId());
   $item.attr({'role': 'menuitem', 'tabindex': '-1'});
   $item.find('a').attr('tabindex', '-1'); // as above, the elements inside the dropdown menu item should not be focusable, the focus should always be on the dropdown primary element.
 }
 
-// when the menu items are loaded from AJAX requests, the items are created dynamically
+// when the dropdown menu items are loaded from AJAX requests, the items are created dynamically
 const defaultCreateDynamicMenu = $.fn.dropdown.settings.templates.menu;
 $.fn.dropdown.settings.templates.menu = function(response, fields, preserveHTML, className) {
   const ret = defaultCreateDynamicMenu(response, fields, preserveHTML, className);
@@ -33,7 +33,7 @@ function attachOneDropdownAria($dropdown) {
   const $focusable = $textSearch.length ? $textSearch : $dropdown; // see comment below
   if (!$focusable.length) return;
 
-  // prepare menu list
+  // prepare dropdown menu list
   const $menu = $dropdown.find('> .menu');
   if (!$menu.attr('id')) $menu.attr('id', generateAriaId());
 
@@ -50,6 +50,7 @@ function attachOneDropdownAria($dropdown) {
   //    - otherwise, the dropdown control (low-level code) handles the Enter event, hides the dropdown menu
 
   // TODO: multiple selection is not supported yet.
+  // TODO: use combobox for dropdown with search input in the future
 
   $focusable.attr({
     'role': 'menu',

web_src/js/features/repo-home.js

@@ -6,36 +6,39 @@ const {appSubUrl, csrfToken} = window.config;
 
 export function initRepoTopicBar() {
   const mgrBtn = $('#manage_topic');
-  const editDiv = $('#topic_edit');
-  const viewDiv = $('#repo-topics');
+  if (!mgrBtn.length) return;
+
   const saveBtn = $('#save_topic');
+  const topicListDiv = $('#repo-topics');
   const topicDropdown = $('#topic_edit .dropdown');
   const topicDropdownSearch = topicDropdown.find('input.search');
   const topicForm = $('#topic_edit');
-  const topicPrompts = getPrompts();
+  const topicPrompts = {
+    countPrompt: topicDropdown.attr('data-text-count-prompt'),
+    formatPrompt: topicDropdown.attr('data-text-format-prompt'),
+    remove: topicDropdown.attr('data-text-remove'),
+  };
+
+  function addLabelDeleteIconAria($el) {
+    $el.attr({
+      'aria-label': topicPrompts.remove,
+      'role': 'button',
+    });
+  }
 
   mgrBtn.on('click', () => {
-    hideElem(viewDiv);
-    showElem(editDiv);
+    hideElem(topicListDiv);
+    showElem(topicForm);
+    addLabelDeleteIconAria(topicDropdown.find('i.delete.icon'));
     topicDropdownSearch.focus();
   });
 
   $('#cancel_topic_edit').on('click', () => {
-    hideElem(editDiv);
-    showElem(viewDiv);
+    hideElem(topicForm);
+    showElem(topicListDiv);
     mgrBtn.focus();
   });
 
-  function getPrompts() {
-    const hidePrompt = $('#validate_prompt');
-    const prompts = {
-      countPrompt: hidePrompt.children('#count_prompt').text(),
-      formatPrompt: hidePrompt.children('#format_prompt').text()
-    };
-    hidePrompt.remove();
-    return prompts;
-  }
-
   saveBtn.on('click', () => {
     const topics = $('input[name=topics]').val();
 
@@ -44,7 +47,7 @@ export function initRepoTopicBar() {
       topics
     }, (_data, _textStatus, xhr) => {
       if (xhr.responseJSON.status === 'ok') {
-        viewDiv.children('.topic').remove();
+        topicListDiv.children('.topic').remove();
         if (topics.length) {
           const topicArray = topics.split(',');
           for (let i = 0; i < topicArray.length; i++) {
@@ -54,8 +57,8 @@ export function initRepoTopicBar() {
             link.insertBefore(mgrBtn); // insert all new topics before manage button
           }
         }
-        hideElem(editDiv);
-        showElem(viewDiv);
+        hideElem(topicForm);
+        showElem(topicListDiv);
       }
     }).fail((xhr) => {
       if (xhr.status === 422) {
@@ -147,7 +150,8 @@ export function initRepoTopicBar() {
     onLabelCreate(value) {
       value = value.toLowerCase().trim();
       this.attr('data-value', value).contents().first().replaceWith(value);
-      return $(this);
+      addLabelDeleteIconAria(this.find('i.delete.icon'));
+      return this;
     },
     onAdd(addedValue, _addedText, $addedChoice) {
       addedValue = addedValue.toLowerCase().trim();