message_edit: Use disabled instead of readonly to disable controls.

Currently when a user does not have the permission to edit the topic/content
of a message, the edit UI/view source UI correctly shows a greyed
out topic/message-content input field, however these fields incorrectly have a
click behavior, so to fix this we now would want to use `disabled` prop instead
of `readonly` attribute as `readonly` controls can still function and are still
focusable whereas disabled controls can not receive focus and are unclickable.

Fixes #22565.

static/js/message_edit.js

@@ -507,21 +507,21 @@ function edit_message($row, raw_content) {
 
     switch (editability) {
         case editability_types.NO:
-            $message_edit_content.attr("readonly", "readonly");
-            $message_edit_topic.attr("readonly", "readonly");
+            $message_edit_content.prop("disabled", true);
+            $message_edit_topic.prop("disabled", true);
             create_copy_to_clipboard_handler($row, $copy_message[0], message.id);
             break;
         case editability_types.NO_LONGER:
             // You can currently only reach this state in non-streams. If that
             // changes (e.g. if we stop allowing topics to be modified forever
             // in streams), then we'll need to disable
             // row.find('input.message_edit_topic') as well.
-            $message_edit_content.attr("readonly", "readonly");
+            $message_edit_content.prop("disabled", true);
             $message_edit_countdown_timer.text($t({defaultMessage: "View source"}));
             create_copy_to_clipboard_handler($row, $copy_message[0], message.id);
             break;
         case editability_types.TOPIC_ONLY:
-            $message_edit_content.attr("readonly", "readonly");
+            $message_edit_content.prop("disabled", true);
             // Hint why you can edit the topic but not the message content
             $message_edit_countdown_timer.text($t({defaultMessage: "Topic editing only"}));
             create_copy_to_clipboard_handler($row, $copy_message[0], message.id);
@@ -578,9 +578,9 @@ function edit_message($row, raw_content) {
             seconds_left -= 1;
             if (seconds_left <= 0) {
                 clearInterval(countdown_timer);
-                $message_edit_content.prop("readonly", "readonly");
+                $message_edit_content.prop("disabled", true);
                 if (message.type === "stream") {
-                    $message_edit_topic.prop("readonly", "readonly");
+                    $message_edit_topic.prop("disabled", true);
                     $message_edit_topic_propagate.hide();
                     $message_edit_breadcrumb_messages.hide();
                 }
@@ -892,15 +892,15 @@ export function save_message_row_edit($row) {
     show_message_edit_spinner($row);
 
     const $edit_content_input = $row.find(".message_edit_content");
-    const can_edit_content = $edit_content_input.attr("readonly") !== "readonly";
+    const can_edit_content = $edit_content_input.prop("disabled") !== true;
     if (can_edit_content) {
         new_content = $edit_content_input.val();
         content_changed = old_content !== new_content;
         changed = content_changed;
     }
 
     const $edit_topic_input = $row.find(".message_edit_topic");
-    const can_edit_topic = message.is_stream && $edit_topic_input.attr("readonly") !== "readonly";
+    const can_edit_topic = message.is_stream && $edit_topic_input.prop("disabled") !== true;
     if (can_edit_topic) {
         new_topic = $edit_topic_input.val();
         topic_changed = new_topic !== old_topic && new_topic.trim() !== "";