[Glitch] Improve accessibility of visibility modal dropdowns

Port 377e870348 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/dropdown/index.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useId, useMemo, useRef, useState } from 'react';
 import type { ComponentPropsWithoutRef, FC } from 'react';
 
-import { FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
 import type { MessageDescriptor } from 'react-intl';
 
 import classNames from 'classnames';
@@ -17,11 +17,12 @@ import { Icon } from '../icon';
 import { matchWidth } from './utils';
 
 interface DropdownProps {
-  title: string;
   disabled?: boolean;
   items: SelectItem[];
   onChange: (value: string) => void;
   current: string;
+  labelId: string;
+  descriptionId?: string;
   emptyText?: MessageDescriptor;
   classPrefix: string;
 }
@@ -29,39 +30,59 @@ interface DropdownProps {
 export const Dropdown: FC<
   DropdownProps & Omit<ComponentPropsWithoutRef<'button'>, keyof DropdownProps>
 > = ({
-  title,
   disabled,
   items,
   current,
   onChange,
+  labelId,
+  descriptionId,
   classPrefix,
   className,
+  id,
   ...buttonProps
 }) => {
+  const intl = useIntl();
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const accessibilityId = useId();
+  const uniqueId = useId();
+  const buttonId = id ?? `${uniqueId}-button`;
+  const listboxId = `${uniqueId}-listbox`;
 
   const [open, setOpen] = useState(false);
+
   const handleToggle = useCallback(() => {
     if (!disabled) {
-      setOpen((prevOpen) => !prevOpen);
+      setOpen((prevOpen) => {
+        buttonRef.current?.focus();
+        return !prevOpen;
+      });
     }
   }, [disabled]);
+
   const handleClose = useCallback(() => {
     setOpen(false);
+    buttonRef.current?.focus();
   }, []);
+
   const currentText = useMemo(
-    () => items.find((i) => i.value === current)?.text,
-    [current, items],
+    () =>
+      items.find((i) => i.value === current)?.text ??
+      intl.formatMessage({
+        id: 'dropdown.empty',
+        defaultMessage: 'Select an option',
+      }),
+    [current, intl, items],
   );
+
   return (
     <>
       <button
         type='button'
         {...buttonProps}
-        title={title}
+        id={buttonId}
+        aria-labelledby={`${labelId} ${buttonId}`}
+        aria-describedby={descriptionId}
         aria-expanded={open}
-        aria-controls={accessibilityId}
+        aria-controls={listboxId}
         onClick={handleToggle}
         disabled={disabled}
         className={classNames(
@@ -74,12 +95,7 @@ export const Dropdown: FC<
         )}
         ref={buttonRef}
       >
-        {currentText ?? (
-          <FormattedMessage
-            id='dropdown.empty'
-            defaultMessage='Select an option'
-          />
-        )}
+        {currentText}
         <Icon
           id='unfold-icon'
           icon={UnfoldMoreIcon}
@@ -107,7 +123,7 @@ export const Dropdown: FC<
                 `${classPrefix}__dropdown`,
                 placement,
               )}
-              id={accessibilityId}
+              id={listboxId}
             >
               <DropdownSelector
                 items={items}