fix dropdown behavior for repo permissions, make elements inside menu item non-focusable

Author: wxiaoguang

templates/repo/settings/collaboration.tmpl

@@ -19,7 +19,7 @@
 					</div>
 					<div class="ui eight wide column">
 						{{svg "octicon-shield-lock"}}
-						<div class="ui inline dropdown access-mode" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}">
+						<div class="ui inline dropdown access-mode" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}" data-last-value="{{printf "%d" .Collaboration.Mode}}">
 							<div class="text">{{if eq .Collaboration.Mode 1}}{{$.i18n.Tr "repo.settings.collaboration.read"}}{{else if eq .Collaboration.Mode 2}}{{$.i18n.Tr "repo.settings.collaboration.write"}}{{else if eq .Collaboration.Mode 3}}{{$.i18n.Tr "repo.settings.collaboration.admin"}}{{else}}{{$.i18n.Tr "repo.settings.collaboration.undefined"}}{{end}}</div>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">

web_src/js/features/aria.js

@@ -8,8 +8,9 @@ function generateAriaId() {
 
 // make the item has role=option, and add an id if there wasn't one yet.
 function prepareMenuItem($item) {
-  $item.attr({'role': 'option'});
   if (!$item.attr('id')) $item.attr('id', generateAriaId());
+  $item.attr({'role': 'option', '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

web_src/js/features/repo-settings.js

@@ -7,14 +7,22 @@ const {appSubUrl, csrfToken} = window.config;
 export function initRepoSettingsCollaboration() {
   // Change collaborator access mode
   const $dropdown = $('.page-content.repository .ui.dropdown.access-mode');
+  const $text = $dropdown.find('> .text');
   $dropdown.dropdown({
     action (_text, value) {
       $.post($dropdown.attr('data-url'), {
         _csrf: csrfToken,
         uid: $dropdown.attr('data-uid'),
         mode: value,
       });
+      $dropdown.attr('data-last-value', value);
       $dropdown.dropdown('hide');
+    },
+    onChange (_value, text, _$choice) {
+      $text.text(text); // update the text when using keyboard navigating
+    },
+    onHide () {
+      $dropdown.dropdown('set selected', $dropdown.attr('data-last-value')); // restore the really selected value
     }
   });
 }