docs: add "GATSBY_EMPTY_ALT" as alt text for empty alts. (#1468)

.changeset/a11y-docs-img-empty-alts.md

@@ -0,0 +1,5 @@
+---
+'react-magma-docs': patch
+---
+
+fix(Docs): add "GATSBY_EMPTY_ALT" as alt text for empty alts.

website/react-magma-docs/src/pages/api-intro/page-templates.mdx

@@ -16,7 +16,7 @@ import { LeadParagraph } from '../../components/LeadParagraph';
 This template is ideal for applications that need as much of the screen as possible.
 
 <figure>
-  <img src="../../images/layout/template-full-width.png" alt="" />
+  <img src="../../images/layout/template-full-width.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 ```tsx
@@ -141,7 +141,7 @@ export function Example() {
 This template is great for pages that focus more on reading content like marketing materials, articles, etc.
 
 <figure>
-  <img src="../../images/layout/template-restricted-width.png" alt="" />
+  <img src="../../images/layout/template-restricted-width.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 ```tsx
@@ -246,7 +246,7 @@ export function Example() {
 This template includes a screen region for a left sidebar and includes all of the necessary responsive behavior.
 
 <figure>
-  <img src="../../images/layout/template-sidebar-app-header.png" alt="" />
+  <img src="../../images/layout/template-sidebar-app-header.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 ```tsx
@@ -342,7 +342,7 @@ export function Example() {
 This template also includes the sidebar screen region, but the header extends all the way across the top of the page.
 
 <figure>
-  <img src="../../images/layout/template-sidebar-global-header.png" alt="" />
+  <img src="../../images/layout/template-sidebar-global-header.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 ```tsx

website/react-magma-docs/src/pages/design-intro/layout.mdx

@@ -28,7 +28,7 @@ import { LeadParagraph } from '../../components/LeadParagraph';
 Every layout is made up of columns, gutters, and margins that respond accordingly to the size of the viewport.
 
 <figure>
-  <img src="../../images/layout/columns-gutters-margins.png" alt="" />
+  <img src="../../images/layout/columns-gutters-margins.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 1. Columns
@@ -40,7 +40,7 @@ Every layout is made up of columns, gutters, and margins that respond accordingl
 The columns indicate where the content of the page goes. The widths of the columns are fluid, allowing content to scale and resize depending on the width of the device. The number of columns is determined by pre-defined breakpoint ranges.
 
 <figure>
-  <img src="../../images/layout/columns-12.png" alt="" />
+  <img src="../../images/layout/columns-12.png" alt="GATSBY_EMPTY_ALT" />
   <figcaption>
     When the viewport is greater than 768px wide, the layout has 12 columns.
   </figcaption>
@@ -49,7 +49,7 @@ The columns indicate where the content of the page goes. The widths of the colum
 <span class="horizontal-spacer"></span>
 
 <figure>
-  <img src="../../images/layout/columns-6.png" alt="" />
+  <img src="../../images/layout/columns-6.png" alt="GATSBY_EMPTY_ALT" />
   <figcaption>
     When the viewport is 768px wide or smaller, the layout has 6 columns.
   </figcaption>
@@ -58,7 +58,7 @@ The columns indicate where the content of the page goes. The widths of the colum
 <span class="horizontal-spacer"></span>
 
 <figure>
-  <img src="../../images/layout/columns-4.png" alt="" />
+  <img src="../../images/layout/columns-4.png" alt="GATSBY_EMPTY_ALT" />
   <figcaption>
     When the viewport is 375px wide and smaller, the layout changes to 4
     columns.
@@ -72,7 +72,7 @@ Gutters are the spaces in between columns. This space is used to separate conten
 The width of gutters on standard Cengage page layouts should be set to 24px. On smaller screens the gutters change to 16px.
 
 <figure>
-  <img src="../../images/layout/gutters-24.png" alt="" />
+  <img src="../../images/layout/gutters-24.png" alt="GATSBY_EMPTY_ALT" />
   <figcaption>
     When the viewport is greater than 600px wide, gutters are 24px wide.
   </figcaption>
@@ -81,7 +81,7 @@ The width of gutters on standard Cengage page layouts should be set to 24px. On
 <span class="horizontal-spacer"></span>
 
 <figure>
-  <img src="../../images/layout/gutters-16.png" alt="" />
+  <img src="../../images/layout/gutters-16.png" alt="GATSBY_EMPTY_ALT" />
   <figcaption>
     When the viewport is 600px wide and smaller, gutters are 16px wide.
   </figcaption>
@@ -98,15 +98,15 @@ Margins are a fixed value, typically consistent with the gutter widths. The widt
 The width of margins on standard Cengage full-width page layouts should be set to 24px. On smaller screens the margins change to 16px.
 
 <figure>
-  <img src="../../images/layout/layout-full-width.png" alt="" />
+  <img src="../../images/layout/layout-full-width.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 #### Restricted-width Layout
 
 Larger margins based on percentages can be used to restrict the maximum width of the content area. Commonly used for text-heavy pages displaying sales materials, articles, etc.
 
 <figure>
-  <img src="../../images/layout/layout-restricted-width.png" alt="" />
+  <img src="../../images/layout/layout-restricted-width.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 ---
@@ -165,7 +165,7 @@ _\* Even for full-width layouts, we are only allowing the content area to size u
 Some Cengage web applications have a global sidebar on the left side of the page. This sidebar necessitates that the main content changes from 12 columns to 6 at 1024px wide and below. This is much earlier than the other layouts detailed above.
 
 <figure>
-  <img src="../../images/layout/layout-with-sidebar.png" alt="" />
+  <img src="../../images/layout/layout-with-sidebar.png" alt="GATSBY_EMPTY_ALT" />
   <figcaption>
     When using the global sidebar, the main content area still has 12 columns
     when the viewport is wider than 1024px
@@ -175,7 +175,7 @@ Some Cengage web applications have a global sidebar on the left side of the page
 <span class="horizontal-spacer"></span>
 
 <figure>
-  <img src="../../images/layout/layout-with-sidebar-1024.png" alt="" />
+  <img src="../../images/layout/layout-with-sidebar-1024.png" alt="GATSBY_EMPTY_ALT" />
   <figcaption>
     When using the global sidebar, the main content area changes to 6 columns
     when the viewport is 1024px wide and below.

website/react-magma-docs/src/pages/design-intro/spacing.mdx

@@ -155,7 +155,7 @@ The spacing scale helps us determine how much space to put between or inside of
 <span class="horizontal-spacer"></span>
 
 <figure>
-  <img src="../../images/spacing/icon-text-balance-correct.png" alt="" />
+  <img src="../../images/spacing/icon-text-balance-correct.png" alt="GATSBY_EMPTY_ALT" />
   <figcaption>
     Example of using spacing properties to add padding inside a card, as well as
     the margins between the content within the card.
@@ -165,7 +165,7 @@ The spacing scale helps us determine how much space to put between or inside of
 <span class="horizontal-spacer"></span>
 
 <figure>
-  <img src="../../images/spacing/spacing-example.png" alt="" />
+  <img src="../../images/spacing/spacing-example.png" alt="GATSBY_EMPTY_ALT" />
   <figcaption>
     Example of using spacing properties to create the space between cards in a
     grid.

website/react-magma-docs/src/pages/design-intro/typography.mdx

@@ -809,7 +809,7 @@ The headings presets above are assigned by default to H1 through H6 in the <Link
 One example of this is in the <Link to="/api/modal/">Modal component</Link>. For optimal accessibility the title of the modal needs to be an H1, but we definitely don't want it to be styled with text that large. So we use an H1, but apply the Productive Heading Small style to it. This flexibility allows consumers of Magma to design using the styles that work best for the UI, but still have a clear informational hierarchy for assistive technologies.
 
 <figure>
-  <img src="../../images/typography/modal-title-style.png" alt="" />
+  <img src="../../images/typography/modal-title-style.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 #### Consistency is Key
@@ -821,7 +821,7 @@ Continuing from above, there isn't just one way an H1 or and H3 should be styled
 Another advantage to using the presets above is that Responsive behavior is already built into each style so you don't have to figure out and include it yourself. This means a number of the larger sizes will automatically reduce in size at 600px wide. This ensures we have appropriate text sizes on smaller devices. The breakpoint can be overridden if you want this change to happen earlier or later.
 
 <figure>
-  <img src="../../images/typography/responsive-example.png" alt="" />
+  <img src="../../images/typography/responsive-example.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 ---
@@ -839,7 +839,7 @@ Our primary typface is Work Sans. It’s clear and approachable and is great for
   <div class="row">
     <div class="col col-1">
       <figure>
-        <img src="../../images/typography/work-sans-characters.png" alt="" />
+        <img src="../../images/typography/work-sans-characters.png" alt="GATSBY_EMPTY_ALT" />
       </figure>
     </div>
     <div class="col col-2">
@@ -867,7 +867,7 @@ Noto Serif is a beautiful serif font. It's easy to read, provides a nice contras
   <div class="row">
     <div class="col col-1">
       <figure>
-        <img src="../../images/typography/noto-serif-characters.png" alt="" />
+        <img src="../../images/typography/noto-serif-characters.png" alt="GATSBY_EMPTY_ALT" />
       </figure>
     </div>
     <div class="col col-2">
@@ -901,7 +901,7 @@ Line-heights are also defined at this level to adhere to an 8px spacing system,
 If you have a need to use a font size outside of the pre-made sets above, you may only choose from this list.
 
 <figure>
-  <img src="../../images/typography/type-scale.png" alt="" />
+  <img src="../../images/typography/type-scale.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 ---
@@ -916,7 +916,7 @@ Font weight is an important typographic variable that can add emphasis and diffe
   <div class="row">
     <div class="col col-1">
       <figure>
-        <img src="../../images/typography/font-weights.png" alt="" />
+        <img src="../../images/typography/font-weights.png" alt="GATSBY_EMPTY_ALT" />
       </figure>
     </div>
     <div class="col col-2"></div>
@@ -931,7 +931,7 @@ Each weight has an italic style, which should only be used when you need to emph
   <div class="row">
     <div class="col col-1">
       <figure>
-        <img src="../../images/typography/font-italic.png" alt="" />
+        <img src="../../images/typography/font-italic.png" alt="GATSBY_EMPTY_ALT" />
       </figure>
     </div>
     <div class="col col-2"></div>
@@ -946,7 +946,7 @@ Type color should be carefully considered, with legibility and accessibility as
   <div class="row">
     <div class="col col-1">
       <figure>
-        <img src="../../images/typography/text-color-neutral-1.png" alt="" />
+        <img src="../../images/typography/text-color-neutral-1.png" alt="GATSBY_EMPTY_ALT" />
         <figcaption>
           <p class="title title-correct">Correct</p>
           <p>
@@ -958,7 +958,7 @@ Type color should be carefully considered, with legibility and accessibility as
     </div>
     <div class="col col-2">
       <figure>
-        <img src="../../images/typography/text-color-neutral-2.png" alt="" />
+        <img src="../../images/typography/text-color-neutral-2.png" alt="GATSBY_EMPTY_ALT" />
         <figcaption>
           <p class="title title-correct">Correct</p>
           <p>On dark backgrounds, neutral text appears as white.</p>
@@ -969,7 +969,7 @@ Type color should be carefully considered, with legibility and accessibility as
   <div class="row">
     <div class="col col-1">
       <figure>
-        <img src="../../images/typography/text-color-decoration.png" alt="" />
+        <img src="../../images/typography/text-color-decoration.png" alt="GATSBY_EMPTY_ALT" />
         <figcaption>
           <p class="title title-incorrect">Incorrect</p>
           <p>Don't use color as decoration.</p>
@@ -978,7 +978,7 @@ Type color should be carefully considered, with legibility and accessibility as
     </div>
     <div class="col col-2">
       <figure>
-        <img src="../../images/typography/text-color-contrast.png" alt="" />
+        <img src="../../images/typography/text-color-contrast.png" alt="GATSBY_EMPTY_ALT" />
         <figcaption>
           <p class="title title-incorrect">Incorrect</p>
           <p>
@@ -992,7 +992,7 @@ Type color should be carefully considered, with legibility and accessibility as
   <div class="row">
     <div class="col col-1">
       <figure>
-        <img src="../../images/typography/text-color-meaning.png" alt="" />
+        <img src="../../images/typography/text-color-meaning.png" alt="GATSBY_EMPTY_ALT" />
         <figcaption>
           <p class="title title-correct">Correct</p>
           <p>
@@ -1005,7 +1005,7 @@ Type color should be carefully considered, with legibility and accessibility as
     </div>
     <div class="col col-2">
       <figure>
-        <img src="../../images/typography/text-color-meaning-2.png" alt="" />
+        <img src="../../images/typography/text-color-meaning-2.png" alt="GATSBY_EMPTY_ALT" />
         <figcaption>
           <p class="title title-correct">Correct</p>
           <p>
@@ -1026,12 +1026,12 @@ It is common to lighten certain pieces of text in order to create more contrast.
   <div class="row">
     <div class="col col-1">
       <figure>
-        <img src="../../images/typography/subdued-example-1.png" alt="" />
+        <img src="../../images/typography/subdued-example-1.png" alt="GATSBY_EMPTY_ALT" />
       </figure>
     </div>
     <div class="col col-2">
       <figure>
-        <img src="../../images/typography/subdued-example-2.png" alt="" />
+        <img src="../../images/typography/subdued-example-2.png" alt="GATSBY_EMPTY_ALT" />
       </figure>
     </div>
   </div>
@@ -1044,7 +1044,7 @@ It is common to lighten certain pieces of text in order to create more contrast.
 Headings and paragraphs have margins built into them by default. These margins provide the desired rhythm created by spacing when they are used together in a traditional narrative context. These margins can be easily modified using the spacing scale or completely removed when using headings or paragraphs in other contexts.
 
 <figure>
-  <img src="../../images/typography/margins-illustration.png" alt="" />
+  <img src="../../images/typography/margins-illustration.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 </PageContent>

website/react-magma-docs/src/pages/design/accordion.mdx

@@ -44,7 +44,7 @@ In some scenarios, the accordion can be modified to place the chevron icon in fr
 
 <div class="image-grid">
   <figure>
-    <img src="../../images/accordion/accordion-good-alignment.png" alt="" />
+    <img src="../../images/accordion/accordion-good-alignment.png" alt="GATSBY_EMPTY_ALT" />
     <figcaption>
       <p class="title title-correct">Correct</p>
       <p>
@@ -54,7 +54,7 @@ In some scenarios, the accordion can be modified to place the chevron icon in fr
     </figcaption>
   </figure>
   <figure>
-    <img src="../../images/accordion/accordion-bad-alignment.png" alt="" />
+    <img src="../../images/accordion/accordion-bad-alignment.png" alt="GATSBY_EMPTY_ALT" />
     <figcaption>
       <p class="title title-caution">Caution</p>
       <p>
@@ -72,7 +72,7 @@ If you place the chevron icon on the left side of the title, don’t be tempted
   <figure>
     <img
       src="../../images/accordion/accordion-incorrect-icon-orientation.png"
-      alt=""
+      alt="GATSBY_EMPTY_ALT"
     />
     <figcaption>
       <p class="title title-incorrect">Incorrect</p>
@@ -83,7 +83,7 @@ If you place the chevron icon on the left side of the title, don’t be tempted
     </figcaption>
   </figure>
   <figure>
-    <img src="../../images/accordion/accordion-incorrect-icons.png" alt="" />
+    <img src="../../images/accordion/accordion-incorrect-icons.png" alt="GATSBY_EMPTY_ALT" />
     <figcaption>
       <p class="title title-incorrect">Incorrect</p>
       <p>
@@ -95,7 +95,7 @@ If you place the chevron icon on the left side of the title, don’t be tempted
 </div>
 
 <figure>
-  <img src="../../images/accordion/accordion-crowded-icons.png" alt="" />
+  <img src="../../images/accordion/accordion-crowded-icons.png" alt="GATSBY_EMPTY_ALT" />
   <figcaption>
     <p class="title title-incorrect">Incorrect</p>
     <p>
@@ -111,13 +111,13 @@ Accordions can be placed within main page content or placed inside of a containe
 
 <div class="image-grid">
   <figure>
-    <img src="../../images/accordion/accordion-in-page.png" alt="" />
+    <img src="../../images/accordion/accordion-in-page.png" alt="GATSBY_EMPTY_ALT" />
   </figure>
   <figure>
-    <img src="../../images/accordion/accordion-sidebar.png" alt="" />
+    <img src="../../images/accordion/accordion-sidebar.png" alt="GATSBY_EMPTY_ALT" />
   </figure>
   <figure>
-    <img src="../../images/accordion/accordion-drawer.png" alt="" />
+    <img src="../../images/accordion/accordion-drawer.png" alt="GATSBY_EMPTY_ALT" />
   </figure>
 </div>
 

website/react-magma-docs/src/pages/design/alert.mdx

@@ -21,7 +21,7 @@ This page focuses primarily on the commonalities between the different alert typ
 Use alerts to inform users of updates, changes to system status, or as feedback to an action they have taken. Proactively communicating with users and providing immediate feedback is important for building trust and maintaining a constant awareness of the system status. While alerts are an effective method of communicating with users, they have the potential to be disruptive and should be used with care.
 
 <figure>
-  <img src="../../images/alerts/alert-intro-image.png" alt="" />
+  <img src="../../images/alerts/alert-intro-image.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 ---
@@ -47,7 +47,7 @@ Alerts are interruptive, but their level of interruption should match the inform
 The basic anatomy of the alert is the same across all three types (banner, inline, toast).
 
 <figure>
-  <img src="../../images/alerts/alert-anatomy.png" alt="" />
+  <img src="../../images/alerts/alert-anatomy.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 1. Container
@@ -103,13 +103,13 @@ Alerts have an inverse option where we have defined colors that are optimized fo
 Inline alerts are embedded within the content of a page. They can provide the user with helpful information regarding a specific process or part of the interface. They can also be triggered by an action the user took, like submitting a form before filling out all the required fields.
 
 <figure>
-  <img src="../../images/alerts/inline-alert-example.png" alt="" />
+  <img src="../../images/alerts/inline-alert-example.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 If an inline alert is being used to communicate some general information to the user, then you can choose to allow them to dismiss the alert to get it out of their way. However, error messages are typically not dismissible by the user and persist until the issue is fixed either by the user or the system.
 
 <figure>
-  <img src="../../images/alerts/inline-alert-example-2.png" alt="" />
+  <img src="../../images/alerts/inline-alert-example-2.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 
 ---
@@ -119,7 +119,7 @@ If an inline alert is being used to communicate some general information to the
 When the viewport is 600px wide and smaller, we automatically reduce the icon and font size to optimize the amount of space given to the message and optional links or buttons in the alert.
 
 <figure>
-  <img src="../../images/alerts/mobile-inline-alert-example.png" alt="" />
+  <img src="../../images/alerts/mobile-inline-alert-example.png" alt="GATSBY_EMPTY_ALT" />
 </figure>
 <span class="horizontal-spacer"></span>