Skip to content

Commit

Permalink
docs: ✏️ Update screenshots
Browse files Browse the repository at this point in the history
  • Loading branch information
@phun-ky
phun-ky committed Nov 21, 2024
1 parent 127a0fd commit dc4394f
Show file tree
Hide file tree
Showing 8 changed files with 242 additions and 26 deletions.
18 changes: 16 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@
- [A11y notation](#a11y-notation)
- [Tab stops](#tab-stops)
- [Landmarks and regions](#landmarks-and-regions)
- [Headings](#headings)
- [Autocomplete](#autocomplete)
- [Keys and shortcut](#keys-and-shortcut)
- [Customization](#customization)
- [API](#api)
Expand Down Expand Up @@ -548,9 +550,9 @@ In your component examples, use the following attribute.
### A11y notation

With **SPECCER**, you can also display accessibility notation, like [Accessibility Bluelines](https://dribbble.com/shots/6269661-Accessibility-Bluelines?utm_source=Clipboard_Shot&utm_campaign=jeremyelder&utm_content=Accessibility%20Bluelines&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=jeremyelder&utm_content=Accessibility%20Bluelines&utm_medium=Social_Share):
With **SPECCER**, you can also display accessibility notation, like [Accessibility Bluelines](https://dribbble.com/shots/6269661-Accessibility-Bluelines?utm_source=Clipboard_Shot&utm_campaign=jeremyelder&utm_content=Accessibility%20Bluelines&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=jeremyelder&utm_content=Accessibility%20Bluelines&utm_medium=Social_Share) or [A11y Annotation Kit](https://www.figma.com/community/file/953682768192596304):

Prior art: [Jeremy Elder](https://twitter.com/JeremyElder)
Prior art: [Jeremy Elder](https://twitter.com/JeremyElder) and [Stephanie Hagadorn](https://shagadorn.work/)

#### Tab stops

Expand All @@ -564,6 +566,18 @@ If you want to display tab stops, append `data-speccer="a11y tabstops"` as an at

If you want to display landmarks and regions, append `data-speccer="a11y landmark"` as an attribute to the container you want to display the landmarks and regions in.

#### Headings

![Screenshot of speccer a11y headings in use](./public/speccer-a11y-headings-light.png)

If you want to display headings, append `data-speccer="a11y headings"` as an attribute to the container you want to display the headings in.

#### Autocomplete

![Screenshot of speccer a11y autocomplete in use](./public/speccer-a11y-autocomplete-light.png)

If you want to display autocomplete, append `data-speccer="a11y autocomplete"` as an attribute to the container you want to display the autocomplete in.

#### Keys and shortcut

![Screenshot of speccer a11y shortcuts in use](./public/speccer-a11y-shortcuts-light.png)
Expand Down
248 changes: 225 additions & 23 deletions dev/a11y.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,43 +132,245 @@ <h1 class="ph">A11y features</h1>
</div>
</section>
<section class="ph section">
<div class="ph container">
<h2 class="ph">Landmarks</h2>
<div class="ph well" data-speccer="a11y landmark">
<h2 class="ph">Form</h2>
<form class="ph" data-speccer="a11y autocomplete">
<div class="ph input-group">
<label class="ph" for="text1">Firstname</label>
<div
class="ph container"
style="padding-top: 5rem; padding-bottom: 5rem"
>
<div class="ph popover-test">
<form data-speccer="a11y autocomplete">
<h3 class="ph">Settings</h3>
<div class="ph image-meta">
<img
src="https://picsum.photos/100/100"
alt=""
class="ph thumbnail"
data-speccer-title="image"
data-speccer-description="Document thumbnail"
/>
<input
data-lpignore="true"
type="text"
id="text1"
class="ph"
data-speccer-description="Document name"
value="Camellia by Jinjin Sun"
style="
border: none;
border-bottom: 1pt solid var(--gray-3);
font-size: 0.875rem;
padding-bottom: 5px;
width: 100%;
max-width: none;
border-radius: 0;
margin: 0;
height: auto;
background-color: transparent;
color: var(--gray-2);
"
/>
</div>
<div class="ph input-group">
<label class="ph" for="text2">Lastname</label>
<div
class="ph settings"
style="display: flex; margin-bottom: 8px"
>
<input
data-lpignore="true"
type="text"
id="text2"
class="ph"
class="ph non-editable"
data-speccer-title="Static text"
data-speccer-description="Document size [xx] by [yy][units]"
style="
height: auto;
background-color: transparent;
border: none;
margin: 0;
padding: 0;
color: var(--gray-1);
"
value="23 x 32 in"
/>
<button
type="button"
class="ph button tertiary"
data-speccer-title="button"
data-speccer-description="Change document size"
style="
border-radius: 0;
font-size: 16px;
font-weight: 500;
color: #4a9afb;
background-color: transparent;
padding: 0;
margin-left: auto;
flex-shrink: 0;
"
>
Change
</button>
</div>
<div class="ph input-group">
<label class="ph" for="text3">Description</label>
<textarea id="text3" class="ph"></textarea>
<div class="ph iconsettings">
<span class="ph setting-name">Flip</span
><button type="button" class="ph iconsetting">
<svg
style="transform: rotate(-90deg)"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
>
<path
fill="currentColor"
d="m1 1 5 6 4.94-6zm4.94 9L1 16h10zm-2.82 5 2.83-3.44 3 3.44zM10 8h1v1h-1zm2 0h1v1h-1zM8 8h1v1H8zM6 8h1v1H6zM4 8h1v1H4zM2 8h1v1H2zM0 8h1v1H0z"
/>
<path
fill="currentColor"
d="M15 8.47a4.8 4.8 0 0 1-1.879 3.632L12 11v3h3l-1.18-1.18A5.76 5.76 0 0 0 16 8.478V8.47a6.06 6.06 0 0 0-2.884-4.905l-.596.805a5.1 5.1 0 0 1 2.479 4.087z"
/>
</svg></button
><button
type="button"
class="ph iconsetting"
data-speccer-title="button"
data-speccer-description="Flip horizontally / Flip vertically"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path
fill="currentColor"
d="m1 1 5 6 4.94-6zm4.94 9L1 16h10zm-2.82 5 2.83-3.44 3 3.44zM10 8h1v1h-1zm2 0h1v1h-1zM8 8h1v1H8zM6 8h1v1H6zM4 8h1v1H4zM2 8h1v1H2zM0 8h1v1H0z"
/>
<path
fill="currentColor"
d="M15 8.47a4.8 4.8 0 0 1-1.879 3.632L12 11v3h3l-1.18-1.18A5.76 5.76 0 0 0 16 8.478V8.47a6.06 6.06 0 0 0-2.884-4.905l-.596.805a5.1 5.1 0 0 1 2.479 4.087z"
/>
</svg>
</button>
<span class="ph setting-name">Rotate</span>
<button type="button" class="ph iconsetting">
<svg
style="transform: rotate(90deg) scale(-1, 1)"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1024 1024"
>
<path
fill="currentColor"
d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32m-44 402H188V494h440z"
/>
<path
fill="currentColor"
d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3"
/>
</svg></button
><button type="button" class="ph iconsetting">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1024 1024"
>
<path
fill="currentColor"
d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32m-44 402H188V494h440z"
/>
<path
fill="currentColor"
d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3"
/>
</svg>
</button>
</div>
<div class="ph input-group">
<label class="ph" for="email1">Email</label>
<hr class="ph full" />
<h4 class="ph">View settings</h4>
<div
class="ph toggle-controls"
style="margin-bottom: 1rem"
data-speccer="a11y shortcuts"
data-speccer-a11y-shortcut="ctrl + shift + r"
>
<input
autocomplete="email"
data-lpignore="true"
type="email"
id="email1"
id="id1232131233"
type="checkbox"
class="ph toggle"
value="a"
/>
<label for="id1232131233" class="ph">Rotation snapping</label>
</div>
<div
class="ph"
style="
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin-bottom: 1.5rem;
"
>
<div
class="ph"
style="
display: flex;
flex-wrap: nowrap;
grid-gap: 0.5rem;
align-items: center;
"
>
<input type="radio" name="asd2" class="ph" />
<label class="ph">30°</label>
</div>

<div
class="ph"
style="
display: flex;
flex-wrap: nowrap;
grid-gap: 0.5rem;
align-items: center;
"
>
<input type="radio" name="asd2" checked class="ph" />
<label class="ph">45°</label>
</div>

<div
class="ph"
style="
display: flex;
flex-wrap: nowrap;
grid-gap: 0.5rem;
align-items: center;
"
>
<input type="radio" name="asd2" class="ph" />
<label class="ph">90°</label>
</div>
</div>
<div class="ph toggle-controls" data-speccer-title="switch">
<input
id="id1232131231"
type="checkbox"
class="ph toggle"
value="a"
/>
<label for="id1232131231" class="ph">Touch shortcut</label>
</div>
<div class="ph toggle-controls" data-speccer-title="switch">
<input
id="id1232131232"
type="checkbox"
class="ph toggle"
value="a"
/>
<label for="id1232131232" class="ph">Artboard preview</label>
</div>
<hr class="ph full" />
<button
type="button"
class="ph button secondary app-settings"
data-speccer="a11y shortcuts"
data-speccer-a11y-shortcut="ctrl + shift + s"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -256 1792 1792"
>
<path
fill="currentColor"
d="M1145.492 645.424q0-106-75-181t-181-75q-106 0-181 75t-75 181q0 106 75 181t181 75q106 0 181-75t75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"
/>
</svg>
App settings
</button>
</form>
</div>
</div>
Expand Down
Binary file added public/speccer-a11y-autocomplete-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/speccer-a11y-headings-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/speccer-a11y-landmarks-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/speccer-a11y-shortcuts-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/speccer-a11y-tabstops-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/features/a11y/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
*
* ```html
* <div
* data-speccer="a11y [shortcuts|tabstops|landmark]"
* data-speccer="a11y [shortcuts|tabstops|landmark|headings|autocomplete]"
* class="…"
* >
* …
Expand Down

0 comments on commit dc4394f

Please sign in to comment.