Skip to content

site: accessibility improvements #19299

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 5, 2024
Merged

site: accessibility improvements #19299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6cd311a
a11y: add alt texts to images on home page
dvdksn Feb 3, 2024
723006b
a11y: add link titles in header, footer
dvdksn Feb 3, 2024
14f9053
a11y: remove explicit tabindex on buttons
dvdksn Feb 3, 2024
c1cd9f7
a11y: add aria label to theme switch button
dvdksn Feb 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ <h1 class="text-2xl">Get Docker</h1>
</a>
</div>
<div class="absolute bottom-0 right-0 origin-bottom-right md:scale-50">
<img class="dark:hidden" src="/assets/images/app-wf-light-1.svg" />
<img class="hidden dark:block" src="/assets/images/app-wf-dark-1.svg" />
<img class="dark:hidden" alt="Low-fi desktop app" src="/assets/images/app-wf-light-1.svg" />
<img class="hidden dark:block" alt="Low-fi desktop app" src="/assets/images/app-wf-dark-1.svg" />
</div>
</div>

Expand Down Expand Up @@ -127,8 +127,8 @@ <h2 class="font-medium">Getting started</h2>
</div>
</div>
<div class="absolute bottom-0 right-0 origin-bottom-right sm:scale-75">
<img class="dark:hidden" src="/assets/images/app-wf-light-2.svg" />
<img class="hidden dark:block" src="/assets/images/app-wf-dark-2.svg" />
<img class="dark:hidden" alt="Low-fi desktop app" src="/assets/images/app-wf-light-2.svg" />
<img class="hidden dark:block" alt="Low-fi desktop app" src="/assets/images/app-wf-dark-2.svg" />
</div>
</div>
<div class="rounded-[6px] bg-gradient-to-br from-blue-light-400 to-magenta-light-400 dark:from-blue-dark-400 dark:to-magenta-dark-400 p-[2px] drop-shadow">
Expand All @@ -152,8 +152,8 @@ <h2 class="font-medium">Featured</h2>
<div class="ml-auto sm:col-start-2">
{{ $dbcLogoWhite := resources.Get "images/build-cloud-white.svg" }}
{{ $dbcLogoLight := resources.Get "images/build-cloud-light.svg" }}
<img class="hidden h-full w-full dark:block" src="{{ $dbcLogoWhite.Permalink }}" />
<img class="h-full w-full dark:hidden" src="{{ $dbcLogoLight.Permalink }}" />
<img class="hidden h-full w-full dark:block" alt="Docker Build Cloud logo" src="{{ $dbcLogoWhite.Permalink }}" />
<img class="h-full w-full dark:hidden" alt="Docker Build Cloud logo" src="{{ $dbcLogoLight.Permalink }}" />
</div>
</div>
</div>
Expand Down
23 changes: 20 additions & 3 deletions layouts/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,34 +15,51 @@
<div class="flex gap-4">
<a
class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
title="X (Twitter)"
href="http://twitter.com/docker/">
{{ (resources.Get "images/TwitterCircle.svg").Content | safe.HTML }}
</a>
<a
class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
title="LinkedIn"
href="https://www.linkedin.com/company/docker">
{{ (resources.Get "images/LinkedinCircle.svg").Content | safe.HTML }}
</a>
<a
class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
title="Instagram"
href="https://www.instagram.com/dockerinc/">
{{ (resources.Get "images/InstagramCircle.svg").Content | safe.HTML }}
</a>
<a
class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
title="YouTube"
href="http://www.youtube.com/user/dockerrun">
{{ (resources.Get "images/YoutubeCircle.svg").Content | safe.HTML }}
</a>
<a
class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
title="Facebook"
href="https://www.facebook.com/docker.run">
{{ (resources.Get "images/FacebookCircle.svg").Content | safe.HTML }}
</a>
</div>
<div class="flex items-center gap-4">
<a class="underline-offset-2 hover:underline" href="https://www.docker.com/legal/docker-terms-service">Terms of Service</a>
<a class="underline-offset-2 hover:underline" href="https://www.dockerstatus.com/">Status</a>
<a class="underline-offset-2 hover:underline" href="https://www.docker.com/legal">Legal</a>
<a
class="underline-offset-2 hover:underline"
title="Docker Terms of Service"
href="https://www.docker.com/legal/docker-terms-service"
>Terms of Service</a>
<a
class="underline-offset-2 hover:underline"
title="Docker Systems Status Page"
href="https://www.dockerstatus.com/"
>Status</a>
<a
class="underline-offset-2 hover:underline"
title="Docker Legal Terms"
href="https://www.docker.com/legal"
>Legal</a>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions layouts/partials/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="mx-auto flex h-full max-w-[1400px] items-center justify-between">
<div class="flex h-full items-center gap-8 md:gap-2">
{{ if not .IsHome }}
<button x-data tabindex="4" @click="() => {
<button x-data @click="() => {
$store.showSidebar = ! $store.showSidebar;
const sidebar = document.querySelector('#sidebar');
if ($store.showSidebar) {
Expand All @@ -16,7 +16,7 @@
{{ end }}
<div>
{{/* main logo */}}
<a href="{{ site.BaseURL }}">
<a title="Docker Docs home page" href="{{ site.BaseURL }}">
<div>
{{- (resources.Get "images/docs-logo-white-full.svg").Content | safe.HTML -}}
</div>
Expand All @@ -26,7 +26,7 @@
</div>
<div class="flex items-center gap-6">
<div id="docsearch"></div>
<button id="theme-switch" tabindex="1" class="svg-icon"
<button aria-label="Theme switch" id="theme-switch" class="svg-icon"
x-data="{ theme: localStorage.getItem('theme-preference') }" x-init="$watch('theme', value => {
localStorage.setItem('theme-preference', value);
document.firstElementChild.className = value;
Expand Down