content: generateTextWithTooltip, etc: keyboard focus

5 files changed, 25 insertions, 9 deletions

diff --git a/src/content/dependencies/generateContentEntryDate.js b/src/content/dependencies/generateContentEntryDate.js
index e924f244..ca794314 100644
--- a/src/content/dependencies/generateContentEntryDate.js
+++ b/src/content/dependencies/generateContentEntryDate.js
@@ -30,7 +30,10 @@ export default {
         {[html.onlyIfContent]: true},
 
         (willDisplayTooltip
-          ? {class: 'text-with-tooltip-interaction-cue'}
+          ? [
+              {class: 'text-with-tooltip-interaction-cue'},
+              {tabindex: '0'},
+            ]
           : topAttributes),
 
         language.encapsulate(titleCapsule, 'date', workingCapsule => {
diff --git a/src/content/dependencies/generateTextWithTooltip.js b/src/content/dependencies/generateTextWithTooltip.js
index 360cfebc..843729a9 100644
--- a/src/content/dependencies/generateTextWithTooltip.js
+++ b/src/content/dependencies/generateTextWithTooltip.js
@@ -51,6 +51,7 @@ export default {
      : hasTooltip
         ? html.tag('span', {class: 'hoverable'},
             {[html.onlyIfContent]: true},
+            {tabindex: '0'},
 
             html.tag('span', {class: 'text-with-tooltip-interaction-cue'},
               {[html.onlyIfContent]: true},
diff --git a/src/content/dependencies/generateTrackListMissingDuration.js b/src/content/dependencies/generateTrackListMissingDuration.js
index da3113a2..70db23c2 100644
--- a/src/content/dependencies/generateTrackListMissingDuration.js
+++ b/src/content/dependencies/generateTrackListMissingDuration.js
@@ -18,6 +18,8 @@ export default {
             language.$(durationCapsule, {
               duration:
                 html.tag('span', {class: 'text-with-tooltip-interaction-cue'},
+                  {tabindex: '0'},
+
                   language.$(durationCapsule, 'missing')),
             }),
 
diff --git a/src/content/dependencies/linkExternal.js b/src/content/dependencies/linkExternal.js
index ad8d4f23..841efda6 100644
--- a/src/content/dependencies/linkExternal.js
+++ b/src/content/dependencies/linkExternal.js
@@ -22,6 +22,11 @@ export default {
       mutable: false,
     },
 
+    attributes: {
+      type: 'attributes',
+      mutable: false,
+    },
+
     suffixNormalContent: {
       type: 'html',
       mutable: false,
@@ -178,6 +183,8 @@ export default {
         ], {[html.joinChildren]: ''});
     }
 
+    linkAttributes.add(slots.attributes);
+
     return html.tag('a', linkAttributes, linkContent);
   },
 };
diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js
index fa7f2e88..775ccfdc 100644
--- a/src/content/dependencies/transformContent.js
+++ b/src/content/dependencies/transformContent.js
@@ -715,6 +715,7 @@ export default {
             if (externalLink) {
               externalLink.setSlots({
                 content: label,
+                attributes: {class: 'text-with-tooltip-interaction-cue'},
                 fromContent: true,
               });
 
@@ -736,15 +737,17 @@ export default {
               content: tooltipContent, // Not sanitized!
             });
 
-            textWithTooltip.setSlots({
-              attributes: [
-                {class: 'content-tooltip-guy'},
-                externalLink && {class: 'has-link'},
-              ],
+            const attributes = html.attributes();
+            attributes.add('class', 'content-tooltip-guy');
 
-              text: externalLink ?? label,
-              tooltip,
-            });
+            if (externalLink) {
+              attributes.add('class', 'has-link');
+              textWithTooltip.setSlot('text', externalLink);
+            } else {
+              textWithTooltip.setSlot('text', label);
+            }
+
+            textWithTooltip.setSlots({attributes, tooltip});
 
             return {type: 'processed-tooltip', data: textWithTooltip};
           }