Skip to content
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

Jump to bottom

fix: improving sd-header a11y #1668

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix: improving sd-header a11y #1668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bf793a2
fix: add icon only accessible names, add aria-expanded, logo descrip…
auroraVasconcelos Nov 13, 2024
817a727
fix: buttons with links accessible names
auroraVasconcelos Nov 13, 2024
1820267
chore: add aria expanded and aria controls to button
auroraVasconcelos Nov 21, 2024
e97828f
Merge branch 'main' into feat/sd-header-a11y
auroraVasconcelos Nov 21, 2024
28a312f
chore: add a11y hint
auroraVasconcelos Nov 21, 2024
ecdb7ab
Merge branch 'feat/sd-header-a11y' of github.com:solid-design-system/…
auroraVasconcelos Nov 21, 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
1 change: 1 addition & 0 deletions packages/components/src/components/drawer/drawer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,7 @@ export default class SdDrawer extends SolidElement {
variant="tertiary"
size="lg"
part="close-button"
aria-expanded=${this.open ? 'true' : 'false'}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
aria-expanded=${this.open ? 'true' : 'false'}
aria-expanded=${this.open}

@click=${() => this.requestClose('close-button')}
><sd-icon label=${this.localize.term('close')} name="close" library="system"></sd-icon
></sd-button>
Expand Down
110 changes: 78 additions & 32 deletions packages/docs/src/stories/templates/header.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default {
},
title: 'Templates/Header'
};

/** **Accessibility hint:** aria-expanded and aria-controls may be use for smaller screens to make header accessible */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can remove the "smaller screens..." part and just mention that these attributes should be set for accessibility purposes. What do you think?

export const SampleA = {
name: 'Header Sample A-01',
render: () => html`
Expand All @@ -26,13 +26,13 @@ export const SampleA = {
<div class="flex justify-between items-center">
<!-- top-left-area start !-->
<a class="flex flex-shrink" href="#">
<img class="h-8 md:h-12 lg:h-14" src="images/logo-unioninvestment-lg.svg" alt="Logo" />
<img class="h-8 md:h-12 lg:h-14" src="images/logo-unioninvestment-lg.svg" alt="Union Investment Homepage" />
</a>
<!-- top-left-area end !-->
<!-- top-right-area start !-->
<div class="flex lg:hidden">
<sd-navigation-item onclick="openDrawerSampleA()">
<sd-icon name="system/menu" class="text-xl -my-[1.5px] -mx-1"></sd-icon>
<sd-navigation-item id="open-menu-sample-a">
<sd-icon name="system/menu" label="Open menu" class="text-xl -my-[1.5px] -mx-1"></sd-icon>
</sd-navigation-item>
</div>
<!-- top-right-area end !-->
Expand All @@ -50,12 +50,12 @@ export const SampleA = {
<div class="-mr-4 flex items-center">
<sd-navigation-item href="javascript:void(0)">
<div class="w-4 h-4 flex items-center">
<sd-icon title="Unsere weiteren Auftritte" name="system/website" class="text-xl absolute -ml-1"></sd-icon>
<sd-icon name="system/website" label="Website" class="text-xl absolute -ml-1"></sd-icon>
</div>
</sd-navigation-item>
<sd-navigation-item onclick="alert('This could open a search bar')">
<div class="w-4 h-4 flex items-center">
<sd-icon title="Suche" name="system/magnifying-glass" class="text-xl absolute -ml-1"></sd-icon>
<sd-icon name="system/magnifying-glass" label="Magnifying glass" class="text-xl absolute -ml-1"></sd-icon>
</div>
</sd-navigation-item>
<sd-navigation-item href="javascript:void(0)">
Expand Down Expand Up @@ -97,11 +97,25 @@ export const SampleA = {
</sd-navigation-item>
</nav>
</sd-drawer>
<script>
function openDrawerSampleA() {
<script type="module">
await Promise.all([
customElements.whenDefined('sd-navigation-item'),
customElements.whenDefined('sd-drawer')
]).then(() => {
const drawerSampleA = document.getElementById('sample-a-drawer');
drawerSampleA.show();
}
const navigationItemSampleA = document.getElementById('open-menu-sample-a');
const buttonSampleA = navigationItemSampleA.shadowRoot.querySelector('button');

buttonSampleA.setAttribute('aria-controls', 'sample-a-drawer');
//Add the necessary ARIA attributes to prevent only being added after action
buttonSampleA.setAttribute('aria-expanded', 'false');
drawerSampleA.addEventListener('sd-hide', () => buttonSampleA.setAttribute('aria-expanded', 'false'));

navigationItemSampleA.addEventListener('click', () => {
drawerSampleA.show();
buttonSampleA.setAttribute('aria-expanded', 'true');
});
});
</script>
`
};
Expand All @@ -113,34 +127,34 @@ export const SampleA02 = {
<div class="flex justify-between items-center">
<!-- top-left-area start !-->
<a class="flex flex-shrink" href="#">
<img class="h-8 md:h-12 lg:h-14" src="images/logo-unioninvestment-lg.svg" alt="Logo" />
<img class="h-8 md:h-12 lg:h-14" src="images/logo-unioninvestment-lg.svg" alt="Union Investment Homepage" />
</a>
<!-- top-left-area end !-->
<!-- top-right-area start !-->
<div class="flex lg:hidden">
<sd-navigation-item onclick="openDrawerSampleA2()">
<sd-icon name="system/menu" class="text-xl -my-[1.5px] -mx-1"></sd-icon>
<sd-navigation-item id="open-menu-sample-a-02">
<sd-icon name="system/menu" label="Open menu" class="text-xl -my-[1.5px] -mx-1"></sd-icon>
</sd-navigation-item>
</div>
<div class="-mr-4 lg:flex hidden items-center">
<sd-navigation-item href="javascript:void(0)">
<div class="w-4 h-4 flex items-center">
<sd-icon name="system/filter-empty" class="text-xl absolute -ml-1"></sd-icon>
<sd-icon name="system/filter-empty" label="Filter empty" class="text-xl absolute -ml-1"></sd-icon>
</div>
</sd-navigation-item>
<sd-navigation-item href="javascript:void(0)">
<div class="w-4 h-4 flex items-center">
<sd-icon name="system/globe" class="text-xl absolute -ml-1"></sd-icon>
<sd-icon name="system/globe" label="Globe" class="text-xl absolute -ml-1"></sd-icon>
</div>
</sd-navigation-item>
<sd-navigation-item href="javascript:void(0)">
<div class="w-4 h-4 flex items-center">
<sd-icon name="system/website" class="text-xl absolute -ml-1"></sd-icon>
<sd-icon name="system/website" label="Website" class="text-xl absolute -ml-1"></sd-icon>
</div>
</sd-navigation-item>
<sd-navigation-item onclick="alert('This could open a search bar')">
<div class="w-4 h-4 flex items-center">
<sd-icon name="system/magnifying-glass" class="text-xl absolute -ml-1"></sd-icon>
<sd-icon name="system/magnifying-glass" label="Magnifying glass" class="text-xl absolute -ml-1"></sd-icon>
</div>
</sd-navigation-item>
<sd-navigation-item href="javascript:void(0)">
Expand Down Expand Up @@ -195,11 +209,25 @@ export const SampleA02 = {
</sd-navigation-item>
</nav>
</sd-drawer>
<script>
function openDrawerSampleA2() {
const drawerSampleA2 = document.getElementById('sample-a02-drawer');
drawerSampleA2.show();
}
<script type="module">
await Promise.all([
customElements.whenDefined('sd-navigation-item'),
customElements.whenDefined('sd-drawer')
]).then(() => {
const drawerSampleA02 = document.getElementById('sample-a02-drawer');
const navigationItemSampleA02 = document.getElementById('open-menu-sample-a-02');
const buttonSampleA02 = navigationItemSampleA02.shadowRoot.querySelector('button');

buttonSampleA02.setAttribute('aria-controls', 'sample-a02-drawer');
//Add the necessary ARIA attributes to prevent only being added after action
buttonSampleA02.setAttribute('aria-expanded', 'false');
drawerSampleA02.addEventListener('sd-hide', () => buttonSampleA02.setAttribute('aria-expanded', 'false'));

navigationItemSampleA02.addEventListener('click', () => {
drawerSampleA02.show();
buttonSampleA02.setAttribute('aria-expanded', 'true');
});
});
</script>
`
};
Expand All @@ -211,8 +239,12 @@ export const SampleB = {
<div class="flex justify-between items-center">
<!-- top-left-area start !-->
<a class="flex flex-shrink" href="#">
<img class="sm:h-12 lg:h-14 hidden sm:flex" src="images/logo-unioninvestment-lg.svg" alt="Logo" />
<img class="h-8 sm:hidden" src="images/logo-unioninvestment-sm.svg" alt="Logo" />
<img
class="sm:h-12 lg:h-14 hidden sm:flex"
src="images/logo-unioninvestment-lg.svg"
alt="Union Investment Homepage"
/>
<img class="h-8 sm:hidden" src="images/logo-unioninvestment-sm.svg" alt="Union Investment Homepage" />
</a>
<!-- top-left-area end !-->
<!-- top-right-area start !-->
Expand All @@ -223,8 +255,8 @@ export const SampleB = {
</div>
</div>
<div class="flex lg:hidden">
<sd-navigation-item onclick="openDrawerSampleB()">
<sd-icon name="system/menu" class="text-xl -my-[1.5px] -mx-1"></sd-icon>
<sd-navigation-item id="open-menu-sample-b">
<sd-icon name="system/menu" label="Open menu" class="text-xl -my-[1.5px] -mx-1"></sd-icon>
</sd-navigation-item>
</div>
</div>
Expand All @@ -243,12 +275,12 @@ export const SampleB = {
<div class="flex items-center">
<sd-navigation-item href="javascript:void(0)">
<div class="w-4 h-4 flex items-center">
<sd-icon title="Unsere weiteren Auftritte" name="system/website" class="text-xl absolute -ml-1"></sd-icon>
<sd-icon name="system/website" label="Website" class="text-xl absolute -ml-1"></sd-icon>
</div>
</sd-navigation-item>
<sd-navigation-item onclick="alert('This could open a search bar')">
<div class="w-4 h-4 flex items-center">
<sd-icon title="Suche" name="system/magnifying-glass" class="text-xl absolute -ml-1"></sd-icon>
<sd-icon name="system/magnifying-glass" label="Magnifying glass" class="text-xl absolute -ml-1"></sd-icon>
</div>
</sd-navigation-item>
<!-- bottom-right-area end !-->
Expand Down Expand Up @@ -276,11 +308,25 @@ export const SampleB = {
</sd-navigation-item>
</nav>
</sd-drawer>
<script>
function openDrawerSampleB() {
<script type="module">
await Promise.all([
customElements.whenDefined('sd-navigation-item'),
customElements.whenDefined('sd-drawer')
]).then(() => {
const drawerSampleB = document.getElementById('sample-b-drawer');
drawerSampleB.show();
}
const navigationItemSampleB = document.getElementById('open-menu-sample-b');
const buttonSampleB = navigationItemSampleB.shadowRoot.querySelector('button');

buttonSampleB.setAttribute('aria-controls', 'sample-b-drawer');
//Add the necessary ARIA attributes to prevent only being added after action
buttonSampleB.setAttribute('aria-expanded', 'false');
drawerSampleB.addEventListener('sd-hide', () => buttonSampleB.setAttribute('aria-expanded', 'false'));

navigationItemSampleB.addEventListener('click', () => {
drawerSampleB.show();
buttonSampleB.setAttribute('aria-expanded', 'true');
});
});
</script>
`
};
Loading