Primary audio fixes (#1719)

* Fix case when subIndex is not assigned

* Fix incorrect assignment of primary card audio

* Improve opacity style

* Improve styles for :focus-visible

2 files changed, 25 insertions, 16 deletions

diff --git a/ext/css/display.css b/ext/css/display.css
index b46540c7..ac9dae0a 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -2067,25 +2067,32 @@ button.footer-notification-close-button {
     opacity: 0;
     transition: opacity var(--animation-duration) linear;
 }
-.popup-menu-item-group:hover .popup-menu-item-set-primary-audio-button .popup-menu-item-icon {
+.popup-menu-item-audio-button:hover~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
+.popup-menu-item-audio-button:active~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
+.popup-menu-item-audio-button:focus~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon {
     opacity: 0.25;
 }
-.popup-menu-item-group .popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
-.popup-menu-item-group .popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
-.popup-menu-item-group .popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
+.popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
+.popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
+.popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
     opacity: 0.375;
 }
-.popup-menu-item-group .popup-menu-item-set-primary-audio-button:focus:not(:focus-visible) .popup-menu-item-icon {
+.popup-menu-item-set-primary-audio-button:focus:not(:focus-visible) .popup-menu-item-icon {
     opacity: 0;
 }
-.popup-menu-item-group .popup-menu-item-set-primary-audio-button:hover:not(:focus-visible) .popup-menu-item-icon,
-.popup-menu-item-group .popup-menu-item-set-primary-audio-button:active:not(:focus-visible) .popup-menu-item-icon {
+.popup-menu-item-audio-button:hover~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon,
+.popup-menu-item-audio-button:active~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon,
+.popup-menu-item-audio-button:focus~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon {
+    opacity: 0.25;
+}
+.popup-menu-item-set-primary-audio-button:hover:not(:focus-visible) .popup-menu-item-icon,
+.popup-menu-item-set-primary-audio-button:active:not(:focus-visible) .popup-menu-item-icon {
     opacity: 0.375;
 }
-.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
-.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
-.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
-.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
+.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
+.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
+.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
+.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
     opacity: 1;
 }
 
diff --git a/ext/js/display/display-audio.js b/ext/js/display/display-audio.js
index 6d2504e4..e5c1b135 100644
--- a/ext/js/display/display-audio.js
+++ b/ext/js/display/display-audio.js
@@ -352,6 +352,7 @@ class DisplayAudio {
         const headword = this._getHeadword(dictionaryEntryIndex, headwordIndex);
         if (headword === null) { return; }
 
+        const {index} = source;
         const {term, reading} = headword;
         const cacheEntry = this._getCacheItem(term, reading, true);
 
@@ -359,9 +360,9 @@ class DisplayAudio {
         primaryCardAudio = (
             !canToggleOff ||
             primaryCardAudio === null ||
-            primaryCardAudio.source !== source ||
-            primaryCardAudio.index !== subIndex
-        ) ? {index: source.index, subIndex} : null;
+            primaryCardAudio.index !== index ||
+            primaryCardAudio.subIndex !== subIndex
+        ) ? {index: index, subIndex} : null;
         cacheEntry.primaryCardAudio = primaryCardAudio;
 
         if (menu !== null) {
@@ -698,8 +699,9 @@ class DisplayAudio {
         const primaryCardAudioSubIndex = (primaryCardAudio !== null ? primaryCardAudio.subIndex : null);
         const itemGroups = menuBodyNode.querySelectorAll('.popup-menu-item-group');
         for (const node of itemGroups) {
-            const index = Number.parseInt(node.dataset.index, 10);
-            const subIndex = Number.parseInt(node.dataset.subIndex, 10);
+            let {index, subIndex} = node.dataset;
+            index = Number.parseInt(index, 10);
+            subIndex = typeof subIndex === 'string' ? Number.parseInt(subIndex, 10) : null;
             const isPrimaryCardAudio = (index === primaryCardAudioIndex && subIndex === primaryCardAudioSubIndex);
             node.dataset.isPrimaryCardAudio = `${isPrimaryCardAudio}`;
         }