matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'accessible-emoji-picker' into 'develop'

Browse Source 
Keyboard-accessible emoji picker

See merge request soapbox-pub/soapbox-fe!634
This commit is contained in:
Alex Gleason
2021-07-21 16:41:26 +00:00
parent 196b55f6d1 c5dfd6c7d7
commit b22f20a390
14 changed files with 298 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/styles/components/detailed-status.scss
View File

@ -94,6 +94,22 @@
transform: translateY(-1px);
}
}
.emoji-picker-expand {
display: none;
}
&:focus-within {
.emoji-picker-expand {
display: inline-flex;
width: 0;
overflow: hidden;
&:focus-within {
width: unset;
}
}
}
}
.detailed-status__wrapper {

6
app/styles/components/emoji-reacts.scss
View File

@ -80,7 +80,8 @@
transition: 0.1s;
z-index: 999;
&--visible {
&--visible,
&--focused {
opacity: 1;
pointer-events: all;
}
@ -99,7 +100,8 @@
transition: 0.1s;
}
&:hover {
&:hover,
&:focus {
img {
width: 36px;
height: 36px;

19
app/styles/components/status.scss
View File

@ -677,3 +677,22 @@ a.status-card.compact:hover {
border-radius: 4px;
}
}
.status__action-bar,
.detailed-status__action-bar {
.emoji-picker-expand {
display: none;
}
&:focus-within {
.emoji-picker-expand {
display: inline-flex;
width: 0;
overflow: hidden;
&:focus-within {
width: unset;
}
}
}
}