Allow disabled dropdown menu items to be focused (#36078)

app/javascript/mastodon/components/dropdown_menu.tsx

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

app/javascript/mastodon/components/status/boost_button.tsx

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

app/javascript/styles/mastodon/components.scss

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