Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-02-19 01:51:27 +01:00
Code Issues Projects Releases Wiki Activity

[PS-266] A11y: change tabbed interface to toggle buttons, correctly announce currently active tab as pressed (#2505)

Browse Source 
* Change routerLink links to button elements

* Set aria-pressed attribute on button depending on routerLinkActive

* Change base styles to apply to tabs that use `<button>` instead of `<a>`
This commit is contained in:
Patrick H. Lauke 2022-04-20 05:25:44 +01:00 committed by GitHub
parent a02e966da4
commit 2cafed758f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/popup/scss/base.scss
View File

@ -316,7 +316,8 @@ header {
padding: 0; padding: 0;
margin: 0; margin: 0;
a { a,
button {
text-align: center; text-align: center;
display: block; display: block;
padding: 7px 0; padding: 7px 0;
@ -325,6 +326,7 @@ header {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%;
@include themify($themes) { @include themify($themes) {
color: themed("mutedColor"); color: themed("mutedColor");
@ -345,7 +347,8 @@ header {
} }
&.active { &.active {
a { a,
button {
@include themify($themes) { @include themify($themes) {
color: themed("primaryColor"); color: themed("primaryColor");
} }

50
src/popup/tabs.component.html
View File

@ -2,30 +2,50 @@
<router-outlet></router-outlet> <router-outlet></router-outlet>
<nav class="tabs"> <nav class="tabs">
<ul> <ul>
<li routerLinkActive="active" *ngIf="showCurrentTab"> <li routerLinkActive="active" #rlaCurrentTab="routerLinkActive" *ngIf="showCurrentTab">
<a routerLink="current" appA11yTitle="{{ 'currentTab' | i18n }}"> <button
routerLink="current"
appA11yTitle="{{ 'currentTab' | i18n }}"
[attr.aria-pressed]="rlaCurrentTab.isActive"
>
<i class="bwi bwi-folder-closed-f bwi-2x" aria-hidden="true"></i>{{ "tab" | i18n }} <i class="bwi bwi-folder-closed-f bwi-2x" aria-hidden="true"></i>{{ "tab" | i18n }}
</a> </button>
</li> </li>
<li routerLinkActive="active"> <li routerLinkActive="active" #rlaMyVault="routerLinkActive">
<a routerLink="vault" appA11yTitle="{{ 'myVault' | i18n }}"> <button
routerLink="vault"
appA11yTitle="{{ 'myVault' | i18n }}"
[attr.aria-pressed]="rlaMyVault.isActive"
>
<i class="bwi bwi-lock-f bwi-2x" aria-hidden="true"></i>{{ "myVault" | i18n }} <i class="bwi bwi-lock-f bwi-2x" aria-hidden="true"></i>{{ "myVault" | i18n }}
</a> </button>
</li> </li>
<li routerLinkActive="active"> <li routerLinkActive="active" #rlaSend="routerLinkActive">
<a routerLink="send" appA11yTitle="{{ 'send' | i18n }}"> <button
routerLink="send"
appA11yTitle="{{ 'send' | i18n }}"
[attr.aria-pressed]="rlaSend.isActive"
>
<i class="bwi bwi-send-f bwi-2x" aria-hidden="true"></i>{{ "send" | i18n }} <i class="bwi bwi-send-f bwi-2x" aria-hidden="true"></i>{{ "send" | i18n }}
</a> </button>
</li> </li>
<li routerLinkActive="active"> <li routerLinkActive="active" #rlaGenerator="routerLinkActive">
<a routerLink="generator" appA11yTitle="{{ 'passGen' | i18n }}"> <button
routerLink="generator"
appA11yTitle="{{ 'passGen' | i18n }}"
[attr.aria-pressed]="rlaGenerator.isActive"
>
<i class="bwi bwi-generate-f bwi-2x" aria-hidden="true"></i>{{ "generator" | i18n }} <i class="bwi bwi-generate-f bwi-2x" aria-hidden="true"></i>{{ "generator" | i18n }}
</a> </button>
</li> </li>
<li routerLinkActive="active"> <li routerLinkActive="active" #rlaSettings="routerLinkActive">
<a routerLink="settings" appA11yTitle="{{ 'settings' | i18n }}"> <button
routerLink="settings"
appA11yTitle="{{ 'settings' | i18n }}"
[attr.aria-pressed]="rlaSettings.isActive"
>
<i class="bwi bwi-cog-f bwi-2x" aria-hidden="true"></i>{{ "settings" | i18n }} <i class="bwi bwi-cog-f bwi-2x" aria-hidden="true"></i>{{ "settings" | i18n }}
</a> </button>
</li> </li>
</ul> </ul>
</nav> </nav>