Make Alt Text Distinct from Description

This PR updates the styles for the alt text to be more visually
distinct from the description.

src/legacy/components/images/examples/alt-text.html

@@ -0,0 +1,101 @@
+<div class="content-permalink">
+  <div class="image-title">
+    <h1>Star Wars Zoom Backgrounds</h1>
+    <div class="clear"></div>
+  </div>
+  <div class="image-content">
+    <div class="the-image">
+      <a href="#"
+        ><img src="//s.mltshp.com/r/1IGIU" alt="Star Wars Zoom Backgrounds"
+      /></a>
+    </div>
+    <div id="image-content-footer-1IGIU" class="image-content-footer">
+      <div class="alt-text">
+        <div class="alt-text-toggle link link--primary">alt text</div>
+        <div class="the-alt-text" role="button" tabindex="0">
+          Photo of a happy-looking dog wearing safety glasses, pouring from a
+          flask labelled "Danger" into a coffee mug, while surrounded by
+          chemistry equipment such as bunsen burners and containers of bubbling
+          fluids connected by tubes. The caption reads "I have no idea what I'm
+          doing."
+        </div>
+      </div>
+      <div class="description">
+        <div class="the-description">
+          Star Wars is jumping on the Zoom background train. I’m looking forward
+          to showing how clean I’ve kept my office with this one.<br /><br />You
+          can find more at
+          <a
+            href="#"
+            target="_blank"
+            rel="nofollow"
+            title="https://www.starwars.com/news/star-wars-backgrounds"
+            >https://www.starwars.com/news...</a
+          >
+        </div>
+      </div>
+      <div class="image-interactions">
+        <div class="like-this">
+          <form id="like-form-1IGIU">
+            <button
+              type="button"
+              class="like-button btn btn-danger btn-small is-active"
+            >
+              <div class="btn--content">
+                <img
+                  class="btn--icon"
+                  src="https://mltshp-cdn.com/static/images/like-this.svg"
+                  alt=""
+                />
+                <span class="btn--text">Like</span>
+              </div>
+            </button>
+            <button
+              type="button"
+              class="unlike-button"
+              title="Unlike This"
+              aria-label="Unlike This"
+            >
+              <img
+                src="https://mltshp-cdn.com/static/images/liked-this.svg"
+                height="22"
+                width="25"
+                alt="Unlike This"
+              />
+            </button>
+          </form>
+        </div>
+        <div class="save-this">
+          <form>
+            <button
+              type="button"
+              class="save-this-link save-this-link-multiple btn btn-warning btn-small"
+            >
+              <div class="btn--content">
+                <img
+                  class="btn--icon"
+                  src="https://mltshp-cdn.com/static/images/save-this.svg"
+                  alt=""
+                />
+                <span class="btn--text">Save</span>
+                <span class="btn--caret">▼</span>
+              </div>
+            </button>
+          </form>
+        </div>
+      </div>
+      <div class="inline-meta">
+        <span class="created-at">
+          <a href="#">
+            <time
+              datetime="2020-04-17 21:54:53"
+              title="Fri, 17 Apr 2020 21:54:53 "
+              >6 days ago</time
+            >
+          </a>
+        </span>
+      </div>
+      <div class="clear"></div>
+    </div>
+  </div>
+</div>

src/legacy/components/images/examples/editable.html

@@ -23,6 +23,9 @@ <h3 class="image-edit-title">Star Wars Zoom Backgrounds</h3>
       /></a>
     </div>
     <div id="image-content-footer-1IGIU" class="image-content-footer">
+      <div class="alt-text alt-text-edit alt-text--blank">
+        <div class="the-alt-text" role="button">add some alt text</div>
+      </div>
       <div class="description description-edit">
         <div class="the-description the-description-blank">
           click here to edit description

src/legacy/components/images/examples/editing.html

@@ -25,6 +25,40 @@ <h3 class="image-edit-title" style="display: none">
       /></a>
     </div>
     <div id="image-content-footer-1IGIU" class="image-content-footer">
+      <div class="alt-text alt-text-edit alt-text--blank alt-text--editing">
+        <div class="alt-text-toggle link link--primary">alt text</div>
+        <div class="the-alt-text" role="button">add some alt text</div>
+        <form
+          method="post"
+          class="alt-text-edit-form"
+          action="/p/1OWRQ/quick-edit-alt-text"
+        >
+          <input
+            type="hidden"
+            name="_xsrf"
+            value="2|373c3cd0|287dcfa53f2ba090a42ed6c296c0da34|1687810733"
+          />
+          <h3>Edit alt text</h3>
+          <p class="alt-text-learn">
+            Alt text describes images for blind and low-vision users, and helps
+            give context to everyone. <a href="/faq/#alt-text">Learn more</a>.
+          </p>
+          <textarea
+            name="alt_text"
+            class="alt-text-edit-textarea"
+            tabindex="0"
+          ></textarea>
+          <div class="buttons">
+            <input
+              type="submit"
+              class="save btn btn-primary btn-small"
+              value="Save"
+            />
+            <span class="or">or</span>
+            <a href="" class="cancel btn btn-secondary btn-small">Cancel</a>
+          </div>
+        </form>
+      </div>
       <div class="description description-edit">
         <div class="the-description" style="display: none">
           Star Wars is jumping on the Zoom background train. I’m looking forward
@@ -39,6 +73,7 @@ <h3 class="image-edit-title" style="display: none">
           >
         </div>
         <form class="description-edit-form" style="display: block">
+          <h3>Edit description</h3>
           <textarea name="description" class="description-edit-textarea">
 Star Wars is jumping on the Zoom background train. I’m looking forward to showing how clean I’ve kept my office with this one.
 

src/legacy/components/images/examples/permalink.html

@@ -10,6 +10,9 @@ <h1>Star Wars Zoom Backgrounds</h1>
       /></a>
     </div>
     <div id="image-content-footer-1IGIU" class="image-content-footer">
+      <div class="alt-text alt-text--hidden">
+        <div class="alt-text-toggle link link--primary">alt text</div>
+      </div>
       <div class="description">
         <div class="the-description">
           Star Wars is jumping on the Zoom background train. I’m looking forward

src/legacy/components/images/images.stories.js

@@ -1,4 +1,5 @@
 import permalinkMarkup from './examples/permalink.html?raw';
+import altTextMarkup from './examples/alt-text.html?raw';
 import listMarkup from './examples/list.html?raw';
 import commentsMarkup from './examples/comments.html?raw';
 import commentingMarkup from './examples/commenting.html?raw';
@@ -35,6 +36,10 @@ export const Permalink = {
   render: () => permalinkMarkup,
 };
 
+export const AltText = {
+  render: () => altTextMarkup,
+};
+
 export const ListView = {
   render: () => listMarkup,
 };

src/legacy/components/images/partials/_image-alt-text.scss

@@ -10,6 +10,10 @@
 
     .the-alt-text {
       @include mixins.breakword;
+      background: var(--color-background-content-secondary);
+      color: var(--color-page-text-secondary);
+      margin-top: var(--size-spacing-half);
+      padding: var(--size-spacing-default) var(--size-spacing-half-again);
 
       &:focus {
         box-shadow: none;