Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2026-09-20 00:35:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make message menu buttons into real focusable buttons

Browse Source
This commit is contained in:
Jamie
2026-09-09 20:01:35 -07:00
committed by GitHub
parent a2f8f57ac4
commit a830e9cbec
2 changed files with 27 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stylesheets/_modules.scss
+21 -28
View File
@@ -155,7 +155,9 @@
}
.module-message:hover .module-message__buttons,
.module-message__buttons:has([data-axo-contextmenu-state='open']) {
.module-message:is(:focus-visible, :has(:focus-visible))
.module-message__buttons,
.module-message__buttons:has([data-axo-dropdownmenu-state='open']) {
opacity: 1;
}
@@ -182,41 +184,32 @@
}
}
@mixin module-message__buttons__button($light-icon, $dark-icon: $light-icon) {
cursor: pointer;
height: 20px;
width: 20px;
@mixin module-message__buttons__button($icon) {
color: variables.$color-gray-45;
border-radius: 9999px;
@include mixins.light-theme {
@include mixins.color-svg($light-icon, variables.$color-gray-45);
&:hover {
@include mixins.color-svg($light-icon, variables.$color-gray-90);
}
&::before {
content: '';
display: block;
height: 20px;
width: 20px;
@include mixins.color-svg($icon, currentColor);
}
@include mixins.dark-theme {
@include mixins.color-svg($dark-icon, variables.$color-gray-45);
&:hover {
@include mixins.color-svg($dark-icon, variables.$color-gray-02);
}
&:hover {
color: light-dark(variables.$color-gray-90, variables.$color-gray-02);
}
&:focus-visible {
@include mixins.axo-focus-ring;
}
.module-message--targeted & {
@include mixins.light-theme {
background-color: variables.$color-gray-60;
}
@include mixins.dark-theme {
background-color: variables.$color-white;
}
color: light-dark(variables.$color-gray-60, variables.$color-white);
}
.module-message:focus-visible & {
@include mixins.light-theme {
background-color: variables.$color-gray-60;
}
@include mixins.dark-theme {
background-color: variables.$color-white;
}
.module-message:focus & {
color: light-dark(variables.$color-gray-60, variables.$color-white);
}
}
ts/components/conversation/TimelineMessage.dom.tsx
+6 -12
View File
@@ -527,17 +527,15 @@ function MessageMenu({
: undefined;
return (
// FIXME: Menus should be keyboard accessible
// oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
<div
<button
ref={maybePopperRef}
type="button"
onClick={(event: MouseEvent) => {
event.stopPropagation();
event.preventDefault();
onReact();
}}
role="button"
className="module-message__buttons__react"
aria-label={i18n('icu:reactToMessage')}
onDoubleClick={ev => {
@@ -551,11 +549,9 @@ function MessageMenu({
)}
{onDownload && (
// FIXME: Menus should be keyboard accessible
// oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
<div
<button
type="button"
onClick={onDownload}
role="button"
aria-label={i18n('icu:downloadAttachment')}
className={classNames(
'module-message__buttons__download',
@@ -569,16 +565,14 @@ function MessageMenu({
)}
{onReplyToMessage && (
// FIXME: Menus should be keyboard accessible
// oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
<div
<button
type="button"
onClick={(event: MouseEvent) => {
event.stopPropagation();
event.preventDefault();
onReplyToMessage();
}}
role="button"
aria-label={i18n('icu:replyToMessage')}
className={classNames(
'module-message__buttons__reply',