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

Accessibility update / Tested for frontend-subsidiepunt #508

Merged
merged 10 commits into from
Sep 5, 2024
Merged

Accessibility update / Tested for frontend-subsidiepunt #508

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9ff08a7
fix sortable header contrast
Dietr Sep 4, 2024
0128211
fix secondary helptext contrast
Dietr Sep 4, 2024
9d05aee
remove aria-controls: not a valid property with aria-live
Dietr Sep 4, 2024
e321632
add contactLabel to allow a different label, currently certain produc…
Dietr Sep 4, 2024
194c231
fix dropdown storybook example, role=menu is not allowed on a dropdow…
Dietr Sep 4, 2024
94b9337
fix default contactLabel
Dietr Sep 5, 2024
2d0c408
add aria-label to main header nav
Dietr Sep 5, 2024
ad9a376
fix linting, disable require-context-role on dropdown example as it r…
Dietr Sep 5, 2024
d1d996f
provide an argument for the main header nav aria-label
Dietr Sep 5, 2024
97b16f0
remove quotes
Dietr Sep 5, 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
8 changes: 7 additions & 1 deletion addon/components/au-main-header.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface AuMainHeaderSignature {
contactRoute?: string;
contactLabel?: string;
homeRoute?: string;
navigationAriaLabel?: string;
};
Blocks: {
default: [];
Expand All @@ -28,6 +29,11 @@ export default class AuMainHeader extends Component<AuMainHeaderSignature> {
else return 'Contacteer ons';
}

get navigationAriaLabel() {
if (this.args.navigationAriaLabel) return this.args.navigationAriaLabel;
else return 'Informatie en instellingen';
}

@action
headerLinkFocus() {
document.querySelector<HTMLElement>('#main')?.focus();
Expand Down Expand Up @@ -56,7 +62,7 @@ export default class AuMainHeader extends Component<AuMainHeaderSignature> {
</a>
</div>
<nav
aria-label="Informatie en instellingen"
aria-label="{{this.navigationAriaLabel}}"
Dietr marked this conversation as resolved.
Show resolved Hide resolved
class="au-c-main-header__actions"
>
<ul class="au-c-list-horizontal">
Expand Down
7 changes: 7 additions & 0 deletions stories/5-components/Brand/AuMainHeader.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ export default {
description:
'Set the label for the contact link (default: Contacteer ons)',
},
navigationAriaLabel: {
control: 'text',
description:
'Set the aria-label for the navigation (default: Informatie en instellingen)',
},
},
parameters: {
layout: 'padded',
Expand All @@ -32,6 +37,7 @@ const Template = (args) => ({
@homeRoute={{this.homeRoute}}
@contactRoute={{this.contactRoute}}
@contactLabel={{this.contactLabel}}
@navigationAriaLabel={{this.navigationAriaLabel}}
>
<AuDropdown @title="Demo dropdown" @alignment="right" role="menu">
<AuButton @skin="link" @icon="logout" role="menuitem">
Expand All @@ -49,4 +55,5 @@ Component.args = {
homeRoute: 'home',
contactRoute: 'contact',
contactLabel: 'Contacteer ons',
navigationAriaLabel: 'Informatie en instellingen',
};
Loading