maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

a11y-ize reaction drawer (#19273)

Browse source
This commit is contained in:
Rajat Talesra 2023-03-31 20:30:45 +05:30 • committed by GitHub
parent 16f678cebd
commit 2346d22fe9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/stylesheets/views/article.scss
View file

@ -146,6 +146,15 @@
flex-direction: row;
align-items: center;
.js-focus-visible &.focus-visible:focus,
&:is(label):focus-within {
background-color: var(--button-ghost-bg-hover);
border-color: transparent;
border-radius: 1000px;
box-shadow: none;
color: var(--button-ghost-color-hover);
}
@media (min-width: $breakpoint-m) {
flex-direction: column;
}
@ -248,6 +257,7 @@
// This overrides some of the styles for the temporarily feature-flaged
.reaction-drawer .crayons-reaction {
border: 1px solid var(--card-bg);
border-radius: 20px;
flex-direction: column;
&.user-activated {
@ -260,6 +270,12 @@
box-shadow: none;
}
}
.js-focus-visible &.focus-visible:focus,
&:is(label):focus-within {
box-shadow: var(--focus-ring);
outline: 0;
}
}
.reaction-drawer .crayons-reaction:hover {

3
app/views/articles/_multiple_reactions.html.erb
View file

@ -14,6 +14,9 @@
<span class="crayons-reaction__count" id="reaction_total_count">
<span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span>
</span>
<span class="crayons-tooltip__content">
<%= t("views.reactions.drawer_button") %>
</span>
</button>
<div class="reaction-drawer" aria-expanded="false">