search

w3c / wcag-redesign

Temporary repository to preview WCAG redesign work
0 stars 1 forks source link

back to top #3

Closed shawna-slh closed 1 year ago

shawna-slh commented 1 year ago

add component like we have throughout the WAI website

@SteveALee can you find the code we use for the main WAI website? (I have this at milestone level 4, so not urgent.)

SteveALee commented 1 year ago

@shawna-slh the new popup one? Yes.

shawna-slh commented 1 year ago

Yeah, this little guy bottom right: image

SteveALee commented 1 year ago

🥇

michael-n-cooper commented 1 year ago

I need the code you want added, along with where it goes in the page order.

shawna-slh commented 1 year ago

@michael-n-cooper

Looks like back to top is implemented in the understanding docs, e.g., https://wai-wcag-redesign.netlify.app/understanding/link-purpose-in-context

I assume you can use that code and don't need anything from Steve or me? Let us know.

Please add it to:

michael-n-cooper commented 1 year ago

There isn't a single element I can just copy from the page you referenced. I could probably figure it out, but it would take unnecessary time. I'm marking this is higher difficulty and suggest it not be part of the first release target.

shawna-slh commented 1 year ago

It looks like to me, put this right before </main>:

<a class="button button-backtotop" href="#top"><span>
<svg focusable="false" aria-hidden="true" class="icon-arrow-up " viewBox="0 0 26 28">
  <path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
</svg>
Back to Top </span></a>

And add id=top to body:

<body id="top"
SteveALee commented 1 year ago

That looks good. I think you have access to those CSS classes? If not I can give you the formatted non minimised CSS (when compiled from the SCSS)

shawna-slh commented 1 year ago

This is covered in https://github.com/w3c/wcag-redesign/pull/38