fix

Author: wxiaoguang

web_src/js/components/DiffCommitSelector.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import {SvgIcon} from '../svg.ts';
 import {GET} from '../modules/fetch.ts';
+import {generateAriaId} from '../modules/fomantic/base.ts';
 
 export default {
   components: {SvgIcon},
@@ -15,6 +16,8 @@ export default {
       commits: [],
       hoverActivated: false,
       lastReviewCommitSha: null,
+      uniqueIdMenu: generateAriaId(),
+      uniqueIdShowAll: generateAriaId(),
     };
   },
   computed: {
@@ -113,12 +116,10 @@ export default {
       }
       // set correct tabindex to allow easier navigation
       this.$nextTick(() => {
-        const expandBtn = this.$el.querySelector('#diff-commit-list-expand');
-        const showAllChanges = this.$el.querySelector('#diff-commit-list-show-all');
         if (this.menuVisible) {
-          this.focusElem(showAllChanges, expandBtn);
+          this.focusElem(this.$refs.showAllChanges, this.$refs.expandBtn);
         } else {
-          this.focusElem(expandBtn, showAllChanges);
+          this.focusElem(this.$refs.expandBtn, this.$refs.showAllChanges);
         }
       });
     },
@@ -189,23 +190,23 @@ export default {
 };
 </script>
 <template>
-  <div class="ui scrolling dropdown custom">
+  <div class="ui scrolling dropdown custom diff-commit-selector">
     <button
+      ref="expandBtn"
       class="ui basic button"
-      id="diff-commit-list-expand"
       @click.stop="toggleMenu()"
       :data-tooltip-content="locale.filter_changes_by_commit"
       aria-haspopup="true"
-      aria-controls="diff-commit-selector-menu"
       :aria-label="locale.filter_changes_by_commit"
-      aria-activedescendant="diff-commit-list-show-all"
+      :aria-controls="uniqueIdMenu"
+      :aria-activedescendant="uniqueIdShowAll"
     >
       <svg-icon name="octicon-git-commit"/>
     </button>
     <!-- this dropdown is not managed by Fomantic UI, so it needs some classes like "transition" explicitly -->
-    <div class="left menu transition" id="diff-commit-selector-menu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'">
+    <div class="left menu transition" :id="uniqueIdMenu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'">
       <div class="loading-indicator is-loading" v-if="isLoading"/>
-      <div v-if="!isLoading" class="vertical item" id="diff-commit-list-show-all" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()">
+      <div v-if="!isLoading" class="item" :id="uniqueIdShowAll" ref="showAllChanges" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()">
         <div class="gt-ellipsis">
           {{ locale.show_all_commits }}
         </div>
@@ -216,7 +217,7 @@ export default {
       <!-- only show the show changes since last review if there is a review AND we are commits ahead of the last review -->
       <div
         v-if="lastReviewCommitSha != null" role="menuitem"
-        class="vertical item"
+        class="item"
         :class="{disabled: !commitsSinceLastReview}"
         @keydown.enter="changesSinceLastReviewClick()"
         @click="changesSinceLastReviewClick()"
@@ -231,8 +232,8 @@ export default {
       <span v-if="!isLoading" class="info text light-2">{{ locale.select_commit_hold_shift_for_range }}</span>
       <template v-for="commit in commits" :key="commit.id">
         <div
-          class="vertical item" role="menuitem"
-          :class="{selection: commit.selected, hovered: commit.hovered}"
+          class="item" role="menuitem"
+          :class="{active: commit.selected}"
           @keydown.enter.exact="commitClicked(commit.id)"
           @keydown.enter.shift.exact="commitClickedShift(commit)"
           @mouseover.shift="highlight(commit)"
@@ -262,46 +263,37 @@ export default {
   </div>
 </template>
 <style scoped>
-  .hovered:not(.selection) {
-    background-color: var(--color-small-accent) !important;
-  }
-  .selection {
-    background-color: var(--color-accent) !important;
-  }
-
-  .info {
-    display: inline-block;
-    padding: 7px 14px !important;
-    line-height: 1.4;
-    width: 100%;
-  }
-
-  #diff-commit-selector-menu {
+  .ui.dropdown.diff-commit-selector .menu {
+    margin-top: 0.25em;
     overflow-x: hidden;
     max-height: 450px;
   }
 
-  #diff-commit-selector-menu .loading-indicator {
+  .ui.dropdown.diff-commit-selector .menu .loading-indicator {
     height: 200px;
     width: 350px;
   }
 
-  #diff-commit-selector-menu .item,
-  #diff-commit-selector-menu .info {
-    display: flex !important;
+  .ui.dropdown.diff-commit-selector .menu > .item,
+  .ui.dropdown.diff-commit-selector .menu > .info {
+    display: flex;
     flex-direction: row;
     line-height: 1.4;
+    gap: 0.25em;
     padding: 7px 14px !important;
+  }
+
+  .ui.dropdown.diff-commit-selector .menu > .item:not(:first-child),
+  .ui.dropdown.diff-commit-selector .menu > .info:not(:first-child) {
     border-top: 1px solid var(--color-secondary) !important;
-    gap: 0.25em;
   }
 
-  #diff-commit-selector-menu .item:focus {
+  .ui.dropdown.diff-commit-selector .menu > .item:focus {
     color: var(--color-text);
     background: var(--color-hover);
   }
 
-  #diff-commit-selector-menu .commit-list-summary {
+  .ui.dropdown.diff-commit-selector .menu .commit-list-summary {
     max-width: min(380px, 96vw);
   }
 </style>