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

2
src/notification/bar.js
View File

@ -8,6 +8,7 @@ document.addEventListener('DOMContentLoaded', () => {
i18n.close = chrome.i18n.getMessage('close'); i18n.close = chrome.i18n.getMessage('close');
i18n.yes = chrome.i18n.getMessage('yes'); i18n.yes = chrome.i18n.getMessage('yes');
i18n.never = chrome.i18n.getMessage('never'); i18n.never = chrome.i18n.getMessage('never');
i18n.folder = chrome.i18n.getMessage('folder');
i18n.notificationAddSave = chrome.i18n.getMessage('notificationAddSave'); i18n.notificationAddSave = chrome.i18n.getMessage('notificationAddSave');
i18n.notificationNeverSave = chrome.i18n.getMessage('notificationNeverSave'); i18n.notificationNeverSave = chrome.i18n.getMessage('notificationNeverSave');
i18n.notificationAddDesc = chrome.i18n.getMessage('notificationAddDesc'); 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 .add-save').textContent = i18n.notificationAddSave;
document.querySelector('#template-add .never-save').textContent = i18n.notificationNeverSave; document.querySelector('#template-add .never-save').textContent = i18n.notificationNeverSave;
document.querySelector('#template-add .select-folder').style.display = 'initial'; 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; 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; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
} }
table { .outer-wrapper {
width: 100%; 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 { .outer-wrapper > * {
padding: 0 0 0 10px; align-self: center;
border-bottom: 2px solid #175DDC;
height: 40px;
} }
.outter-table > tbody > tr > td:last-child { .inner-wrapper {
padding-right: 10px; display: grid;
} grid-template-columns: 2fr 1fr;
column-gap: 10px;
.inner-table td { grid-column-gap: 10px;
padding: 0 10px 0 0;
} }
.inner-table td:last-child { #content .change-buttons {
padding: 0; justify-self: end;
} }
.inner-table td button { .wrapper > *, .inner-wrapper > * {
margin-left: 5px; align-self: center;
} }
img { img {
border: 0; border: 0;
@ -82,12 +86,13 @@ button.link {
} }
body[class*='lang-en'] .add-buttons { body[class*='lang-en'] .add-buttons {
width: 50px; width: 175px;
text-align: right;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
body[class*='lang-en'] .add-buttons { body[class*='lang-en'] .add-buttons {
width: 320px; width: 420px;
} }
} }