message_header: Improve text selection.

Fixes: #34959.

web/src/click_handlers.ts

@@ -427,6 +427,9 @@ export function initialize(): void {
                 return;
             }
             e.preventDefault();
+            if (document.getSelection()?.type === "Range") {
+                return;
+            }
             const row_id = get_row_id_for_narrowing(this);
             // TODO: Navigate user according to `web_channel_default_view` setting.
             // Also, update the tooltip hotkey in recipient bar.
@@ -439,6 +442,9 @@ export function initialize(): void {
             return;
         }
         e.preventDefault();
+        if (document.getSelection()?.type === "Range") {
+            return;
+        }
         const row_id = get_row_id_for_narrowing(this);
         message_view.narrow_by_topic(row_id, {trigger: "message header"});
     });

web/styles/message_header.css

@@ -31,6 +31,7 @@
             1px -5px 0 0 var(--color-background);
 
         & .message_label_clickable {
+            user-select: text;
             color: var(--color-text-message-header);
 
             &:hover {
@@ -39,6 +40,11 @@
             }
         }
 
+        & .message_label_clickable:focus {
+            outline: none;
+            text-decoration: none;
+        }
+
         .stream_topic_separator {
             line-height: 0;
             color: var(--color-message-header-icon-non-interactive);
@@ -119,6 +125,7 @@
     }
 
     .message_label_clickable {
+        user-select: text;
         display: flex;
         padding: 5px 0 5px 10px;
         font-weight: 600;
@@ -131,6 +138,11 @@
             text-decoration: none;
         }
 
+        &:focus {
+            outline: none;
+            text-decoration: none;
+        }
+
         .private_message_header_icon {
             font-size: 1.0714em; /* 15px at 14px em */
             position: relative;

web/templates/recipient_row.hbs

@@ -4,6 +4,7 @@
         {{! stream link }}
         <a class="message_label_clickable narrows_by_recipient stream_label tippy-narrow-tooltip"
           href="{{stream_url}}"
+          draggable="false"
           data-tippy-content="{{t 'Go to #{display_recipient}' }}">
             <span class="stream-privacy-modified-color-{{stream_id}} stream-privacy filter-icon"  style="color: {{stream_privacy_icon_color}}">
                 {{> stream_privacy .}}
@@ -26,6 +27,7 @@
         <span class="stream_topic">
             {{! topic link }}
             <a class="message_label_clickable narrows_by_topic tippy-narrow-tooltip"
+              draggable="false"
               href="{{topic_url}}"
               data-tippy-content="{{t 'Go to #{display_recipient} > {topic_display_name}' }}">
                 {{#if (and use_match_properties (not is_empty_string_topic))}}
@@ -96,6 +98,7 @@
     <div class="message-header-contents">
         <a class="message_label_clickable narrows_by_recipient stream_label tippy-narrow-tooltip"
           href="{{pm_with_url}}"
+          draggable="false"
           data-tippy-content="{{#if is_dm_with_self}}{{t 'Go to direct messages with yourself' }}{{else}}{{t 'Go to direct messages with {display_reply_to_for_tooltip}' }}{{/if}}">
         <span class="private_message_header_icon"><i class="zulip-icon zulip-icon-user"></i></span>
         <span class="private_message_header_name">