Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-16 17:29:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Allow disabled dropdown menu items to be focused

Browse Source 
Port 841212710b to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2025-09-10 13:32:50 +02:00
committed by Claire
parent 128a69c1f4
commit 5e0d346e14
3 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/javascript/flavours/glitch/components/dropdown_menu.tsx
View File

@@ -186,13 +186,16 @@ export const DropdownMenu = <Item = MenuItem,>({
(e: React.MouseEvent | React.KeyboardEvent) => { (e: React.MouseEvent | React.KeyboardEvent) => {
const i = Number(e.currentTarget.getAttribute('data-index')); const i = Number(e.currentTarget.getAttribute('data-index'));
const item = items?.[i]; const item = items?.[i];
const isItemDisabled = Boolean(
item && typeof item === 'object' && 'disabled' in item && item.disabled,
);
onClose(); if (!item || isItemDisabled) {
if (!item) {
return; return;
} }
onClose();
if (typeof onItemClick === 'function') { if (typeof onItemClick === 'function') {
e.preventDefault(); e.preventDefault();
onItemClick(item, i); onItemClick(item, i);
@@ -233,7 +236,7 @@ export const DropdownMenu = <Item = MenuItem,>({
onClick={handleItemClick} onClick={handleItemClick}
onKeyUp={handleItemKeyUp} onKeyUp={handleItemKeyUp}
data-index={i} data-index={i}
disabled={disabled} aria-disabled={disabled}
> >
<DropdownMenuItemContent item={option} /> <DropdownMenuItemContent item={option} />
</button> </button>
@@ -320,7 +323,7 @@ export const DropdownMenu = <Item = MenuItem,>({
); );
}; };
interface DropdownProps<Item = MenuItem> { interface DropdownProps<Item extends object | null = MenuItem> {
children?: React.ReactElement; children?: React.ReactElement;
icon?: string; icon?: string;
iconComponent?: IconProp; iconComponent?: IconProp;
@@ -348,7 +351,7 @@ interface DropdownProps<Item = MenuItem> {
const offset = [5, 5] as OffsetValue; const offset = [5, 5] as OffsetValue;
const popperConfig = { strategy: 'fixed' } as UsePopperOptions; const popperConfig = { strategy: 'fixed' } as UsePopperOptions;
export const Dropdown = <Item = MenuItem,>({ export const Dropdown = <Item extends object | null = MenuItem>({
children, children,
icon, icon,
iconComponent, iconComponent,

2
app/javascript/flavours/glitch/components/status/boost_button.tsx
View File

@@ -180,7 +180,7 @@ const ReblogMenuItem: FC<ReblogMenuItemProps> = ({
<button <button
{...handlers} {...handlers}
ref={focusRefCallback} ref={focusRefCallback}
disabled={disabled} aria-disabled={disabled}
data-index={index} data-index={index}
> >
<DropdownMenuItemContent item={item} /> <DropdownMenuItemContent item={item} />

11
app/javascript/flavours/glitch/styles/components.scss
View File

@@ -2973,16 +2973,23 @@ a.account__display-name {
&:focus, &:focus,
&:hover, &:hover,
&:active { &:active {
&:not(:disabled) { &:not(:disabled, [aria-disabled='true']) {
background: var(--dropdown-border-color); background: var(--dropdown-border-color);
outline: 0; outline: 0;
} }
} }
} }
button:disabled { button:disabled,
button[aria-disabled='true'] {
color: $dark-text-color; color: $dark-text-color;
cursor: default; cursor: default;
&:focus {
color: rgb(from $dark-text-color r g b / 70%);
background: var(--dropdown-border-color);
outline: 0;
}
} }
} }