mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
Add landmarks (#564)
Use HTML semantic elements to set the landmarks of the page. This is helpful for assistive technologies to determine the different regions of content. In our case it's useful for jumping between the different islands that we use to group the form controls.
This commit is contained in:
parent
fc350f2ecd
commit
67eca2bda1
6 changed files with 757 additions and 697 deletions
|
@ -81,35 +81,38 @@
|
|||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<h1 class="visually-hidden">Excalidraw</h1>
|
||||
<header>
|
||||
<h1 class="visually-hidden">Excalidraw</h1>
|
||||
</header>
|
||||
<div id="root"></div>
|
||||
|
||||
<!-- https://github.com/tholman/github-corners -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 250 250"
|
||||
style="position: absolute; top: 0; right: 0"
|
||||
>
|
||||
<a
|
||||
href="https://github.com/excalidraw/excalidraw"
|
||||
target="_blank"
|
||||
aria-label="GitHub repository"
|
||||
<aside>
|
||||
<!-- https://github.com/tholman/github-corners -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 250 250"
|
||||
style="position: absolute; top: 0; right: 0"
|
||||
>
|
||||
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#6c6c6c" />
|
||||
<path
|
||||
class="octo-arm"
|
||||
d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
|
||||
style="transform-origin: 130px 106px"
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
class="octo-body"
|
||||
d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</a>
|
||||
</svg>
|
||||
<a
|
||||
href="https://github.com/excalidraw/excalidraw"
|
||||
target="_blank"
|
||||
aria-label="GitHub repository"
|
||||
>
|
||||
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#6c6c6c" />
|
||||
<path
|
||||
class="octo-arm"
|
||||
d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
|
||||
style="transform-origin: 130px 106px"
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
class="octo-body"
|
||||
d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</a>
|
||||
</svg>
|
||||
</aside>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue