audio: Present download button with tooltip.

Fixes #35636.

web/src/message_list_tooltips.ts

@@ -358,6 +358,18 @@ export function initialize(): void {
         },
     });
 
+    message_list_tooltip(".media-audio-download", {
+        delay: LONG_HOVER_DELAY,
+        onShow(instance) {
+            const title = $(instance.reference).attr("aria-label");
+            assert(title !== undefined);
+            instance.setContent(title);
+        },
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
+
     message_list_tooltip(".view_user_card_tooltip", {
         delay: LONG_HOVER_DELAY,
         onShow(instance) {

web/styles/rendered_markdown.css

@@ -687,6 +687,17 @@
         max-width: calc(100% - 30px);
     }
 
+    .media-audio-download {
+        flex: 0 0 20px;
+        margin-left: 5px;
+        display: flex;
+        place-content: center center;
+
+        &:hover {
+            text-decoration: none;
+        }
+    }
+
     .message_embed {
         display: grid;
         grid-template-columns:
@@ -758,7 +769,7 @@
         }
     }
 
-    & a {
+    & a:not(.icon-button) {
         color: var(--color-markdown-link);
         text-decoration: none;
 

web/templates/markdown_audio.hbs

@@ -1,5 +1,9 @@
 {{~!-- --~}}
 <span class="media-audio-wrapper">
     <audio controls="" preload="metadata" src="{{audio_src}}" title="{{audio_title}}" class="media-audio-element"></audio>
+    <a class="media-audio-download icon-button icon-button-square icon-button-neutral"
+      aria-label="{{t 'Download' }}" href="{{ audio_src}}" download>
+        <i class="media-download-icon zulip-icon zulip-icon-download"></i>
+    </a>
 </span>
 {{~!-- --~}}

web/tests/rendered_markdown.test.cjs

@@ -564,6 +564,10 @@ run_test("audio", ({mock_template}) => {
         audio_html,
         '<span class="media-audio-wrapper">\n' +
             '    <audio controls="" preload="metadata" src="http://zulip.zulipdev.com/user_uploads/w/ha/tever/inline.mp3" title="inline.mp3" class="media-audio-element"></audio>\n' +
+            '    <a class="media-audio-download icon-button icon-button-square icon-button-neutral"\n' +
+            '      aria-label="Download" href="http://zulip.zulipdev.com/user_uploads/w/ha/tever/inline.mp3" download>\n' +
+            '        <i class="media-download-icon zulip-icon zulip-icon-download"></i>\n' +
+            "    </a>\n" +
             "</span>",
     );
 });