-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
headline component and general sweep
- Loading branch information
Showing
31 changed files
with
1,189 additions
and
222 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 29 additions & 22 deletions
51
src/components/BeforeAfter/stories/docs/ariaDescriptions.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,29 +1,36 @@ | ||
Use text elements in your overlays as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your images by setting an ID on text elements within each overly with the `description` [slot prop](https://svelte.dev/tutorial/slot-props). | ||
Use text elements in your overlays as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your images by setting an ID on text elements within each overlay with the `description` [slot prop](https://svelte.dev/tutorial/slot-props). | ||
|
||
> **💡 TIP:** You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but you can use these descriptions to provide more information or context that the reader might also need. | ||
```svelte | ||
<BeforeAfter | ||
beforeSrc="{`${assets}/images/before-after/myrne-before.jpg`}" | ||
beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020." | ||
afterSrc="{`${assets}/images/before-after/myrne-after.jpg`}" | ||
afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020." | ||
> | ||
<!-- 👇 Define the prop on each slot... --> | ||
<div let:description="{id}" slot="beforeOverlay"> | ||
<p id="{id}"> | ||
On July 7, 2020, the base contained only a few transport vehicles. | ||
</p> | ||
</div> | ||
<div let:description="{id}" slot="afterOverlay"> | ||
<!-- 👇 id can also be used on an element containing multiple text elements --> | ||
<div id="{id}"> | ||
<p>But by October, tanks and artillery could be seen.</p> | ||
<p> | ||
In total, over 50 pieces of heavy machinery and 200 personnel are now | ||
based here. | ||
</p> | ||
<BeforeAfter | ||
beforeSrc="{beforeImg}" | ||
beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020." | ||
afterSrc="{afterImg}" | ||
afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020." | ||
> | ||
<div slot="beforeOverlay" class="overlay p-3 before"> | ||
<p class="h4 font-bold">July 7, 2020</p> | ||
<p class="body-note">Initially, this site was far smaller.</p> | ||
</div> | ||
</div> | ||
<div slot="afterOverlay" class="overlay p-3 after"> | ||
<p class="h4 font-bold">Oct. 20, 2020</p> | ||
<p class="body-note">But then forces built up.</p> | ||
</div> | ||
<p slot="caption">Photos by MAXAR Technologies, 2021.</p> | ||
</BeforeAfter> | ||
<style lang="scss"> | ||
.overlay { | ||
background: rgba(0, 0, 0, 0.45); | ||
max-width: 350px; | ||
&.after { | ||
text-align: right; | ||
} | ||
p { | ||
color: #ffffff; | ||
} | ||
} | ||
</style> | ||
</BeforeAfter> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.