docs: adding height width attrs to images (#1962)

* docs: adding height width attrs and fixing data-helmet

* docs: couple more attr stragglers, remove unecessary uxdot-example, tweak hero styles

* docs: add margin to toc on small viewport widths

* docs: correct image sizes on accessibility page

* docs: fix typo in alt

docs/about/index.md

@@ -85,7 +85,10 @@ and adapts to meet new challenges.
 <rh-cta href="https://www.redhat.com/en/about/brand/standards">Learn about the Red Hat brand</rh-cta>
 
 <uxdot-example variant="full" no-border alignment="left" width-adjustment="1140px">
- <img src="../assets/about/about-rhds-brand-standards.png" alt="the words 'brand standards' framed by elements and shapes in ReEd Hat colors">
+ <img src="../assets/about/about-rhds-brand-standards.png"
+      alt="the words 'brand standards' framed by elements and shapes in Red Hat colors"
+      width="1140"
+      height="286">
 </uxdot-example>
 
 ### Design tokens
@@ -98,7 +101,10 @@ help us assign consistent meanings that correspond with foundational guidelines.
 <rh-cta href="/tokens/">Learn about our tokens</rh-cta>
 
 <uxdot-example width-adjustment="807px">
- <img src="/tokens/images/design-tokens-intro.png" alt="Flow showing how a color like brand red becomes a token, how it is named, and how it is applied to a call to action">
+ <img src="/tokens/images/design-tokens-intro.png"
+      alt="Flow showing how a color like brand red becomes a token, how it is named, and how it is applied to a call to action"
+      width="807"
+      height="96">
 </uxdot-example>
 
 ## We build Web Components
@@ -111,7 +117,10 @@ framework or platform.
 <rh-cta href="/get-started/developers/#about-web-components">Learn about the benefits of Web Components</rh-cta>
 
 <uxdot-example width-adjustment="820px">
- <img src="../assets/about/about-rhds-web-components.svg" alt="Example of a card next to the Web Component's code">
+ <img src="../assets/about/about-rhds-web-components.svg"
+      alt="Example of a card next to the Web Component's code"
+      width="820"
+      height="281">
 </uxdot-example>
 
 ## We look for opportunities to align
@@ -141,7 +150,10 @@ upgraded easily, allowing for consistency, scalability, and flexibility.
 <rh-cta href="https://patternflyelements.org/">Visit PatternFly Elements</rh-cta>
 
 <uxdot-example width-adjustment="558px">
- <img src="../assets/about/about-rhds-pf-pfe.svg" alt="A back-to-top element that looks the same in RHDS, PatternFly, and PatternFly Elements">
+ <img src="../assets/about/about-rhds-pf-pfe.svg"
+      alt="A back-to-top element that looks the same in RHDS, PatternFly, and PatternFly Elements"
+      width="558"
+      height="58">
 </uxdot-example>
 
 ## We provide support

docs/about/roadmap.md

@@ -9,9 +9,9 @@ importElements:
   - rh-tile
 ---
 
-<link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css">
+<link data-helmet rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css">
 
-<style>
+<style data-helmet>
   rh-tile {
     margin-block: var(--rh-space-3xl, 48px);
     max-width: 320px;

docs/accessibility/accessibility-tools.md

@@ -58,7 +58,10 @@ Google's Chrome and Microsoft's Edge browsers have several accessibility tools b
 
 <figure>
   <uxdot-example width-adjustment="900px">
-    <img src="/assets/accessibility/lighthouse-audit.png" alt="Screenshot of a Lighthouse autdit with a score of 100%.">
+    <img src="/assets/accessibility/lighthouse-audit.png"
+      alt="Screenshot of a Lighthouse autdit with a score of 100%."
+      width="900"
+      height="251">
   </uxdot-example>
 </figure>
 
@@ -74,7 +77,10 @@ Chrome and Edge also have an "Accessibility Pane" that lets users see informatio
 
 <figure>
   <uxdot-example width-adjustment="893px">
-    <img src="/assets/accessibility/accessibility-pane.png" alt="Screenshot of the accessibility pane on a ux.redhat.com page with three numbers identifying key features.">
+    <img src="/assets/accessibility/accessibility-pane.png"
+      alt="Screenshot of the accessibility pane on a ux.redhat.com page with three numbers identifying key features."
+      width="893"
+      height="498">
   </uxdot-example>
   <figcaption>
     To view the Accessibility Pane, open DevTools then click:
@@ -90,7 +96,10 @@ Users can optionally check "Enable full-page accessibility tree" to change what'
 
 <figure>
   <uxdot-example width-adjustment="1167px">
-    <img src="/assets/accessibility/accessibility-tree-view.png" alt="Screenshot showing the rendered page content in the browser on the left and the same content in the accessibility tree view on the right in DevTools">
+    <img src="/assets/accessibility/accessibility-tree-view.png"
+      alt="Screenshot showing the rendered page content in the browser on the left and the same content in the accessibility tree view on the right in DevTools"
+      width="1167"
+      height="535">
   </uxdot-example>
   <figcaption>
     Inspecting the Alert (left) with the full-page accessibility tree enabled reveals its accessible properties (right).
@@ -109,7 +118,10 @@ One neat feature included within Firefox's accessibility inspector is the abilit
 
 <figure>
   <uxdot-example width-adjustment="994px">
-    <img src="/assets/accessibility/firefox-show-tab-order.png" alt="Screenshot of a page with 'Show Tabbing Order' checked. Each tab stop shows its tab stop number inside a pip.">
+    <img src="/assets/accessibility/firefox-show-tab-order.png"
+      alt="Screenshot of a page with 'Show Tabbing Order' checked. Each tab stop shows its tab stop number inside a pip."
+      width="994"
+      height="505">
   </uxdot-example>
   <figcaption>
     A page in Firefox with visually numbered tab stops via the Firefox feature, "Show Tabbing order".

docs/accessibility/content.md

@@ -98,7 +98,10 @@ Note that background images inserted into a page via CSS are always considered d
 When writing alternative text, it’s important to first consider the image’s context. An image’s meaning or function may be more relevant than its literal depiction. So, the same image may need very different alt text in different contexts.
 
 <uxdot-example width-adjustment="500px" no-border class="limit-width">
-  <img src="/assets/accessibility/Its_A_Wonderful_Life.jpg" alt="George Bailey hugs his wife, Mary, and holds his daughter, Zuzu, in the movie It's a Wonderful Life">
+  <img src="/assets/accessibility/Its_A_Wonderful_Life.jpg"
+      alt="George Bailey hugs his wife, Mary, and holds his daughter, Zuzu, in the movie It's a Wonderful Life"
+      width="720"
+      height="540">
 </uxdot-example>
 
 Depending on whether a web page is about the plot of the 1946 movie It’s a Wonderful Life or about the actor Jimmy Stewart, the above image could have very different alt text. For the first case, the image’s alt text could be `“George Bailey hugs his wife, Mary, and holds his daughter, Zuzu.”` For the second, the alt text could be `“Jimmy Stewart returned to acting after the war with It’s a Wonderful Life.”`
@@ -109,7 +112,10 @@ Images acting as buttons or links are functional, and thus serve different purpo
 
 <figure>
   <a href="https://www.redhat.com/">
-    <img id="func-img" src="/assets/logo-redhat.png" alt="Red Hat homepage">
+    <img src="/assets/logo-redhat.png"
+      alt="Red Hat homepage"
+      width="613"
+      height="145">
   </a>
 </figure>
 

docs/accessibility/design.md

@@ -36,7 +36,10 @@ If one element has the same function as another, both should be labeled the same
 When considering methods of communication or feedback, do not use color alone. Ensure there is a text label, icon, underline, or other visual cue to communicate meaning. Consider how the following elements would look to a color blind user.
 
 <uxdot-example width-adjustment="872px" no-border>
-  <img src="/assets/color/using-color-alone.png" alt="Dialog with a red-orange Leave button, a form field with a red bottom border, and progress steps without labels">
+  <img src="/assets/color/using-color-alone.png"
+      alt="Dialog with a red-orange Leave button, a form field with a red bottom border, and progress steps without labels"
+      width="872"
+      height="537">
 </uxdot-example>
 
 ### Contrast
@@ -48,7 +51,10 @@ We strive to adhere to [WCAG 2.1 AA contrast ratio standards](https://www.w3.org
 Small foreground text (non-bold text under 24px and bold text under 19px) must have a contrast ratio of 4.5:1 and large foreground text (non-bold text of at least 24px and bold text of at least 19px) must have a contrast ratio of 3:1.
 
 <uxdot-example width-adjustment="872px" no-border>
-  <img src="/assets/color/contrast-text.png" alt="Contrast ratios for dark gray sections with black text that uses different weights and fonts">
+  <img src="/assets/color/contrast-text.png"
+      alt="Contrast ratios for dark gray sections with black text that uses different weights and fonts"
+      width="872"
+      height="576">
 </uxdot-example>
 
 #### Links
@@ -64,8 +70,11 @@ That said, you still _can_ underline the above, at your discretion.
 
 If, for some reason, color is the only way you can distinguish links within a text block, the contrast ratio between the link and surrounding text _must_ be at least 3:1 in both visited and unvisited states. And underlines or other non-color cues _must also_ then be used to signify when the link receives hover and focus.
 
-<uxdot-example width-adjustment="692px" no-border>
-  <img src="/assets/color/contrast-links.png" alt="Contrast ratio of a blue link next to black text and an example of a link's darker blue, underlined hover state">
+<uxdot-example width-adjustment="708px" no-border>
+  <img src="/assets/color/contrast-links.png"
+      alt="Contrast ratio of a blue link next to black text and an example of a link's darker blue, underlined hover state"
+      width="708"
+      height="171">
 </uxdot-example>
 
 #### Graphical objects and UI components
@@ -79,7 +88,10 @@ Non-color cues must be also used to signify when an object or component receives
 It is acceptable to layer colors with the same hue, saturation, or lightness on white, black, or gray. However, layering them near or on top of each other might cause vibration. If you need to layer colors, follow [WCAG 2.1 AA](https://www.w3.org/WAI/WCAG21/Understanding/) requirements.
 
 <uxdot-example width-adjustment="872px" no-border>
-  <img src="/assets/color/contrast-layering.png" alt="Red CTA against a white background, blue button against a light gray background, and a light red-orange button against a black background">
+  <img src="/assets/color/contrast-layering.png"
+      alt="Red CTA against a white background, blue button against a light gray background, and a light red-orange button against a black background"
+      width="872"
+      height="250">
 </uxdot-example>
 
 #### Further help

docs/accessibility/manual-testing.md

@@ -10,7 +10,7 @@ importElements:
   - rh-blockquote
 ---
 
-<style>
+<style data-helmet>
   rh-blockquote {
     display: block;
     margin-block: 2rem;

docs/accessibility/screen-readers.md

@@ -13,7 +13,7 @@ importElements:
       data-helmet
       href="/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css">
 
-<style>
+<style data-helmet>
   rh-tile [slot="headline"] {
     font-weight: var(--rh-font-weight-heading-bold, 700);
   }

docs/assets/javascript/elements/uxdot-hero.css

@@ -35,6 +35,7 @@ slot[name='tagline']::slotted(p) {
 
 slot[name='image']::slotted(img) {
   width: 100%;
+  height: auto;
   margin-block-start: var(--rh-space-4xl);
 }
 

docs/design-code-status/index.md

@@ -7,7 +7,7 @@ importElements:
   - rh-tag
 ---
 
-<link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
+<link data-helmet rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
 
 <section aria-labelledby="overview">