Merge remote-tracking branch 'origin/master' into account-switching_refactor_implement-service-changes

.github/workflows/release.yml

@@ -3,7 +3,15 @@ name: Release
 
 on:
   workflow_dispatch:
-    inputs: {}
+    inputs:
+      release_type:
+        description: 'Release Options'
+        required: true
+        default: 'Initial Release'
+        type: choice
+        options:
+          - Initial Release
+          - Redeploy
 
 
 jobs:
@@ -34,7 +42,8 @@ jobs:
             curl -sL https://api.github.com/repos/$GITHUB_REPOSITORY/releases/latest | jq -r ".tag_name"
           )
 
-          if [ "v$version" == "$previous_release_tag_version" ]; then
+          if [ "v$version" == "$previous_release_tag_version" ] && \
+          [ "${{ github.event.inputs.release_type }}" == "Initial Release" ]; then
             echo "[!] Already released v$version. Please bump version to continue"
             exit 1
           fi

src/_locales/en/messages.json

@@ -229,6 +229,18 @@
   "length": {
     "message": "Length"
   },
+  "uppercase": {
+    "message": "Uppercase (A-Z)"
+  },
+  "lowercase": {
+    "message": "Lowercase (a-z)"
+  },
+  "numbers": {
+    "message": "Numbers (0-9)"
+  },
+  "specialCharacters": {
+    "message": "Special Characters (!@#$%^&*)"
+  },
   "numWords": {
     "message": "Number of Words"
   },

src/_locales/et/messages.json

@@ -789,7 +789,7 @@
     "message": "Kui sinu sisselogimise andmetele on juurde lisatud autentimise võti, kopeeritakse TOTP kood automaatse täitmise kasutamisel lõikelauale."
   },
   "disableAutoBiometricsPrompt": {
-    "message": "Ära küsi käivitudes biomeetrilist kinnitamist."
+    "message": "Ära küsi käivitudes biomeetrilist kinnitamist"
   },
   "premiumRequired": {
     "message": "Vajalik on Premium versioon"

src/_locales/hr/messages.json

@@ -122,19 +122,19 @@
     "message": "Nastavi"
   },
   "sendVerificationCode": {
-    "message": "Send a verification code to your email"
+    "message": "Slanje verifikacijskog kôda e-poštom"
   },
   "sendCode": {
-    "message": "Send Code"
+    "message": "Pošalji kôd"
   },
   "codeSent": {
-    "message": "Code Sent"
+    "message": "Kôd poslan"
   },
   "verificationCode": {
     "message": "Kôd za provjeru"
   },
   "confirmIdentity": {
-    "message": "Confirm your identity to continue."
+    "message": "Potvrdite lozinku za nastavak."
   },
   "account": {
     "message": "Račun"
@@ -321,7 +321,7 @@
     "message": "Web preglednik ne podržava jednostavno kopiranje međuspremnika. Umjesto toga ručno kopirajte."
   },
   "verifyIdentity": {
-    "message": "Verify Identity"
+    "message": "Potvrdi identitet"
   },
   "yourVaultIsLocked": {
     "message": "Tvoj trezor je zaključan. Potvrdi glavnu lozinku za nastavak."
@@ -424,7 +424,7 @@
     "message": "Potvrdni kôd je obavezan."
   },
   "invalidVerificationCode": {
-    "message": "Invalid verification code"
+    "message": "Nevažeći kôd za provjeru"
   },
   "valueCopied": {
     "message": " kopirano",
@@ -573,7 +573,7 @@
     "message": "Treba li Bitwarden zapamtiti ovu lozinku?"
   },
   "notificationAddSave": {
-    "message": "Da, spremi sad"
+    "message": "Spremi"
   },
   "disableChangedPasswordNotification": {
     "message": "Onemogući upit za spremanje ažurirane lozinke"
@@ -585,7 +585,7 @@
     "message": "Želiš li ovu lozinku ažurirati u Bitwarden-u?"
   },
   "notificationChangeSave": {
-    "message": "Da, ažuriraj sada"
+    "message": "Ažuriraj"
   },
   "disableContextMenuItem": {
     "message": "Onemogući kontekstualni izbornik u pregledniku"
@@ -996,11 +996,11 @@
     "message": "Boolean"
   },
   "cfTypeLinked": {
-    "message": "Linked",
+    "message": "Povezano",
     "description": "This describes a field that is 'linked' (tied) to another field."
   },
   "linkedValue": {
-    "message": "Linked value",
+    "message": "Povezana vrijednost",
     "description": "This describes a value that is 'linked' (tied) to another value."
   },
   "popup2faCloseMessage": {
@@ -1106,7 +1106,7 @@
     "message": "Prezime"
   },
   "fullName": {
-    "message": "Full Name"
+    "message": "Ime i prezime"
   },
   "identityName": {
     "message": "Ime identiteta"
@@ -1832,7 +1832,7 @@
     "message": "Nije nađen jedinstveni identifikator."
   },
   "convertOrganizationEncryptionDesc": {
-    "message": "$ORGANIZATION$ is using SSO with a self-hosted key server. A master password is no longer required to log in for members of this organization.",
+    "message": "$ORGANIZATION$ koristi jedinstvenu prijavu SSO s vlastitim poslužiteljem. Članovima organizacije glavna lozinka više nije potrebna.",
     "placeholders": {
       "organization": {
         "content": "$1",
@@ -1841,18 +1841,18 @@
     }
   },
   "leaveOrganization": {
-    "message": "Leave Organization"
+    "message": "Napusti organizaciju"
   },
   "removeMasterPassword": {
-    "message": "Remove Master Password"
+    "message": "Ukloni glavnu lozinku"
   },
   "removedMasterPassword": {
-    "message": "Master password removed."
+    "message": "Glavna lozinka uklonjena."
   },
   "leaveOrganizationConfirmation": {
-    "message": "Are you sure you want to leave this organization?"
+    "message": "Sigurno želiš napustiti ovu organizaciju?"
   },
   "leftOrganization": {
-    "message": "You have left the organization."
+    "message": "Organizacija napuštena."
   }
 }

src/_locales/pl/messages.json

@@ -324,7 +324,7 @@
     "message": "Zweryfikuj tożsamość"
   },
   "yourVaultIsLocked": {
-    "message": "Twój sejf jest zablokowany. Wprowadź swoje hasło główne, aby kontynuować."
+    "message": "Sejf jest zablokowany. Zweryfikuj swoją tożsamość, aby kontynuować."
   },
   "unlock": {
     "message": "Odblokuj"

src/_locales/sr/messages.json

@@ -321,7 +321,7 @@
     "message": "Ваш прегледач не подржава једноставно копирање у привремену меморију. Уместо тога копирајте га ручно."
   },
   "verifyIdentity": {
-    "message": "Verify Identity"
+    "message": "Проверити идентитет"
   },
   "yourVaultIsLocked": {
     "message": "Сеф је закључан. Унесите главну лозинку за наставак."

src/_locales/zh_TW/messages.json

@@ -987,16 +987,16 @@
     "message": "透過拖曳來排序"
   },
   "cfTypeText": {
-    "message": "文字"
+    "message": "文字型"
   },
   "cfTypeHidden": {
-    "message": "隱藏"
+    "message": "隱藏型"
   },
   "cfTypeBoolean": {
     "message": "布林值"
   },
   "cfTypeLinked": {
-    "message": "已連結",
+    "message": "連結型",
     "description": "This describes a field that is 'linked' (tied) to another field."
   },
   "linkedValue": {

src/background/notification.background.ts

@@ -1,108 +1,142 @@
-import { CipherType } from 'jslib-common/enums/cipherType';
+import { CipherType } from "jslib-common/enums/cipherType";
 
-import { CipherView } from 'jslib-common/models/view/cipherView';
-import { LoginUriView } from 'jslib-common/models/view/loginUriView';
-import { LoginView } from 'jslib-common/models/view/loginView';
+import { CipherView } from "jslib-common/models/view/cipherView";
+import { LoginUriView } from "jslib-common/models/view/loginUriView";
+import { LoginView } from "jslib-common/models/view/loginView";
 
-import { CipherService } from 'jslib-common/abstractions/cipher.service';
-import { FolderService } from 'jslib-common/abstractions/folder.service';
-import { PolicyService } from 'jslib-common/abstractions/policy.service';
-import { StorageService } from 'jslib-common/abstractions/storage.service';
-import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
-import { AutofillService } from '../services/abstractions/autofill.service';
+import { CipherService } from "jslib-common/abstractions/cipher.service";
+import { FolderService } from "jslib-common/abstractions/folder.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { StorageService } from "jslib-common/abstractions/storage.service";
+import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
+import { AutofillService } from "../services/abstractions/autofill.service";
 
-import { BrowserApi } from '../browser/browserApi';
+import { BrowserApi } from "../browser/browserApi";
 
-import MainBackground from './main.background';
+import MainBackground from "./main.background";
 
-import { Utils } from 'jslib-common/misc/utils';
+import { Utils } from "jslib-common/misc/utils";
 
-import { PolicyType } from 'jslib-common/enums/policyType';
+import { PolicyType } from "jslib-common/enums/policyType";
 
-import { StateService } from '../services/abstractions/state.service';
-import AddChangePasswordQueueMessage from './models/addChangePasswordQueueMessage';
-import AddLoginQueueMessage from './models/addLoginQueueMessage';
-import AddLoginRuntimeMessage from './models/addLoginRuntimeMessage';
-import ChangePasswordRuntimeMessage from './models/changePasswordRuntimeMessage';
-import LockedVaultPendingNotificationsItem from './models/lockedVaultPendingNotificationsItem';
-import { NotificationQueueMessageType } from './models/notificationQueueMessageType';
+import { StateService } from "../services/abstractions/state.service";
+import AddChangePasswordQueueMessage from "./models/addChangePasswordQueueMessage";
+import AddLoginQueueMessage from "./models/addLoginQueueMessage";
+import AddLoginRuntimeMessage from "./models/addLoginRuntimeMessage";
+import ChangePasswordRuntimeMessage from "./models/changePasswordRuntimeMessage";
+import LockedVaultPendingNotificationsItem from "./models/lockedVaultPendingNotificationsItem";
+import { NotificationQueueMessageType } from "./models/notificationQueueMessageType";
 
 export default class NotificationBackground {
+    private notificationQueue: (
+        | AddLoginQueueMessage
+        | AddChangePasswordQueueMessage
+    )[] = [];
 
-    private notificationQueue: (AddLoginQueueMessage | AddChangePasswordQueueMessage)[] = [];
-
-    constructor(private main: MainBackground, private autofillService: AutofillService,
-        private cipherService: CipherService, private storageService: StorageService,
-        private vaultTimeoutService: VaultTimeoutService, private policyService: PolicyService,
-        private folderService: FolderService, private stateService: StateService) {
-    }
+    constructor(
+        private main: MainBackground,
+        private autofillService: AutofillService,
+        private cipherService: CipherService,
+        private storageService: StorageService,
+        private vaultTimeoutService: VaultTimeoutService,
+        private policyService: PolicyService,
+        private folderService: FolderService,
+        private stateService: StateService
+    ) {}
 
     async init() {
         if (chrome.runtime == null) {
             return;
         }
 
-        BrowserApi.messageListener('notification.background', async (msg: any, sender: chrome.runtime.MessageSender) => {
-            await this.processMessage(msg, sender);
-        });
+        BrowserApi.messageListener(
+            "notification.background",
+            async (msg: any, sender: chrome.runtime.MessageSender) => {
+                await this.processMessage(msg, sender);
+            }
+        );
 
         this.cleanupNotificationQueue();
     }
 
     async processMessage(msg: any, sender: chrome.runtime.MessageSender) {
         switch (msg.command) {
-            case 'unlockCompleted':
-                if (msg.data.target !== 'notification.background') {
+            case "unlockCompleted":
+                if (msg.data.target !== "notification.background") {
                     return;
                 }
-                await this.processMessage(msg.data.commandToRetry.msg, msg.data.commandToRetry.sender);
+                await this.processMessage(
+                    msg.data.commandToRetry.msg,
+                    msg.data.commandToRetry.sender
+                );
                 break;
-            case 'bgGetDataForTab':
+            case "bgGetDataForTab":
                 await this.getDataForTab(sender.tab, msg.responseCommand);
                 break;
-            case 'bgCloseNotificationBar':
-                await BrowserApi.tabSendMessageData(sender.tab, 'closeNotificationBar');
+            case "bgCloseNotificationBar":
+                await BrowserApi.tabSendMessageData(
+                    sender.tab,
+                    "closeNotificationBar"
+                );
                 break;
-            case 'bgAdjustNotificationBar':
-                await BrowserApi.tabSendMessageData(sender.tab, 'adjustNotificationBar', msg.data);
+            case "bgAdjustNotificationBar":
+                await BrowserApi.tabSendMessageData(
+                    sender.tab,
+                    "adjustNotificationBar",
+                    msg.data
+                );
                 break;
-            case 'bgAddLogin':
+            case "bgAddLogin":
                 await this.addLogin(msg.login, sender.tab);
                 break;
-            case 'bgChangedPassword':
+            case "bgChangedPassword":
                 await this.changedPassword(msg.data, sender.tab);
                 break;
-            case 'bgAddClose':
-            case 'bgChangeClose':
+            case "bgAddClose":
+            case "bgChangeClose":
                 this.removeTabFromNotificationQueue(sender.tab);
                 break;
-            case 'bgAddSave':
-            case 'bgChangeSave':
+            case "bgAddSave":
+            case "bgChangeSave":
                 if (await this.vaultTimeoutService.isLocked()) {
                     const retryMessage: LockedVaultPendingNotificationsItem = {
                         commandToRetry: {
                             msg: msg,
                             sender: sender,
                         },
-                        target: 'notification.background',
+                        target: "notification.background",
                     };
-                    await BrowserApi.tabSendMessageData(sender.tab, 'addToLockedVaultPendingNotifications', retryMessage);
-                    await BrowserApi.tabSendMessageData(sender.tab, 'promptForLogin');
+                    await BrowserApi.tabSendMessageData(
+                        sender.tab,
+                        "addToLockedVaultPendingNotifications",
+                        retryMessage
+                    );
+                    await BrowserApi.tabSendMessageData(
+                        sender.tab,
+                        "promptForLogin"
+                    );
                     return;
                 }
                 await this.saveOrUpdateCredentials(sender.tab, msg.folder);
                 break;
-            case 'bgNeverSave':
+            case "bgNeverSave":
                 await this.saveNever(sender.tab);
                 break;
-            case 'collectPageDetailsResponse':
+            case "collectPageDetailsResponse":
                 switch (msg.sender) {
-                    case 'notificationBar':
-                        const forms = this.autofillService.getFormsWithPasswordFields(msg.details);
-                        await BrowserApi.tabSendMessageData(msg.tab, 'notificationBarPageDetails', {
-                            details: msg.details,
-                            forms: forms,
-                        });
+                    case "notificationBar":
+                        const forms =
+                            this.autofillService.getFormsWithPasswordFields(
+                                msg.details
+                            );
+                        await BrowserApi.tabSendMessageData(
+                            msg.tab,
+                            "notificationBarPageDetails",
+                            {
+                                details: msg.details,
+                                forms: forms,
+                            }
+                        );
                         break;
                     default:
                         break;
@@ -149,20 +183,29 @@ export default class NotificationBackground {
         }
 
         for (let i = 0; i < this.notificationQueue.length; i++) {
-            if (this.notificationQueue[i].tabId !== tab.id || this.notificationQueue[i].domain !== tabDomain) {
+            if (
+                this.notificationQueue[i].tabId !== tab.id ||
+                this.notificationQueue[i].domain !== tabDomain
+            ) {
                 continue;
             }
 
-            if (this.notificationQueue[i].type === NotificationQueueMessageType.addLogin) {
-                BrowserApi.tabSendMessageData(tab, 'openNotificationBar', {
-                    type: 'add',
+            if (
+                this.notificationQueue[i].type ===
+                NotificationQueueMessageType.addLogin
+            ) {
+                BrowserApi.tabSendMessageData(tab, "openNotificationBar", {
+                    type: "add",
                     typeData: {
                         isVaultLocked: this.notificationQueue[i].wasVaultLocked,
                     },
                 });
-            } else if (this.notificationQueue[i].type === NotificationQueueMessageType.changePassword) {
-                BrowserApi.tabSendMessageData(tab, 'openNotificationBar', {
-                    type: 'change',
+            } else if (
+                this.notificationQueue[i].type ===
+                NotificationQueueMessageType.changePassword
+            ) {
+                BrowserApi.tabSendMessageData(tab, "openNotificationBar", {
+                    type: "change",
                     typeData: {
                         isVaultLocked: this.notificationQueue[i].wasVaultLocked,
                     },
@@ -180,8 +223,11 @@ export default class NotificationBackground {
         }
     }
 
-    private async addLogin(loginInfo: AddLoginRuntimeMessage, tab: chrome.tabs.Tab) {
-        if (!await this.stateService.getIsAuthenticated()) {
+    private async addLogin(
+        loginInfo: AddLoginRuntimeMessage,
+        tab: chrome.tabs.Tab
+    ) {
+        if (!(await this.stateService.getIsAuthenticated())) {
             return;
         }
 
@@ -196,7 +242,7 @@ export default class NotificationBackground {
         }
 
         if (await this.vaultTimeoutService.isLocked()) {
-            if (!await this.allowPersonalOwnership()) {
+            if (!(await this.allowPersonalOwnership())) {
                 return;
             }
 
@@ -204,31 +250,50 @@ export default class NotificationBackground {
             return;
         }
 
-        const ciphers = await this.cipherService.getAllDecryptedForUrl(loginInfo.url);
-        const usernameMatches = ciphers.filter(c =>
-            c.login.username != null && c.login.username.toLowerCase() === normalizedUsername);
+        const ciphers = await this.cipherService.getAllDecryptedForUrl(
+            loginInfo.url
+        );
+        const usernameMatches = ciphers.filter(
+            (c) =>
+                c.login.username != null &&
+                c.login.username.toLowerCase() === normalizedUsername
+        );
         if (usernameMatches.length === 0) {
-            const disabledAddLogin = await this.stateService.getDisableAddLoginNotification();
+            const disabledAddLogin =
+                await this.stateService.getDisableAddLoginNotification();
             if (disabledAddLogin) {
                 return;
             }
 
-            if (!await this.allowPersonalOwnership()) {
+            if (!(await this.allowPersonalOwnership())) {
                 return;
             }
 
             this.pushAddLoginToQueue(loginDomain, loginInfo, tab);
-
-        } else if (usernameMatches.length === 1 && usernameMatches[0].login.password !== loginInfo.password) {
-            const disabledChangePassword = await this.stateService.getDisableChangedPasswordNotification();
+        } else if (
+            usernameMatches.length === 1 &&
+            usernameMatches[0].login.password !== loginInfo.password
+        ) {
+            const disabledChangePassword =
+                await this.stateService.getDisableChangedPasswordNotification();
             if (disabledChangePassword) {
                 return;
             }
-            this.pushChangePasswordToQueue(usernameMatches[0].id, loginDomain, loginInfo.password, tab);
+            this.pushChangePasswordToQueue(
+                usernameMatches[0].id,
+                loginDomain,
+                loginInfo.password,
+                tab
+            );
         }
     }
 
-    private async pushAddLoginToQueue(loginDomain: string, loginInfo: AddLoginRuntimeMessage, tab: chrome.tabs.Tab, isVaultLocked: boolean = false) {
+    private async pushAddLoginToQueue(
+        loginDomain: string,
+        loginInfo: AddLoginRuntimeMessage,
+        tab: chrome.tabs.Tab,
+        isVaultLocked: boolean = false
+    ) {
         // remove any old messages for this tab
         this.removeTabFromNotificationQueue(tab);
         const message: AddLoginQueueMessage = {
@@ -238,28 +303,41 @@ export default class NotificationBackground {
             domain: loginDomain,
             uri: loginInfo.url,
             tabId: tab.id,
-            expires: new Date((new Date()).getTime() + 5 * 60000), // 5 minutes
+            expires: new Date(new Date().getTime() + 5 * 60000), // 5 minutes
             wasVaultLocked: isVaultLocked,
         };
         this.notificationQueue.push(message);
         await this.checkNotificationQueue(tab);
     }
 
-    private async changedPassword(changeData: ChangePasswordRuntimeMessage, tab: chrome.tabs.Tab) {
+    private async changedPassword(
+        changeData: ChangePasswordRuntimeMessage,
+        tab: chrome.tabs.Tab
+    ) {
         const loginDomain = Utils.getDomain(changeData.url);
         if (loginDomain == null) {
             return;
         }
 
         if (await this.vaultTimeoutService.isLocked()) {
-            this.pushChangePasswordToQueue(null, loginDomain, changeData.newPassword, tab, true);
+            this.pushChangePasswordToQueue(
+                null,
+                loginDomain,
+                changeData.newPassword,
+                tab,
+                true
+            );
             return;
         }
 
         let id: string = null;
-        const ciphers = await this.cipherService.getAllDecryptedForUrl(changeData.url);
+        const ciphers = await this.cipherService.getAllDecryptedForUrl(
+            changeData.url
+        );
         if (changeData.currentPassword != null) {
-            const passwordMatches = ciphers.filter(c => c.login.password === changeData.currentPassword);
+            const passwordMatches = ciphers.filter(
+                (c) => c.login.password === changeData.currentPassword
+            );
             if (passwordMatches.length === 1) {
                 id = passwordMatches[0].id;
             }
@@ -267,11 +345,22 @@ export default class NotificationBackground {
             id = ciphers[0].id;
         }
         if (id != null) {
-            this.pushChangePasswordToQueue(id, loginDomain, changeData.newPassword, tab);
+            this.pushChangePasswordToQueue(
+                id,
+                loginDomain,
+                changeData.newPassword,
+                tab
+            );
         }
     }
 
-    private async pushChangePasswordToQueue(cipherId: string, loginDomain: string, newPassword: string, tab: chrome.tabs.Tab, isVaultLocked: boolean = false) {
+    private async pushChangePasswordToQueue(
+        cipherId: string,
+        loginDomain: string,
+        newPassword: string,
+        tab: chrome.tabs.Tab,
+        isVaultLocked: boolean = false
+    ) {
         // remove any old messages for this tab
         this.removeTabFromNotificationQueue(tab);
         const message: AddChangePasswordQueueMessage = {
@@ -280,18 +369,25 @@ export default class NotificationBackground {
             newPassword: newPassword,
             domain: loginDomain,
             tabId: tab.id,
-            expires: new Date((new Date()).getTime() + 5 * 60000), // 5 minutes
+            expires: new Date(new Date().getTime() + 5 * 60000), // 5 minutes
             wasVaultLocked: isVaultLocked,
         };
         this.notificationQueue.push(message);
         await this.checkNotificationQueue(tab);
     }
 
-    private async saveOrUpdateCredentials(tab: chrome.tabs.Tab, folderId?: string) {
+    private async saveOrUpdateCredentials(
+        tab: chrome.tabs.Tab,
+        folderId?: string
+    ) {
         for (let i = this.notificationQueue.length - 1; i >= 0; i--) {
             const queueMessage = this.notificationQueue[i];
-            if (queueMessage.tabId !== tab.id ||
-                (queueMessage.type !== NotificationQueueMessageType.addLogin && queueMessage.type !== NotificationQueueMessageType.changePassword)) {
+            if (
+                queueMessage.tabId !== tab.id ||
+                (queueMessage.type !== NotificationQueueMessageType.addLogin &&
+                    queueMessage.type !==
+                        NotificationQueueMessageType.changePassword)
+            ) {
                 continue;
             }
 
@@ -301,11 +397,16 @@ export default class NotificationBackground {
             }
 
             this.notificationQueue.splice(i, 1);
-            BrowserApi.tabSendMessageData(tab, 'closeNotificationBar');
+            BrowserApi.tabSendMessageData(tab, "closeNotificationBar");
 
-            if (queueMessage.type === NotificationQueueMessageType.changePassword) {
-                const message = (queueMessage as AddChangePasswordQueueMessage);
-                const cipher = await this.getDecryptedCipherById(message.cipherId);
+            if (
+                queueMessage.type ===
+                NotificationQueueMessageType.changePassword
+            ) {
+                const message = queueMessage as AddChangePasswordQueueMessage;
+                const cipher = await this.getDecryptedCipherById(
+                    message.cipherId
+                );
                 if (cipher == null) {
                     return;
                 }
@@ -314,18 +415,32 @@ export default class NotificationBackground {
             }
 
             if (!queueMessage.wasVaultLocked) {
-                await this.createNewCipher(queueMessage as AddLoginQueueMessage, folderId);
+                await this.createNewCipher(
+                    queueMessage as AddLoginQueueMessage,
+                    folderId
+                );
             }
 
             // If the vault was locked, check if a cipher needs updating instead of creating a new one
-            if (queueMessage.type === NotificationQueueMessageType.addLogin && queueMessage.wasVaultLocked === true) {
-                const message = (queueMessage as AddLoginQueueMessage);
-                const ciphers = await this.cipherService.getAllDecryptedForUrl(message.uri);
-                const usernameMatches = ciphers.filter(c => c.login.username != null &&
-                    c.login.username.toLowerCase() === message.username);
+            if (
+                queueMessage.type === NotificationQueueMessageType.addLogin &&
+                queueMessage.wasVaultLocked === true
+            ) {
+                const message = queueMessage as AddLoginQueueMessage;
+                const ciphers = await this.cipherService.getAllDecryptedForUrl(
+                    message.uri
+                );
+                const usernameMatches = ciphers.filter(
+                    (c) =>
+                        c.login.username != null &&
+                        c.login.username.toLowerCase() === message.username
+                );
 
                 if (usernameMatches.length >= 1) {
-                    await this.updateCipher(usernameMatches[0], message.password);
+                    await this.updateCipher(
+                        usernameMatches[0],
+                        message.password
+                    );
                     return;
                 }
 
@@ -334,7 +449,10 @@ export default class NotificationBackground {
         }
     }
 
-    private async createNewCipher(queueMessage: AddLoginQueueMessage, folderId: string) {
+    private async createNewCipher(
+        queueMessage: AddLoginQueueMessage,
+        folderId: string
+    ) {
         const loginModel = new LoginView();
         const loginUri = new LoginUriView();
         loginUri.uri = queueMessage.uri;
@@ -343,13 +461,13 @@ export default class NotificationBackground {
         loginModel.password = queueMessage.password;
         const model = new CipherView();
         model.name = Utils.getHostname(queueMessage.uri) || queueMessage.domain;
-        model.name = model.name.replace(/^www\./, '');
+        model.name = model.name.replace(/^www\./, "");
         model.type = CipherType.Login;
         model.login = loginModel;
 
         if (!Utils.isNullOrWhitespace(folderId)) {
             const folders = await this.folderService.getAllDecrypted();
-            if (folders.some(x => x.id === folderId)) {
+            if (folders.some((x) => x.id === folderId)) {
                 model.folderId = folderId;
             }
         }
@@ -377,7 +495,10 @@ export default class NotificationBackground {
     private async saveNever(tab: chrome.tabs.Tab) {
         for (let i = this.notificationQueue.length - 1; i >= 0; i--) {
             const queueMessage = this.notificationQueue[i];
-            if (queueMessage.tabId !== tab.id || queueMessage.type !== NotificationQueueMessageType.addLogin) {
+            if (
+                queueMessage.tabId !== tab.id ||
+                queueMessage.type !== NotificationQueueMessageType.addLogin
+            ) {
                 continue;
             }
 
@@ -387,7 +508,7 @@ export default class NotificationBackground {
             }
 
             this.notificationQueue.splice(i, 1);
-            BrowserApi.tabSendMessageData(tab, 'closeNotificationBar');
+            BrowserApi.tabSendMessageData(tab, "closeNotificationBar");
 
             const hostname = Utils.getHostname(tab.url);
             await this.cipherService.saveNeverDomain(hostname);
@@ -396,7 +517,7 @@ export default class NotificationBackground {
 
     private async getDataForTab(tab: chrome.tabs.Tab, responseCommand: string) {
         const responseData: any = {};
-        if (responseCommand === 'notificationBarGetFoldersList') {
+        if (responseCommand === "notificationBarGetFoldersList") {
             responseData.folders = await this.folderService.getAllDecrypted();
         }
 
@@ -404,6 +525,8 @@ export default class NotificationBackground {
     }
 
     private async allowPersonalOwnership(): Promise<boolean> {
-        return !await this.policyService.policyAppliesToUser(PolicyType.PersonalOwnership);
+        return !(await this.policyService.policyAppliesToUser(
+            PolicyType.PersonalOwnership
+        ));
     }
 }

src/popup/accounts/environment.component.html

@@ -3,9 +3,9 @@
         <div class="left">
             <a routerLink="/home">{{'close' | i18n}}</a>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{'appName' | i18n}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick [disabled]="form.loading">
                 <span [hidden]="form.loading">{{'save' | i18n}}</span>
@@ -15,9 +15,9 @@
     </header>
     <content>
         <div class="box">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'selfHostedEnvironment' | i18n}}
-            </div>
+            </h2>
             <div class="box-content">
                 <div class="box-content-row" appBoxRow>
                     <label for="baseUrl">{{'baseUrl' | i18n}}</label>
@@ -30,9 +30,9 @@
             </div>
         </div>
         <div class="box">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'customEnvironment' | i18n}}
-            </div>
+            </h2>
             <div class="box-content" [hidden]="!showCustom">
                 <div class="box-content-row" appBoxRow>
                     <label for="webVaultUrl">{{'webVaultUrl' | i18n}}</label>

src/popup/accounts/hint.component.html

@@ -3,9 +3,9 @@
         <div class="left">
             <a routerLink="/login">{{'cancel' | i18n}}</a>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{'passwordHint' | i18n}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick [disabled]="form.loading">
                 <span [hidden]="form.loading">{{'submit' | i18n}}</span>

src/popup/accounts/lock.component.html

@@ -1,9 +1,9 @@
 <form (ngSubmit)="submit()">
     <header>
         <div class="left"></div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{'verifyIdentity' | i18n}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick *ngIf="!hideInput">{{'unlock' | i18n}}</button>
         </div>
@@ -24,7 +24,7 @@
                     </div>
                     <div class="action-buttons">
                         <button type="button" class="row-btn" appStopClick appBlurClick
-                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()" [attr.aria-pressed]="showPassword">
                             <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"
                                 aria-hidden="true"></i>
                         </button>

src/popup/accounts/login.component.html

@@ -3,9 +3,9 @@
         <div class="left">
             <a routerLink="/home">{{'cancel' | i18n}}</a>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{'appName' | i18n}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick [disabled]="form.loading">
                 <span [hidden]="form.loading">{{'login' | i18n}}</span>
@@ -29,7 +29,7 @@
                     </div>
                     <div class="action-buttons">
                         <button type="button" class="row-btn" appStopClick appBlurClick
-                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()" [attr.aria-pressed]="showPassword">
                             <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"
                                 aria-hidden="true"></i>
                         </button>

src/popup/accounts/register.component.html

@@ -3,9 +3,9 @@
         <div class="left">
             <a routerLink="/home">{{'cancel' | i18n}}</a>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{'createAccount' | i18n}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick [disabled]="form.loading">
                 <span [hidden]="form.loading">{{'submit' | i18n}}</span>
@@ -37,7 +37,7 @@
                         </div>
                         <div class="action-buttons">
                             <button type="button" class="row-btn" appStopClick appBlurClick
-                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)" [attr.aria-pressed]="showPassword">
                                 <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </button>
@@ -65,7 +65,7 @@
                     </div>
                     <div class="action-buttons">
                         <button type="button" class="row-btn" appStopClick appBlurClick
-                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
+                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)" [attr.aria-pressed]="showPassword">
                             <i class="fa fa-lg" aria-hidden="true"
                                 [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </button>

src/popup/accounts/set-password.component.html

@@ -3,9 +3,9 @@
         <div class="left">
             <a routerLink="/home">{{'cancel' | i18n}}</a>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{'setMasterPassword' | i18n}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick [disabled]="form.loading">
                 <span [hidden]="form.loading">{{'submit' | i18n}}</span>
@@ -44,7 +44,7 @@
                             </div>
                             <div class="action-buttons">
                                 <button type="button" class="row-btn" appStopClick appBlurClick role="button"
-                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)" [attr.aria-pressed]="showPassword">
                                     <i class="fa fa-lg" aria-hidden="true"
                                         [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                                 </button>
@@ -75,7 +75,7 @@
                             </div>
                             <div class="action-buttons">
                                 <button type="button" class="row-btn" appStopClick appBlurClick role="button"
-                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)" [attr.aria-pressed]="showPassword">
                                     <i class="fa fa-lg" aria-hidden="true"
                                         [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                                 </button>

src/popup/accounts/two-factor-options.component.html

@@ -2,9 +2,9 @@
     <div class="left">
         <a routerLink="/2fa">{{'close' | i18n}}</a>
     </div>
-    <div class="center">
+    <h1 class="center">
         <span class="title">{{'twoStepOptions' | i18n}}</span>
-    </div>
+    </h1>
     <div class="right"></div>
 </header>
 <content>

src/popup/accounts/two-factor.component.html

@@ -3,9 +3,9 @@
         <div class="left">
             <a routerLink="/login">{{'back' | i18n}}</a>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{title}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick [disabled]="form.loading" *ngIf="selectedProviderType != null && selectedProviderType !== providerType.Duo &&
                         selectedProviderType !== providerType.OrganizationDuo &&

src/popup/accounts/update-temp-password.component.html

@@ -3,9 +3,9 @@
         <div class="left">
             <a (click)="logOut()">{{'logOut' | i18n}}</a>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{'updateMasterPassword' | i18n}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick [disabled]="form.loading">
                 <span [hidden]="form.loading">{{'submit' | i18n}}</span>
@@ -37,7 +37,7 @@
                         </div>
                         <div class="action-buttons">
                             <button type="button" class="row-btn" appStopClick appBlurClick
-                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)" [attr.aria-pressed]="showPassword">
                                 <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </button>
@@ -63,7 +63,7 @@
                     </div>
                     <div class="action-buttons">
                         <button type="button" class="row-btn" appStopClick appBlurClick
-                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
+                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)" [attr.aria-pressed]="showPassword">
                             <i class="fa fa-lg" aria-hidden="true"
                                 [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </button>

src/popup/components/password-reprompt.component.html

@@ -3,7 +3,7 @@
         <form class="modal-content" #form (ngSubmit)="submit()">
             <div class="modal-body">
                 <div class="box">
-                    <div class="box-header">{{'passwordConfirmation' | i18n}}</div>
+                    <h1 class="box-header">{{'passwordConfirmation' | i18n}}</h1>
                     <div class="box-content">
                         <div class="box-content-row box-content-row-flex" appBoxRow>
                             <div class="row-main">
@@ -13,7 +13,7 @@
                             </div>
                             <div class="action-buttons">
                                 <button type="button" class="row-btn" appStopClick appBlurClick role="button"
-                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()" [attr.aria-pressed]="showPassword">
                                     <i class="fa fa-lg" aria-hidden="true"
                                         [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                                 </button>

src/popup/components/set-pin.component.html

@@ -15,7 +15,7 @@
                             </div>
                             <div class="action-buttons">
                                 <button type="button" class="row-btn" appStopClick appBlurClick appA11yTitle="{{'toggleVisibility' | i18n}}"
-                                    (click)="toggleVisibility()">
+                                    (click)="toggleVisibility()" [attr.aria-pressed]="showPin">
                                     <i class="fa fa-lg" aria-hidden="true"
                                         [ngClass]="{'fa-eye': !showPin, 'fa-eye-slash': showPin}"></i>
                                 </button>

src/popup/generator/password-generator-history.component.html

@@ -5,9 +5,9 @@
             <span>{{'back' | i18n}}</span>
         </button>
     </div>
-    <div class="center">
+    <h1 class="center">
         <span class="title">{{'passwordHistory' | i18n}}</span>
-    </div>
+    </h1>
     <div class="right">
         <button type="button" appBlurClick type="button" (click)="clear()">
             {{'clear' | i18n}}

src/popup/generator/password-generator.component.html

@@ -3,9 +3,9 @@
         <app-pop-out [show]="!showSelect"></app-pop-out>
         <button type="button" appBlurClick (click)="close()" *ngIf="showSelect">{{'cancel' | i18n}}</button>
     </div>
-    <div class="center">
+    <h1 class="center">
         <span class="title">{{'passGen' | i18n}}</span>
-    </div>
+    </h1>
     <div class="right">
         <button type="button" appBlurClick (click)="select()" *ngIf="showSelect">{{'select' | i18n}}</button>
     </div>
@@ -34,9 +34,9 @@
         </div>
     </div>
     <div class="box">
-        <div class="box-header">
+        <h2 class="box-header">
             {{'options' | i18n}}
-        </div>
+        </h2>
         <div class="box-content">
             <div class="box-content-row">
                 <label class="sr-only radio-header">{{'type' | i18n}}</label>
@@ -86,22 +86,22 @@
                 </div>
                 <div class="box-content-row box-content-row-checkbox" appBoxRow>
                     <label for="uppercase">A-Z</label>
-                    <input id="uppercase" type="checkbox" (change)="saveOptions()"
+                    <input id="uppercase" type="checkbox" (change)="saveOptions()" attr.aria-label="{{'uppercase' | i18n}}"
                         [disabled]="enforcedPolicyOptions.useUppercase" [(ngModel)]="options.uppercase">
                 </div>
                 <div class="box-content-row box-content-row-checkbox" appBoxRow>
                     <label for="lowercase">a-z</label>
-                    <input id="lowercase" type="checkbox" (change)="saveOptions()"
+                    <input id="lowercase" type="checkbox" (change)="saveOptions()" attr.aria-label="{{'lowercase' | i18n}}"
                         [disabled]="enforcedPolicyOptions.useLowercase" [(ngModel)]="options.lowercase">
                 </div>
                 <div class="box-content-row box-content-row-checkbox" appBoxRow>
                     <label for="numbers">0-9</label>
-                    <input id="numbers" type="checkbox" (change)="saveOptions()"
+                    <input id="numbers" type="checkbox" (change)="saveOptions()" attr.aria-label="{{'numbers' | i18n}}"
                         [disabled]="enforcedPolicyOptions.useNumbers" [(ngModel)]="options.number">
                 </div>
                 <div class="box-content-row box-content-row-checkbox" appBoxRow>
                     <label for="special">!@#$%^&*</label>
-                    <input id="special" type="checkbox" (change)="saveOptions()"
+                    <input id="special" type="checkbox" (change)="saveOptions()" attr.aria-label="{{'specialCharacters' | i18n}}"
                         [disabled]="enforcedPolicyOptions.useSpecial" [(ngModel)]="options.special">
                 </div>
             </div>

src/popup/scss/base.scss

@@ -43,10 +43,8 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
     font-family: $font-family-sans-serif;
-    
-    @include themify($themes) {
-        color: themed('textColor');
-    }
+    font-size: $font-size-base;
+    font-weight: normal;
 }
 
 p {

src/popup/scss/box.scss

@@ -20,9 +20,12 @@
     }
 
     .box-header-expandable {
-        margin: 0 10px 5px 10px;
+        padding: 0 10px;
+        margin-bottom: 5px;
         text-transform: uppercase;
         display: flex;
+        width: 100%;
+        box-sizing: border-box;
 
         @include themify($themes) {
             color: themed('headingColor');

src/popup/send/send-add-edit.component.html

@@ -3,9 +3,9 @@
         <div class="left">
             <button type="button" appBlurClick (click)="cancel()">{{'cancel' | i18n}}</button>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{title}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick [disabled]="form.loading || disableSend">
                 <span [hidden]="form.loading">{{'save' | i18n}}</span>
@@ -96,9 +96,9 @@
         </div>
         <!-- Share -->
         <div class="box">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'share' | i18n}}
-            </div>
+            </h2>
             <div class="box-content">
                 <!-- Copy Link on Save -->
                 <div class="box-content-row box-content-row-checkbox" appBoxRow>
@@ -110,11 +110,13 @@
         </div>
         <!-- Options -->
         <div class="box">
-            <div class="box-header-expandable" (click)="showOptions = !showOptions">
-                {{'options' | i18n}}
-                <i *ngIf="!showOptions" class="fa fa-chevron-down fa-sm icon"></i>
-                <i *ngIf="showOptions" class="fa fa-chevron-up fa-sm icon"></i>
-            </div>
+            <h2>
+                <button type="button" class="box-header-expandable" (click)="showOptions = !showOptions" [attr.aria-expanded]="showOptions">
+                    {{'options' | i18n}}
+                    <i *ngIf="!showOptions" class="fa fa-chevron-down fa-sm icon" aria-hidden="true"></i>
+                    <i *ngIf="showOptions" class="fa fa-chevron-up fa-sm icon" aria-hidden="true"></i>
+                </button>
+            </h2>
         </div>
         <div [hidden]="!showOptions">
             <app-send-efflux-dates
@@ -156,7 +158,7 @@
                         </div>
                         <div class="action-buttons" *ngIf="!disableSend">
                             <button type="button" class="row-btn" appStopClick appBlurClick
-                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePasswordVisible()">
+                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePasswordVisible()" [attr.aria-pressed]="showPassword">
                                 <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"
                                     aria-hidden="true"></i>
                             </button>

src/popup/send/send-groupings.component.html

@@ -2,6 +2,7 @@
     <div class="left" *ngIf="showLeftHeader">
         <app-pop-out></app-pop-out>
     </div>
+    <h1 class="sr-only">{{'send' | i18n}}</h1>
     <div class="search">
         <input type="search" placeholder="{{'searchSends' | i18n}}" id="search" [(ngModel)]="searchText"
             (input)="search(200)" autocomplete="off" appAutofocus>
@@ -28,9 +29,9 @@
     </div>
     <ng-container *ngIf="sends && sends.length && !showSearching()">
         <div class="box list">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'types' | i18n}}
-            </div>
+            </h2>
             <div class="box-content single-line">
                 <button type="button" class="box-content-row" appStopClick appBlurClick (click)="selectType(sendType.Text)">
                     <div class="row-main">
@@ -51,10 +52,10 @@
             </div>
         </div>
         <div class="box list">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'allSends' | i18n}}
                 <div class="flex-right">{{sends.length}}</div>
-            </div>
+            </h2>
             <div class="box-content">
                 <app-send-list [sends]="sends" title="{{'editItem' | i18n}}" [disabledByPolicy]="disableSend"
                     (onSelected)="selectSend($event)" (onCopySendLink)="copy($event)"

src/popup/send/send-type.component.html

@@ -5,6 +5,7 @@
             <span>{{'back' | i18n}}</span>
         </button>
     </div>
+    <h1 class="sr-only">{{'send' | i18n}}</h1>
     <div class="search">
         <input type="search" placeholder="{{'searchType' | i18n}}" id="search" [(ngModel)]="searchText"
             (input)="search(200)" autocomplete="off" appAutofocus>
@@ -30,10 +31,10 @@
         </ng-container>
     </div>
     <div class="box list only-list" *ngIf="filteredSends.length">
-        <div class="box-header">
+        <h2 class="box-header">
             {{groupingTitle}}
             <span class="flex-right">{{filteredSends.length}}</span>
-        </div>
+        </h2>
         <div class="box-content">
             <app-send-list [sends]="filteredSends" title="{{'editItem' | i18n}}" [disabledByPolicy]="disableSend"
                 (onSelected)="selectSend($event)" (onCopySendLink)="copy($event)"

src/popup/settings/excluded-domains.component.html

@@ -3,9 +3,9 @@
         <div class="left">
             <a routerLink="/tabs/settings">{{'cancel' | i18n}}</a>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{'excludedDomains' | i18n}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick>{{'save' | i18n}}</button>
         </div>

src/popup/settings/export.component.html

@@ -6,9 +6,9 @@
                 <span>{{'back' | i18n}}</span>
             </a>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{'exportVault' | i18n}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button appBlurClick type="submit" [disabled]="!exportForm.enabled">{{'submit' | i18n}}</button>
         </div>

src/popup/settings/folder-add-edit.component.html

@@ -3,9 +3,9 @@
         <div class="left">
             <a routerLink="/folders">{{'cancel' | i18n}}</a>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{title}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick [disabled]="form.loading">
                 <span [hidden]="form.loading">{{'save' | i18n}}</span>

src/popup/settings/folders.component.html

@@ -5,9 +5,9 @@
             <span>{{'back' | i18n}}</span>
         </a>
     </div>
-    <div class="center">
+    <h1 class="center">
         <span class="title">{{'folders' | i18n}}</span>
-    </div>
+    </h1>
     <div class="right">
         <button type="button" appBlurClick (click)="addFolder()" appA11yTitle="{{'addFolder' | i18n}}">
             <i class="fa fa-plus fa-lg fa-fw" aria-hidden="true"></i>

src/popup/settings/options.component.html

@@ -5,18 +5,20 @@
             <span>{{'back' | i18n}}</span>
         </a>
     </div>
-    <div class="center">
+    <h1 class="center">
         <span class="title">{{'options' | i18n}}</span>
-    </div>
+    </h1>
     <div class="right"></div>
 </header>
 <content>
     <div class="box">
-        <div class="box-header-expandable" (click)="showGeneral = !showGeneral">
-            General
-            <i *ngIf="!showGeneral" class="fa fa-chevron-down fa-sm icon"></i>
-            <i *ngIf="showGeneral" class="fa fa-chevron-up fa-sm icon"></i>
-        </div>
+        <h2>
+            <button type="button" class="box-header-expandable" (click)="showGeneral = !showGeneral" [attr.aria-expanded]="showGeneral">
+                General
+                <i *ngIf="!showGeneral" class="fa fa-chevron-down fa-sm icon" aria-hidden="true"></i>
+                <i *ngIf="showGeneral" class="fa fa-chevron-up fa-sm icon" aria-hidden="true"></i>
+            </button>
+        </h2>
     </div>
     <ng-container *ngIf="showGeneral">
         <div class="box">
@@ -84,11 +86,13 @@
         </div>
     </ng-container>
     <div class="box box-section-divider">
-        <div class="box-header-expandable" (click)="showDisplay = !showDisplay">
-            Display
-            <i *ngIf="!showDisplay" class="fa fa-chevron-down fa-sm icon"></i>
-            <i *ngIf="showDisplay" class="fa fa-chevron-up fa-sm icon"></i>
-        </div>
+        <h2>
+            <button type="button" class="box-header-expandable" (click)="showDisplay = !showDisplay" [attr.aria-expanded]="showDisplay">
+                Display
+                <i *ngIf="!showDisplay" class="fa fa-chevron-down fa-sm icon" aria-hidden="true"></i>
+                <i *ngIf="showDisplay" class="fa fa-chevron-up fa-sm icon" aria-hidden="true"></i>
+            </button>
+        </h2>
     </div>
     <ng-container *ngIf="showDisplay">
         <div class="box">
@@ -141,11 +145,13 @@
         </div>
     </ng-container>
     <div class="box box-section-divider">
-        <div class="box-header-expandable" (click)="showAutofill = !showAutofill">
-            Autofill
-            <i *ngIf="!showAutofill" class="fa fa-chevron-down fa-sm icon"></i>
-            <i *ngIf="showAutofill" class="fa fa-chevron-up fa-sm icon"></i>
-        </div>
+        <h2>
+            <button type="button" class="box-header-expandable" (click)="showAutofill = !showAutofill" [attr.aria-expanded]="showAutofill">
+                Autofill
+                <i *ngIf="!showAutofill" class="fa fa-chevron-down fa-sm icon" aria-hidden="true"></i>
+                <i *ngIf="showAutofill" class="fa fa-chevron-up fa-sm icon" aria-hidden="true"></i>
+            </button>
+        </h2>
     </div>
     <ng-container *ngIf="showAutofill">
         <div class="box">

src/popup/settings/premium.component.html

@@ -5,9 +5,9 @@
             <span>{{'back' | i18n}}</span>
         </a>
     </div>
-    <div class="center">
+    <h1 class="center">
         <span class="title">{{'premiumMembership' | i18n}}</span>
-    </div>
+    </h1>
     <div class="right"></div>
 </header>
 <content>

src/popup/settings/settings.component.html

@@ -2,14 +2,14 @@
     <div class="left">
         <app-pop-out></app-pop-out>
     </div>
-    <div class="center">
+    <h1 class="center">
         <span class="title">{{'settings' | i18n}}</span>
-    </div>
+    </h1>
     <div class="right"></div>
 </header>
 <content>
     <div class="box list">
-        <div class="box-header">{{'manage' | i18n}}</div>
+        <h2 class="box-header">{{'manage' | i18n}}</h2>
         <div class="box-content single-line">
             <a class="box-content-row box-content-row-flex text-default" routerLink="/folders">
                 <div class="row-main">{{'folders' | i18n}}</div>
@@ -26,7 +26,7 @@
         </div>
     </div>
     <div class="box list">
-        <div class="box-header">{{'security' | i18n}}</div>
+        <h2 class="box-header">{{'security' | i18n}}</h2>
         <div class="box-content single-line">
             <app-vault-timeout-input [vaultTimeouts]="vaultTimeouts" [formControl]="vaultTimeout" ngDefaultControl></app-vault-timeout-input>
             <div class="box-content-row display-block" appBoxRow>
@@ -61,7 +61,7 @@
         </div>
     </div>
     <div class="box list">
-        <div class="box-header">{{'account' | i18n}}</div>
+        <h2 class="box-header">{{'account' | i18n}}</h2>
         <div class="box-content single-line">
             <a class="box-content-row" routerLink="/premium">
                 <div class="row-main">
@@ -88,7 +88,7 @@
         </div>
     </div>
     <div class="box list">
-        <div class="box-header">{{'tools' | i18n}}</div>
+        <h2 class="box-header">{{'tools' | i18n}}</h2>
         <div class="box-content single-line">
             <button type="button" class="box-content-row box-content-row-flex text-default" appStopClick appBlurClick
                 (click)="import()">
@@ -108,7 +108,7 @@
         </div>
     </div>
     <div class="box list">
-        <div class="box-header">{{'other' | i18n}}</div>
+        <h2 class="box-header">{{'other' | i18n}}</h2>
         <div class="box-content single-line">
             <a class="box-content-row box-content-row-flex text-default" routerLink="/options">
                 <div class="row-main">{{'options' | i18n}}</div>

src/popup/settings/sync.component.html

@@ -5,9 +5,9 @@
             <span>{{'back' | i18n}}</span>
         </a>
     </div>
-    <div class="center">
+    <h1 class="center">
         <span class="title">{{'sync' | i18n}}</span>
-    </div>
+    </h1>
     <div class="right"></div>
 </header>
 <content>

src/popup/vault/add-edit-custom-fields.component.html

@@ -1,7 +1,7 @@
 <div class="box">
-    <div class="box-header">
+    <h2 class="box-header">
         {{'customFields' | i18n}}
-    </div>
+    </h2>
     <div class="box-content">
         <!-- Current custom fields -->
         <div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
@@ -34,7 +34,7 @@
                     *ngIf="f.type === fieldType.Boolean" appTrueFalseValue trueValue="true" falseValue="false">
                 <div class="action-buttons" *ngIf="f.type === fieldType.Hidden && (cipher.viewPassword || f.newField)">
                     <button type="button" class="row-btn" appStopClick appBlurClick appA11yTitle="{{'toggleVisibility' | i18n}}"
-                        (click)="toggleFieldValue(f)">
+                        (click)="toggleFieldValue(f)" [attr.aria-pressed]="f.showValue">
                         <i class="fa fa-lg" aria-hidden="true"
                             [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
                     </button>

src/popup/vault/add-edit.component.html

@@ -3,9 +3,9 @@
         <div class="left">
             <button type="button" appBlurClick (click)="cancel()">{{'cancel' | i18n}}</button>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{title}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick [disabled]="form.loading">
                 <span [hidden]="form.loading">{{'save' | i18n}}</span>
@@ -18,9 +18,9 @@
             {{'personalOwnershipPolicyInEffect' | i18n}}
         </app-callout>
         <div class="box">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'itemInformation' | i18n}}
-            </div>
+            </h2>
             <div class="box-content">
                 <div class="box-content-row" *ngIf="!editMode" appBoxRow>
                     <label for="type">{{'type' | i18n}}</label>
@@ -58,7 +58,7 @@
                             </button>
                             <button type="button" class="row-btn" appStopClick appBlurClick
                                 appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()"
-                                *ngIf="cipher.viewPassword">
+                                *ngIf="cipher.viewPassword" [attr.aria-pressed]="showPassword">
                                 <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </button>
@@ -91,7 +91,7 @@
                         </div>
                         <div class="action-buttons">
                             <button type="button" class="row-btn" appStopClick appBlurClick
-                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardNumber()">
+                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardNumber()" [attr.aria-pressed]="showCardNumber">
                                 <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showCardNumber, 'fa-eye-slash': showCardNumber}"></i>
                             </button>
@@ -122,7 +122,7 @@
                         </div>
                         <div class="action-buttons">
                             <button type="button" class="row-btn" appStopClick appBlurClick
-                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardCode()">
+                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardCode()" [attr.aria-pressed]="showCardCode">
                                 <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
                             </button>
@@ -314,9 +314,9 @@
             </div>
         </div>
         <div class="box">
-            <div class="box-header">
+            <h2 class="box-header">
                 <label for="notes">{{'notes' | i18n}}</label>
-            </div>
+            </h2>
             <div class="box-content">
                 <div class="box-content-row" appBoxRow>
                     <textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes"></textarea>
@@ -326,9 +326,9 @@
         <app-vault-add-edit-custom-fields [cipher]="cipher" [thisCipherType]="cipher.type" [editMode]="editMode">
         </app-vault-add-edit-custom-fields>
         <div class="box" *ngIf="allowOwnershipOptions()">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'ownership' | i18n}}
-            </div>
+            </h2>
             <div class="box-content">
                 <div class="box-content-row" appBoxRow>
                     <label for="organizationId">{{'whoOwnsThisItem' | i18n}}</label>
@@ -340,9 +340,9 @@
             </div>
         </div>
         <div class="box" *ngIf="(!editMode || cloneMode )&& cipher.organizationId">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'collections' | i18n}}
-            </div>
+            </h2>
             <div class="box-content" *ngIf="!collections || !collections.length">
                 <div class="box-content-row padded no-hover">
                     {{'noCollectionsInList' | i18n}}

src/popup/vault/attachments.component.html

@@ -9,9 +9,9 @@
                 <span>{{'back' | i18n}}</span>
             </button>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{'attachments' | i18n}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick [disabled]="form.loading">
                 <span [hidden]="form.loading">{{'save' | i18n}}</span>
@@ -40,9 +40,9 @@
             </div>
         </div>
         <div class="box">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'newAttachment' | i18n}}
-            </div>
+            </h2>
             <div class="box-content no-hover">
                 <div class="box-content-row">
                     <label for="file">{{'file' | i18n}}</label>

src/popup/vault/ciphers.component.html

@@ -5,6 +5,7 @@
             <span>{{'back' | i18n}}</span>
         </button>
     </div>
+    <h1 class="sr-only">{{'myVault' | i18n}}</h1>
     <div class="search">
         <input type="{{searchTypeSearch ? 'search' : 'text'}}"
             placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search" [(ngModel)]="searchText"
@@ -20,9 +21,9 @@
 <content [ngClass]="{'stacked-boxes': showGroupings()}">
     <ng-container *ngIf="showGroupings()">
         <div class="box list" *ngIf="nestedFolders && nestedFolders.length">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'folders' | i18n}}
-            </div>
+            </h2>
             <div class="box-content single-line">
                 <button type="button" *ngFor="let f of nestedFolders" class="box-content-row" appStopClick appBlurClick
                     (click)="selectFolder(f.node)">
@@ -38,9 +39,9 @@
             </div>
         </div>
         <div class="box list" *ngIf="nestedCollections && nestedCollections.length">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'collections' | i18n}}
-            </div>
+            </h2>
             <div class="box-content single-line">
                 <button type="button" *ngFor="let c of nestedCollections" class="box-content-row" appStopClick appBlurClick
                     (click)="selectCollection(c.node)">
@@ -66,10 +67,10 @@
         <cdk-virtual-scroll-viewport itemSize="46" minBufferPx="400" maxBufferPx="600" *ngIf="ciphers.length"
             #virtualScrollViewport>
             <div class="box list only-list">
-                <div class="box-header">
+                <h2 class="box-header">
                     {{groupingTitle}}
                     <span class="flex-right">{{isSearching() ? ciphers.length : ciphers.length}}</span>
-                </div>
+                </h2>
                 <div class="box-content">
                     <app-cipher-row *cdkVirtualFor="let c of ciphers" [cipher]="c" title="{{'viewItem' | i18n}}"
                         (onSelected)="selectCipher($event)" (launchEvent)="launchCipher($event)"></app-cipher-row>

src/popup/vault/collections.component.html

@@ -6,9 +6,9 @@
                 <span>{{'back' | i18n}}</span>
             </button>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{'collections' | i18n}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick [disabled]="form.loading">
                 <span [hidden]="form.loading">{{'save' | i18n}}</span>

src/popup/vault/current-tab.component.html

@@ -1,4 +1,5 @@
 <header>
+    <h1 class="sr-only">{{'currentTab' | i18n}}</h1>
     <div class="left">
         <app-pop-out [show]="!inSidebar"></app-pop-out>
         <button type="button" appBlurClick (click)="refresh()" appA11yTitle="{{'refresh' | i18n}}" *ngIf="inSidebar">
@@ -22,10 +23,10 @@
     </div>
     <ng-container *ngIf="loaded">
         <div class="box list" *ngIf="loginCiphers">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'typeLogins' | i18n}}
                 <span class="flex-right">{{loginCiphers.length}}</span>
-            </div>
+            </h2>
             <div class="box-content">
                 <app-cipher-row *ngFor="let loginCipher of loginCiphers" [cipher]="loginCipher" 
                     title="{{'autoFill' | i18n}}" [showView]="true" (onSelected)="fillCipher($event)" 
@@ -40,20 +41,20 @@
             </div>
         </div>
         <div class="box list" *ngIf="cardCiphers && cardCiphers.length">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'cards' | i18n}}
                 <span class="flex-right">{{cardCiphers.length}}</span>
-            </div>
+            </h2>
             <div class="box-content">
                 <app-cipher-row *ngFor="let cardCipher of cardCiphers" [cipher]="cardCipher" title="{{'autoFill' | i18n}}" [showView]="true"
                     (onSelected)="fillCipher($event)" (onView)="viewCipher($event)"></app-cipher-row>
             </div>
         </div>
         <div class="box list" *ngIf="identityCiphers && identityCiphers.length">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'identities' | i18n}}
                 <span class="flex-right">{{identityCiphers.length}}</span>
-            </div>
+            </h2>
             <div class="box-content">
                 <app-cipher-row *ngFor="let identityCipher of identityCiphers" [cipher]="identityCipher" title="{{'autoFill' | i18n}}" [showView]="true"
                     (onSelected)="fillCipher($event)" (onView)="viewCipher($event)"></app-cipher-row>

src/popup/vault/groupings.component.html

@@ -2,6 +2,7 @@
     <div class="left">
         <app-pop-out></app-pop-out>
     </div>
+    <h1 class="sr-only">{{'myVault' | i18n}}</h1>
     <div class="search">
         <input type="{{searchTypeSearch ? 'search' : 'text'}}" placeholder="{{'searchVault' | i18n}}" id="search"
             [(ngModel)]="searchText" (input)="search(200)" autocomplete="off" appAutofocus (keydown)="closeOnEsc($event)">
@@ -24,10 +25,10 @@
     </div>
     <ng-container *ngIf="ciphers && ciphers.length && !showSearching()">
         <div class="box list" *ngIf="favoriteCiphers">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'favorites' | i18n}}
                 <span class="flex-right">{{favoriteCiphers.length}}</span>
-            </div>
+            </h2>
             <div class="box-content">
                 <app-cipher-row *ngFor="let favoriteCipher of favoriteCiphers" [cipher]="favoriteCipher"
                     title="{{'viewItem' | i18n}}" (onSelected)="selectCipher($event)"
@@ -35,10 +36,10 @@
             </div>
         </div>
         <div class="box list">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'types' | i18n}}
                 <span class="flex-right">4</span>
-            </div>
+            </h2>
             <div class="box-content single-line">
                 <button type="button" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
                     <div class="row-main">
@@ -76,10 +77,10 @@
             </div>
         </div>
         <div class="box list" *ngIf="nestedFolders?.length">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'folders' | i18n}}
                 <span class="flex-right">{{folderCount}}</span>
-            </div>
+            </h2>
             <div class="box-content single-line">
                 <button type="button" *ngFor="let f of nestedFolders" class="box-content-row" appStopClick appBlurClick
                     (click)="selectFolder(f.node)">
@@ -96,10 +97,10 @@
             </div>
         </div>
         <div class="box list" *ngIf="nestedCollections && nestedCollections.length">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'collections' | i18n}}
                 <span class="flex-right">{{nestedCollections.length}}</span>
-            </div>
+            </h2>
             <div class="box-content single-line">
                 <button type="button" *ngFor="let nestedCollection of nestedCollections" class="box-content-row"
                     appStopClick appBlurClick (click)="selectCollection(nestedCollection.node)">
@@ -113,10 +114,10 @@
             </div>
         </div>
         <div class="box list" *ngIf="showNoFolderCiphers">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'noneFolder' | i18n}}
                 <div class="flex-right">{{noFolderCiphers.length}}</div>
-            </div>
+            </h2>
             <div class="box-content">
                 <app-cipher-row *ngFor="let noFolderCipher of noFolderCiphers" [cipher]="noFolderCipher"
                     title="{{'viewItem' | i18n}}" (onSelected)="selectCipher($event)"
@@ -124,10 +125,10 @@
             </div>
         </div>
         <div class="box list" *ngIf="deletedCount">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'trash' | i18n}}
                 <span class="flex-right">{{deletedCount}}</span>
-            </div>
+            </h2>
             <div class="box-content single-line">
                 <button type="button" class="box-content-row" appStopClick appBlurClick
                     (click)="selectTrash()">

src/popup/vault/password-history.component.html

@@ -2,9 +2,9 @@
     <div class="left">
         <button type="button" appBlurClick (click)="close()">{{'close' | i18n}}</button>
     </div>
-    <div class="center">
+    <h1 class="center">
         <span class="title">{{'passwordHistory' | i18n}}</span>
-    </div>
+    </h1>
     <div class="right"></div>
 </header>
 <content>

src/popup/vault/share.component.html

@@ -3,9 +3,9 @@
         <div class="left">
             <button type="button" appBlurClick (click)="cancel()">{{'cancel' | i18n}}</button>
         </div>
-        <div class="center">
+        <h1 class="center">
             <span class="title">{{'moveToOrganization' | i18n}}</span>
-        </div>
+        </h1>
         <div class="right">
             <button type="submit" appBlurClick [disabled]="form.loading || !canSave"
                 *ngIf="organizations && organizations.length">
@@ -35,9 +35,9 @@
             </div>
         </div>
         <div class="box" *ngIf="organizations && organizations.length">
-            <div class="box-header">
+            <h2 class="box-header">
                 {{'collections' | i18n}}
-            </div>
+            </h2>
             <div class="box-content" *ngIf="!collections || !collections.length">
                 <div class="box-content-row padded no-hover">
                     {{'noCollectionsInList' | i18n}}

src/popup/vault/view-custom-fields.component.html

@@ -1,7 +1,7 @@
 <ng-container>
-    <div class="box-header">
+    <h2 class="box-header">
         {{'customFields' | i18n}}
-    </div>
+    </h2>
     <div class="box-content">
         <div class="box-content-row box-content-row-flex" *ngFor="let field of cipher.fields">
             <div class="row-main">
@@ -27,13 +27,13 @@
                 </div>
             </div>
             <div class="action-buttons">
-                <button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
+                <button type="button" class="row-btn" appStopClick attr.aria-label="{{'toggleVisibility' | i18n}} {{field.name}}" appA11yTitle="{{'toggleVisibility' | i18n}}"
                     *ngIf="field.type === fieldType.Hidden && cipher.viewPassword"
-                    (click)="toggleFieldValue(field)">
+                    (click)="toggleFieldValue(field)" [attr.aria-pressed]="field.showValue">
                     <i class="fa fa-lg" aria-hidden="true"
                         [ngClass]="{'fa-eye': !field.showValue, 'fa-eye-slash': field.showValue}"></i>
                 </button>
-                <button type="button" class="row-btn" appStopClick appA11yTitle="{{'copyValue' | i18n}}"
+                <button type="button" class="row-btn" appStopClick attr.aria-label="{{'copyValue' | i18n}} {{field.name}}" appA11yTitle="{{'copyValue' | i18n}}"
                     *ngIf="field.value && field.type !== fieldType.Boolean && field.type !== fieldType.Linked &&
                     !(field.type === fieldType.Hidden && !cipher.viewPassword)"
                     (click)="copy(field.value, 'value', field.type === fieldType.Hidden ? 'H_Field' : 'Field')">

src/popup/vault/view.component.html

@@ -2,31 +2,31 @@
     <div class="left">
         <button type="button" appBlurClick (click)="close()">{{'close' | i18n}}</button>
     </div>
-    <div class="center">
+    <h1 class="center">
         <span class="title">{{'viewItem' | i18n}}</span>
-    </div>
+    </h1>
     <div class="right" *ngIf="cipher">
         <button type="button" appBlurClick (click)="edit()" *ngIf="!cipher.isDeleted">{{'edit' | i18n}}</button>
     </div>
 </header>
 <content *ngIf="cipher">
     <div class="box">
-        <div class="box-header">
+        <h2 class="box-header">
             {{'itemInformation' | i18n}}
-        </div>
+        </h2>
         <div class="box-content">
             <div class="box-content-row">
-                <span class="row-label">{{'name' | i18n}}</span>
-                <input type="text" [value]="cipher.name" readonly aria-readonly="true" />
+                <label for="name">{{'name' | i18n}}</label>
+                <input id="name" type="text" [value]="cipher.name" readonly aria-readonly="true" />
             </div>
             <!-- Login -->
             <div *ngIf="cipher.login">
                 <div class="box-content-row box-content-row-flex" *ngIf="cipher.login.username">
                     <div class="row-main">
-                        <span class="row-label draggable" draggable="true"
+                        <label for="loginUsername" class="row-label draggable" draggable="true"
                             (dragstart)="setTextDataOnDrag($event, cipher.login.username)">{{'username' | i18n}}
-                        </span>
-                        <input type="text" [value]="cipher.login.username" readonly aria-readonly="true" />
+                    </label>
+                        <input id="loginUsername" type="text" [value]="cipher.login.username" readonly aria-readonly="true" />
                     </div>
                     <div class="action-buttons">
                         <button type="button" class="row-btn" appStopClick appA11yTitle="{{'copyUsername' | i18n}}"
@@ -54,8 +54,8 @@
                             <i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"
                                 aria-hidden="true"></i>
                         </button>
-                        <button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
-                            (click)="togglePassword()" *ngIf="cipher.viewPassword">
+                        <button type="button" class="row-btn" appStopClick attr.aria-label="{{'toggleVisibility' | i18n}} {{'password' | i18n}}" appA11yTitle="{{'toggleVisibility' | i18n}}"
+                            (click)="togglePassword()" *ngIf="cipher.viewPassword" [attr.aria-pressed]="showPassword">
                             <i class="fa fa-lg" aria-hidden="true"
                                 [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </button>
@@ -103,8 +103,8 @@
                         <span [hidden]="!showCardNumber" class="monospaced">{{cipher.card.number}}</span>
                     </div>
                     <div class="action-buttons">
-                        <button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
-                            (click)="toggleCardNumber()">
+                        <button type="button" class="row-btn" appStopClick attr.aria-label="{{'toggleVisibility' | i18n}} {{'number' | i18n}}" appA11yTitle="{{'toggleVisibility' | i18n}}"
+                            (click)="toggleCardNumber()" [attr.aria-pressed]="showCardNumber">
                             <i class="fa fa-lg" aria-hidden="true"
                                 [ngClass]="{'fa-eye': !showCardNumber, 'fa-eye-slash': showCardNumber}"></i>
                         </button>
@@ -129,8 +129,8 @@
                         <span [hidden]="!showCardCode" class="monospaced">{{cipher.card.code}}</span>
                     </div>
                     <div class="action-buttons">
-                        <button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
-                            (click)="toggleCardCode()">
+                        <button type="button" class="row-btn" appStopClick attr.aria-label="{{'toggleVisibility' | i18n}} {{'securityCode' | i18n}}" appA11yTitle="{{'toggleVisibility' | i18n}}"
+                            (click)="toggleCardCode()" [attr.aria-pressed]="showCardCode">
                             <i class="fa fa-lg" aria-hidden="true"
                                 [ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
                         </button>
@@ -191,18 +191,18 @@
         <div class="box-content">
             <div class="box-content-row box-content-row-flex" *ngFor="let u of cipher.login.uris; let i = index">
                 <div class="row-main">
-                    <span class="row-label" *ngIf="!u.isWebsite">{{'uri' | i18n}}</span>
-                    <span class="row-label" *ngIf="u.isWebsite">{{'website' | i18n}}</span>
+                    <label for="hostOrUri{{i}}" class="row-label" *ngIf="!u.isWebsite">{{'uri' | i18n}}</label>
+                    <label for="hostOrUri{{i}}" class="row-label" *ngIf="u.isWebsite">{{'website' | i18n}}</label>
                     <span title="{{u.uri}}">
-                        <input type="text" [value]="u.hostOrUri" readonly aria-readonly="true" />
+                        <input id="hostOrUri{{i}}" type="text" [value]="u.hostOrUri" readonly aria-readonly="true" />
                     </span>
                 </div>
                 <div class="action-buttons">
-                    <button type="button" class="row-btn" appStopClick appA11yTitle="{{'launch' | i18n}}" *ngIf="u.canLaunch"
+                    <button type="button" class="row-btn" appStopClick attr.aria-label="{{'launch' | i18n}} {{u.uri}}" appA11yTitle="{{'launch' | i18n}}" *ngIf="u.canLaunch"
                         (click)="launch(u)">
                         <i class="fa fa-lg fa-share-square-o" aria-hidden="true"></i>
                     </button>
-                    <button type="button" class="row-btn"appStopClick appA11yTitle="{{'copyUri' | i18n}}"
+                    <button type="button" class="row-btn"appStopClick attr.aria-label="{{'copyUri' | i18n}} {{u.uri}}" appA11yTitle="{{'copyUri' | i18n}}"
                         (click)="copy(u.uri, u.isWebsite ? 'website' : 'uri', 'URI')">
                         <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
                     </button>
@@ -211,12 +211,12 @@
         </div>
     </div>
     <div class="box" *ngIf="cipher.notes">
-        <div class="box-header">
-            {{'notes' | i18n}}
-        </div>
+        <h2 class="box-header">
+            <label for="notes">{{'notes' | i18n}}</label>
+        </h2>
         <div class="box-content">
             <div class="box-content-row">
-                <textarea [value]="cipher.notes" rows="6" readonly aria-readonly="true"></textarea>
+                <textarea  id="notes" [value]="cipher.notes" rows="6" readonly aria-readonly="true"></textarea>
             </div>
         </div>
     </div>
@@ -225,9 +225,9 @@
             [copy]="copy.bind(this)"></app-vault-view-custom-fields>
     </div>
     <div class="box" *ngIf="cipher.hasAttachments && (canAccessPremium || cipher.organizationId) && showAttachments">
-        <div class="box-header">
+        <h2 class="box-header">
             {{'attachments' | i18n}}
-        </div>
+        </h2>
         <div class="box-content">
             <button type="button" class="box-content-row box-content-row-flex text-default" *ngFor="let attachment of cipher.attachments"
                 appStopClick appBlurCLick (click)="downloadAttachment(attachment)">

store/locales/ru/copy.resx

@@ -124,15 +124,31 @@
     <value>Защищенный и бесплатный менеджер паролей для всех ваших устройств</value>
   </data>
   <data name="Description" xml:space="preserve">
-    <value>Bitwarden - простой и безопасный способ хранить все ваши логины и пароли и легко их синхронизировать между всеми вашими устройствами. Расширение приложения Bitwarden позволяет быстро войти на любой веб-сайт с помощью Safari или Chrome и поддерживается сотнями других популярных приложений.
+    <value>Bitwarden, Inc. является материнской компанией 8bit Solutions LLC.
 
-Кража паролей - серьезная проблема. Сайты и приложения, которые вы используете подвергаются атакам каждый день. Проблемы в их безопасности могут привести к краже вашего пароля. Кроме того, когда вы используете одни и те же пароли на разных сайтах и приложениях, то хакеры могут легко получить доступ к нескольким вашим аккаунтам сразу (к почтовому ящику, к аккаунту банка и т. д.).
+НАЗВАН ЛУЧШИМ ДИСПЕТЧЕРОМ ПАРОЛЕЙ VERGE, US NEWS &amp; WORLD REPORT, CNET И МНОГИМИ ДРУГИМИ.
 
-Эксперты по безопасности рекомендуют использовать разные случайно сгенерированные пароли для каждого созданного вами аккаунта. Но как же управлять всеми этими паролями? Bitwarden позволяет вам легко получить доступ к вашим паролям, а так же создавать и хранить их.
+Управляйте, храните, защищайте и делитесь неограниченным количеством паролей на неограниченном количестве устройств из любого места. Bitwarden предоставляет решения с открытым исходным кодом по управлению паролями для всех, дома, на работе или в дороге.
 
-Bitwarden хранит все ваши логины и пароли в зашифрованном хранилище, которое синхронизируется между всеми вашими устройствами. До того, как данные покинут ваше устройство они будут зашифрованы и только потом отправлены. Мы в Bitwarden не сможем прочесть ваши данные, даже если мы этого захотим. Ваши данные зашифрованы при помощи алгоритма AES-256 и PBKDF2 SHA-256.
+Создавайте надежные, уникальные и случайные пароли на основе требований безопасности для каждого посещаемого вами веб-сайта.
 
-Bitwarden - это программное обеспечение с открытым на 100% исходным кодом. Исходный код Bitwarden размещен на GitHub, и каждый может свободно просматривать, проверять и вносить вклад в код Bitwarden.</value>
+Bitwarden Send быстро передает зашифрованную информацию - файлы и простой текст - напрямую кому угодно.
+
+Bitwarden предлагает для компаний планы Teams и Enterprise, чтобы вы могли безопасно делиться паролями с коллегами.
+
+Почему выбирают Bitwarden:
+
+Шифрование мирового класса
+Пароли защищены передовым сквозным шифрованием (AES-256 bit, соленый хэштег и PBKDF2 SHA-256), поэтому ваши данные остаются в безопасности и конфиденциальности.
+
+Встроенный генератор паролей
+Создавайте надежные, уникальные и случайные пароли на основе требований безопасности для каждого посещаемого вами веб-сайта.
+
+ Глобальные переводы
+ Переводы Bitwarden существуют на 40 языках и постоянно растут благодаря нашему глобальному сообществу.
+
+ Кросс-платформенные приложения
+ Защищайте и делитесь конфиденциальными данными в вашем Bitwarden Vault из любого браузера, мобильного устройства, настольной ОС и т. д.</value>
   </data>
   <data name="AssetTitle" xml:space="preserve">
     <value>Защищенный и бесплатный менеджер паролей для всех ваших устройств</value>
@@ -150,7 +166,7 @@ Bitwarden - это программное обеспечение с открыт
     <value>Предусмотрен удобный доступ к хранилищу из контекстного меню</value>
   </data>
   <data name="ScreenshotPassword" xml:space="preserve">
-    <value>Генерируйте сильные, случайные и надежные пароли</value>
+    <value>Автоматически генерируйте сильные, случайные и надежные пароли</value>
   </data>
   <data name="ScreenshotEdit" xml:space="preserve">
     <value>Ваша информация надежно хранится благодаря шифрованию AES-256</value>