open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Copyable elements accessibility (#808)

Browse Source
This commit is contained in:
narcolepticinsomniac 2020-01-06 19:13:49 -05:00 committed by GitHub
parent 2ea5290ea0
commit 6cb038535e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
popup/popup.css
View File

@ -714,13 +714,19 @@ body.blocked .actions > .main-controls {
margin: 0; margin: 0;
} }
.blocked-info strong { .blocked-info .copy {
cursor: pointer; cursor: pointer;
transition: all .1s; transition: all .1s;
border-bottom: 1px dotted #000; border-bottom: 1px dotted #000;
text-decoration: none;
font-weight: bold;
} }
.blocked-info strong.copied { .blocked-info .copy:hover {
color: #000;
}
.blocked-info .copy.copied {
background: hsl(170, 40%, 80%); background: hsl(170, 40%, 80%);
color: #000; color: #000;
} }
@ -745,7 +751,7 @@ body.blocked .actions > .main-controls {
display: block; display: block;
} }
.blocked-info strong:after { .blocked-info .copy:after {
content: ''; content: '';
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURQAAAAAAAKVnuc8AAAABdFJOUwBA5thmAAAAIElEQVQI12NgYGCEAgYgkwEMGBFijEhixDMZkUSRLQAACpYALjrE2uIAAAAASUVORK5CYII=)center no-repeat; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURQAAAAAAAKVnuc8AAAABdFJOUwBA5thmAAAAIElEQVQI12NgYGCEAgYgkwEMGBFijEhixDMZkUSRLQAACpYALjrE2uIAAAAASUVORK5CYII=)center no-repeat;
height: 10px; height: 10px;

9
popup/popup.js
View File

@ -142,10 +142,12 @@ function initPopup() {
const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) + const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) +
(FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF')); (FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF'));
const renderToken = s => s[0] === '<' const renderToken = s => s[0] === '<'
? $create('strong', { ? $create('a', {
textContent: s.slice(1, -1), textContent: s.slice(1, -1),
onclick: handleEvent.copyContent, onclick: handleEvent.copyContent,
tabIndex: -1, href: '#',
className: 'copy',
tabIndex: 0,
title: t('copy'), title: t('copy'),
}) })
: s; : s;
@ -590,7 +592,8 @@ Object.assign(handleEvent, {
}, },
copyContent(event) { copyContent(event) {
const target = event.target; event.preventDefault();
const target = document.activeElement;
const message = $('.copy-message'); const message = $('.copy-message');
navigator.clipboard.writeText(target.textContent); navigator.clipboard.writeText(target.textContent);
target.classList.add('copied'); target.classList.add('copied');