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

HDS-2042 Add aria-current attributes for language buttons #1180

Merged
merged 1 commit into from
Dec 6, 2023
Merged

HDS-2042 Add aria-current attributes for language buttons #1180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Changes that are not related to specific components

#### Fixed

- [Component] What bugs/typos are fixed?
- [Header.LanguageSelector] Added `aria-current` to currently selected language button

### Core

Expand Down
9 changes: 8 additions & 1 deletion .../react/src/components/header/components/headerLanguageSelector/HeaderLanguageSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,14 @@ export const LanguageButton = ({ value, label }: LanguageOption) => {
const selectLanguage = withDefaultPrevented(() => setLanguage(value));

return (
<button key={value} lang={value} onClick={selectLanguage} type="button" className={className}>
<button
key={value}
lang={value}
onClick={selectLanguage}
type="button"
className={className}
aria-current={activeLanguage === value}
>
<span>{label}</span>
</button>
);
Expand Down
10 changes: 10 additions & 0 deletions ...ader/components/headerLanguageSelector/__snapshots__/HeaderLanguageSelector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ exports[`<Header.LanguageSelector /> spec renders the consumer component correct
class="languageNodes"
>
<button
aria-current="true"
class="item activeItem"
lang="fi"
type="button"
Expand All @@ -18,6 +19,7 @@ exports[`<Header.LanguageSelector /> spec renders the consumer component correct
</span>
</button>
<button
aria-current="false"
class="item"
lang="sv"
type="button"
Expand All @@ -27,6 +29,7 @@ exports[`<Header.LanguageSelector /> spec renders the consumer component correct
</span>
</button>
<button
aria-current="false"
class="item"
lang="en"
type="button"
Expand Down Expand Up @@ -94,6 +97,7 @@ exports[`<Header.LanguageSelector /> spec renders the consumer component correct
id="language-selection-more-dropdown"
>
<button
aria-current="false"
class="item"
lang="es"
type="button"
Expand All @@ -103,6 +107,7 @@ exports[`<Header.LanguageSelector /> spec renders the consumer component correct
</span>
</button>
<button
aria-current="false"
class="item"
lang="no"
type="button"
Expand Down Expand Up @@ -190,6 +195,7 @@ exports[`<Header.LanguageSelector /> spec renders the consumer component with pr
class="languageNodes"
>
<button
aria-current="true"
class="item activeItem"
lang="fi"
type="button"
Expand All @@ -199,6 +205,7 @@ exports[`<Header.LanguageSelector /> spec renders the consumer component with pr
</span>
</button>
<button
aria-current="false"
class="item"
lang="sv"
type="button"
Expand All @@ -208,6 +215,7 @@ exports[`<Header.LanguageSelector /> spec renders the consumer component with pr
</span>
</button>
<button
aria-current="false"
class="item"
lang="en"
type="button"
Expand Down Expand Up @@ -275,6 +283,7 @@ exports[`<Header.LanguageSelector /> spec renders the consumer component with pr
id="language-selection-more-dropdown"
>
<button
aria-current="false"
class="item"
lang="es"
type="button"
Expand All @@ -284,6 +293,7 @@ exports[`<Header.LanguageSelector /> spec renders the consumer component with pr
</span>
</button>
<button
aria-current="false"
class="item"
lang="no"
type="button"
Expand Down
Loading