Display rich text image alt as plain text instead of read-only field

client/src/components/Draftail/blocks/ImageBlock.js

@@ -31,13 +31,11 @@ class ImageBlock extends Component {
     const { blockProps } = this.props;
     const { entity, onRemoveEntity } = blockProps;
     const { src, alt } = entity.getData();
+    const altLabel = `${STRINGS.ALT_TEXT}: “${alt || ''}”`;
 
     return (
       <MediaBlock {...this.props} src={src} alt="">
-        <label className="ImageBlock__field">
-          <p>{STRINGS.ALT_TEXT}</p>
-          <input className="ImageBlock__field__input" type="text" value={alt || ''} readOnly />
-        </label>
+        <p className="ImageBlock__alt">{altLabel}</p>
 
         <button className="button button-secondary no Tooltip__button" onClick={onRemoveEntity}>
           {STRINGS.DELETE}

client/src/components/Draftail/blocks/ImageBlock.scss

@@ -27,3 +27,8 @@
         color: transparentize($color-text-base, 0.5);
     }
 }
+
+.ImageBlock__alt {
+    @include font-smoothing;
+    font-size: 0.875rem;
+}

client/src/components/Draftail/blocks/__snapshots__/ImageBlock.test.js.snap

@@ -16,19 +16,11 @@ exports[`ImageBlock alt 1`] = `
   }
   src="example.png"
 >
-  <label
-    className="ImageBlock__field"
+  <p
+    className="ImageBlock__alt"
   >
-    <p>
-      Alt text
-    </p>
-    <input
-      className="ImageBlock__field__input"
-      readOnly={true}
-      type="text"
-      value="Test"
-    />
-  </label>
+    Alt text: “Test”
+  </p>
   <button
     className="button button-secondary no Tooltip__button"
   >
@@ -53,19 +45,11 @@ exports[`ImageBlock no data 1`] = `
   }
   src={null}
 >
-  <label
-    className="ImageBlock__field"
+  <p
+    className="ImageBlock__alt"
   >
-    <p>
-      Alt text
-    </p>
-    <input
-      className="ImageBlock__field__input"
-      readOnly={true}
-      type="text"
-      value=""
-    />
-  </label>
+    Alt text: “”
+  </p>
   <button
     className="button button-secondary no Tooltip__button"
   >
@@ -90,19 +74,11 @@ exports[`ImageBlock renders 1`] = `
   }
   src="example.png"
 >
-  <label
-    className="ImageBlock__field"
+  <p
+    className="ImageBlock__alt"
   >
-    <p>
-      Alt text
-    </p>
-    <input
-      className="ImageBlock__field__input"
-      readOnly={true}
-      type="text"
-      value=""
-    />
-  </label>
+    Alt text: “”
+  </p>
   <button
     className="button button-secondary no Tooltip__button"
   >