@reuters-graphics/graphics-components 0.0.29 → 0.0.30

package/dist/@types/components/@types/global.d.ts

@@ -7,6 +7,7 @@ export declare type ContainerWidth = 'narrower' | 'narrow' | 'normal' | 'wide' |
  * A step in the Scroller component.
  */
 export interface ScrollerStep {
+    altText?: string;
     /**
      * A background component
      * @required

package/dist/@types/components/Scroller/Scroller.svelte.d.ts

@@ -11,9 +11,10 @@ declare const __propDef: {
            *
            * Each step object in the array can have:
            *
-           * - `background` A background component **REQUIRED**
+           * - `background` A background component. **REQUIRED**
            * - `backgroundProps` An object of props given to the background component
            * - `foreground` Either a markdown-formatted string or a foreground component **REQUIRED**
+           * - `altText` A string describing the background graphic, which is read aloud after the foreground blurb. You can add it to each step or, if you want to add just one alt text to describe all graphics in the scroll section, add it to just the first step. **RECOMMENDED**
            * - `foregroundProps` An object of props given to the foreground component
            *
            * @required

package/dist/@types/components/Scroller/docProps.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentType } from 'svelte';
 interface BlockStep {
+    AltText?: string;
     Background: string;
     Text: string;
 }
@@ -27,6 +28,7 @@ export declare const getScrollerPropsFromDoc: (docBlock: Block, aiCharts: AiChar
             assetsPath: string;
         };
         foreground: string;
+        altText: string;
     }[];
 };
 export {};

package/dist/components/Scroller/Embedded/Background.svelte

@@ -4,8 +4,8 @@ export let index;
 import Block from '../../Block/Block.svelte';
 </script>
 
-<Block width={backgroundWidth} cls="background-container step-{index + 1}">
-  <div class="embedded-background step-{index + 1}">
+<Block width="{backgroundWidth}" cls="background-container step-{index + 1}">
+  <div class="embedded-background step-{index + 1}" aria-hidden="true">
     <svelte:component
       this="{step.background}"
       {...step.backgroundProps || {}}

package/dist/components/Scroller/Embedded/Foreground.svelte

@@ -7,11 +7,23 @@ import Block from '../../Block/Block.svelte';
 {#if step.foreground === '' || !step.foreground}
   <!-- Empty foreground -->
   <div class="empty-step-foreground step-{index + 1}"></div>
+
+  {#if typeof step.altText === 'string'}
+    <div class="background-alt-text visually-hidden">
+      {@html marked.parse(step.altText)}
+    </div>
+  {/if}
 {:else if typeof step.foreground === 'string'}
   <Block cls="body-text step-{index + 1}">
     <div class="embedded-foreground step-{index + 1}">
       {@html marked.parse(step.foreground)}
     </div>
+
+    {#if typeof step.altText === 'string'}
+      <div class="background-alt-text visually-hidden">
+        {@html marked.parse(step.altText)}
+      </div>
+    {/if}
   </Block>
 {:else}
   <div class="embedded-foreground step-{index + 1}">
@@ -200,4 +212,18 @@ div.embedded-foreground :global(.font-sans) {
 }
 div.embedded-foreground :global(p:last-child) {
   margin-bottom: 0;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+          clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+  white-space: nowrap !important;
+  border: 0 !important;
 }</style>

package/dist/components/Scroller/Foreground.svelte

@@ -7,6 +7,11 @@ import { marked } from 'marked';
     {#if step.foreground === '' || !step.foreground}
       <!-- Empty foreground -->
       <div class="empty-step-foreground"></div>
+      {#if typeof step.altText === 'string'}
+        <div class="background-alt-text visually-hidden">
+          {@html marked.parse(step.altText)}
+        </div>
+      {/if}
     {:else}
       <div class="step-foreground">
         {#if typeof step.foreground === 'string'}
@@ -18,11 +23,95 @@ import { marked } from 'marked';
           />
         {/if}
       </div>
+      {#if typeof step.altText === 'string'}
+        <div class="background-alt-text visually-hidden">
+          {@html marked.parse(step.altText)}
+        </div>
+      {/if}
     {/if}
   </div>
 {/each}
 
-<style>div.step-foreground-container {
+<style>.paragraph-size {
+  font-size: 1.3rem;
+  line-height: 2.1rem;
+}
+.paragraph-size.font-sans {
+  font-size: 1.1rem;
+  line-height: 1.75rem;
+}
+@media (max-width: 540px) {
+  .paragraph-size {
+    font-size: 1.1rem;
+    line-height: 1.8rem;
+  }
+  .paragraph-size.font-sans {
+    font-size: 1rem;
+    line-height: 1.6rem;
+  }
+}
+.paragraph-size.important {
+  font-size: 1.3rem !important;
+  line-height: 2.1rem !important;
+}
+.paragraph-size.important.font-sans {
+  font-size: 1.1rem !important;
+  line-height: 1.8rem !important;
+}
+@media (max-width: 540px) {
+  .paragraph-size.important {
+    font-size: 1.1rem !important;
+    line-height: 1.8rem !important;
+  }
+  .paragraph-size.important.font-sans {
+    font-size: 1rem !important;
+    line-height: 1.6rem !important;
+  }
+}
+
+.small-size {
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+}
+@media (max-width: 540px) {
+  .small-size {
+    font-size: 0.8rem;
+    line-height: 1.1rem;
+  }
+}
+.small-size.important {
+  font-size: 0.9rem !important;
+  line-height: 1.2rem !important;
+}
+@media (max-width: 540px) {
+  .small-size.important {
+    font-size: 0.8rem !important;
+    line-height: 1.1rem !important;
+  }
+}
+
+.blockquote-size {
+  font-size: 1.6rem;
+  line-height: 2.1rem;
+}
+@media (max-width: 540px) {
+  .blockquote-size {
+    font-size: 1.3rem;
+    line-height: 1.9rem;
+  }
+}
+.blockquote-size.important {
+  font-size: 1.6rem !important;
+  line-height: 2rem !important;
+}
+@media (max-width: 540px) {
+  .blockquote-size.important {
+    font-size: 1.3rem !important;
+    line-height: 1.8rem !important;
+  }
+}
+
+div.step-foreground-container {
   height: 100vh;
   width: initial;
   max-width: initial;
@@ -39,4 +128,18 @@ div.step-foreground-container .step-foreground {
 }
 div.step-foreground-container .step-foreground :global(p:last-child) {
   margin-bottom: 0;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+          clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+  white-space: nowrap !important;
+  border: 0 !important;
 }</style>

package/dist/components/Scroller/Scroller.svelte

@@ -9,9 +9,10 @@ export let id = '';
  *
  * Each step object in the array can have:
  *
- * - `background` A background component **REQUIRED**
+ * - `background` A background component. **REQUIRED**
  * - `backgroundProps` An object of props given to the background component
  * - `foreground` Either a markdown-formatted string or a foreground component **REQUIRED**
+ * - `altText` A string describing the background graphic, which is read aloud after the foreground blurb. You can add it to each step or, if you want to add just one alt text to describe all graphics in the scroll section, add it to just the first step. **RECOMMENDED**
  * - `foregroundProps` An object of props given to the foreground component
  *
  * @required
@@ -99,6 +100,7 @@ let progress;
         class="background"
         class:right="{foregroundPosition === 'left opposite'}"
         class:left="{foregroundPosition === 'right opposite'}"
+        aria-hidden="true"
       >
         <div class="scroller-graphic-well">
           <Block

package/dist/components/Scroller/docProps.js

@@ -9,6 +9,7 @@ export const getScrollerPropsFromDoc = (docBlock, aiCharts, assetsPath = '') =>
             background: aiCharts[step.Background],
             backgroundProps: { assetsPath },
             foreground: step.Text,
+            altText: step.AltText,
         })),
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",