vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

Merge pull request #2076 from patrickhlauke/patrickhlauke-a11y-patch4 

A11y: Small accessibility fixes for notifications
This commit is contained in:
Daniel James Smith 2021-09-28 15:55:41 +02:00 committed by GitHub
parent e63d44b214 6514b5fa3b
commit ed0cc1ced1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/notification/bar.html
View File

@ -1,52 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<title>Bitwarden</title>
<meta charset="utf-8" />
</head>
<body>
<table class="outter-table" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="24">
<a href="https://vault.bitwarden.com" target="_blank" id="logo-link" aria-hidden="true">
<img id="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVBQTFRFAAAAMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzjZa7EAAAAHB0Uk5TAGOSmJRPBP/wZ5ygx4CC4ZDDBsWdD86RJeX5dF7+3j4Hq78Rj/pY824x2B7tJoS7mgIc2Rqhyid69g6V/FQFe/sN0RTAGcxO4rwVickfrlDIpRsKeZdI94UD6tXmZCO1/TAIWulwn+zumy8B0DPPwmJoSmgAAAFHSURBVHicY2AAAkYmZsKAhZWNAQbYiQIcnCRqYOciVQM3VTXw8CIDPn6CGgQYkAGb4KiGUQ2jGoaTBiFhkJgI8RpExUBi4sRrkJAECklJE69BRhYoJCcP50sS0KCgCBJSUoYLqKji16CmDhSR1UAIaGrh1aCtAxKR1EUS0sOngU0fLGJgiKTByBi3BhNTsICZObIjDS0scWmwsgZL2djaoYSblb0sdg3m3A5gvrUhAypwdMKqwdkFot7JlQEdmLhhamBz94DwPJ0x1DMweLmgaxD1toFwfHyxqAcmGD8bZA1s/gGQ+JQNDMKqnoEhOEQdriE0LDAcwpKMCMahnoEhki8KpiE6BsrgiBXCqR4I4uITUEMrMBGfciBISo5CUp6SSkA5CCSmpUOVZ2RmZROhgYFNPgesXjjXjrBiCDC0zQvP52TDKgcAwC5BBQq6zvAAAAAASUVORK5CYII=" />
</a>
</td>
<td id="content"></td>
<td align="right" width="15">
<a href="#" id="close-button">
<img id="close" alt="X" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAABJQTFRFAAAAMzMzMzMzMzMzMzMzMzMzbxxq5QAAAAZ0Uk5TAECg/2CfwOuXQgAAAJVJREFUeJxVkdEJwzAMRNXgAQpZINAu0Fz7b3AHyP7T1MrppNQfMuI9sE42s7vp3Lws7+zHMcsDPdqGz8SAhAEctgIhNDhiDYyNVw+8p5ZYgrCExBS+iSmgMIXCEhJTKMy+Yobf//BF0Hv9gp8lcPKRAifPPSiYBAULoXJTWHNyJy/f917vbv4fCtZOslSwcZLKMf/zB2MLKtNp5GuwAAAAAElFTkSuQmCC" />
</a>
</td>
</tr>
</tbody>
</table>
<div class="outer-wrapper">
<div class="logo">
<a href="https://vault.bitwarden.com" target="_blank" id="logo-link">
<img id="logo" alt="Bitwarden" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVBQTFRFAAAAMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzjZa7EAAAAHB0Uk5TAGOSmJRPBP/wZ5ygx4CC4ZDDBsWdD86RJeX5dF7+3j4Hq78Rj/pY824x2B7tJoS7mgIc2Rqhyid69g6V/FQFe/sN0RTAGcxO4rwVickfrlDIpRsKeZdI94UD6tXmZCO1/TAIWulwn+zumy8B0DPPwmJoSmgAAAFHSURBVHicY2AAAkYmZsKAhZWNAQbYiQIcnCRqYOciVQM3VTXw8CIDPn6CGgQYkAGb4KiGUQ2jGoaTBiFhkJgI8RpExUBi4sRrkJAECklJE69BRhYoJCcP50sS0KCgCBJSUoYLqKji16CmDhSR1UAIaGrh1aCtAxKR1EUS0sOngU0fLGJgiKTByBi3BhNTsICZObIjDS0scWmwsgZL2djaoYSblb0sdg3m3A5gvrUhAypwdMKqwdkFot7JlQEdmLhhamBz94DwPJ0x1DMweLmgaxD1toFwfHyxqAcmGD8bZA1s/gGQ+JQNDMKqnoEhOEQdriE0LDAcwpKMCMahnoEhki8KpiE6BsrgiBXCqR4I4uITUEMrMBGfciBISo5CUp6SSkA5CCSmpUOVZ2RmZROhgYFNPgesXjjXjrBiCDC0zQvP52TDKgcAwC5BBQq6zvAAAAAASUVORK5CYII=" />
</a>
</div>
<div id="content"></div>
<div>
<a href="#" id="close-button">
<img id="close" alt="X" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAABJQTFRFAAAAMzMzMzMzMzMzMzMzMzMzbxxq5QAAAAZ0Uk5TAECg/2CfwOuXQgAAAJVJREFUeJxVkdEJwzAMRNXgAQpZINAu0Fz7b3AHyP7T1MrppNQfMuI9sE42s7vp3Lws7+zHMcsDPdqGz8SAhAEctgIhNDhiDYyNVw+8p5ZYgrCExBS+iSmgMIXCEhJTKMy+Yobf//BF0Hv9gp8lcPKRAifPPSiYBAULoXJTWHNyJy/f917vbv4fCtZOslSwcZLKMf/zB2MLKtNp5GuwAAAAAElFTkSuQmCC" />
</a>
</div>
</div>
<div id="templates" style="display: none;">
<table class="inner-table" cellpadding="0" cellspacing="0" id="template-add">
<tbody>
<tr>
<td class="add-text"></td>
<td align="right">
<button class="never-save link"></button>
</td>
<td align="right" class="add-buttons">
<select class="select-folder"></select>
<button class="add-save"></button>
</td>
</tr>
</tbody>
</table>
<table class="inner-table" cellpadding="0" cellspacing="0" id="template-change">
<tbody>
<tr>
<td class="change-text"></td>
<td align="right" class="change-buttons">
<button class="change-save"></button>
</td>
</tr>
</tbody>
</table>
<div class="inner-wrapper" id="template-add">
<div class="add-text"></div>
<div class="add-buttons">
<button class="never-save link"></button>
<select class="select-folder"></select>
<button class="add-save"></button>
</div>
</div>
<div class="inner-wrapper" id="template-change">
<div class="change-text"></div>
<div class="change-buttons">
<button class="change-save"></button>
</div>
</div>
<div id="template-alert"></div>
</div>
</body>

2
src/notification/bar.js
View File

@ -8,6 +8,7 @@ document.addEventListener('DOMContentLoaded', () => {
i18n.close = chrome.i18n.getMessage('close');
i18n.yes = chrome.i18n.getMessage('yes');
i18n.never = chrome.i18n.getMessage('never');
i18n.folder = chrome.i18n.getMessage('folder');
i18n.notificationAddSave = chrome.i18n.getMessage('notificationAddSave');
i18n.notificationNeverSave = chrome.i18n.getMessage('notificationNeverSave');
i18n.notificationAddDesc = chrome.i18n.getMessage('notificationAddDesc');
@ -39,6 +40,7 @@ document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#template-add .add-save').textContent = i18n.notificationAddSave;
document.querySelector('#template-add .never-save').textContent = i18n.notificationNeverSave;
document.querySelector('#template-add .select-folder').style.display = 'initial';
document.querySelector('#template-add .select-folder').setAttribute('aria-label', i18n.folder);
document.querySelector('#template-change .change-save').textContent = i18n.notificationChangeSave;
}

45
src/notification/bar.scss
View File

@ -9,31 +9,35 @@
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
table {
width: 100%;
.outer-wrapper {
padding: 0 10px;
border-bottom: 2px solid #175ddc;
display: grid;
grid-template-columns: 1fr auto 1fr;
column-gap: 10px;
grid-column-gap: 10px;
box-sizing: border-box;
height: 42px;
}
.outter-table > tbody > tr > td {
padding: 0 0 0 10px;
border-bottom: 2px solid #175DDC;
height: 40px;
.outer-wrapper > * {
align-self: center;
}
.outter-table > tbody > tr > td:last-child {
padding-right: 10px;
}
.inner-table td {
padding: 0 10px 0 0;
.inner-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
column-gap: 10px;
grid-column-gap: 10px;
}
.inner-table td:last-child {
padding: 0;
}
#content .change-buttons {
justify-self: end;
}
.inner-table td button {
margin-left: 5px;
}
.wrapper > *, .inner-wrapper > * {
align-self: center;
}
img {
border: 0;
@ -82,12 +86,13 @@ button.link {
}
body[class*='lang-en'] .add-buttons {
width: 50px;
width: 175px;
text-align: right;
}
@media (min-width: 768px) {
body[class*='lang-en'] .add-buttons {
width: 320px;
width: 420px;
}
}