Merge pull request #1147 from astuanax/accessibility

Accessibility
responsively-org · Nov 14, 2023 · f1d8a03 · f1d8a03
2 parents 25a1bb6 + 387831f
commit f1d8a03
Show file tree

Hide file tree

Showing 3 changed files with 368 additions and 22 deletions.
diff --git a/desktop-app/src/renderer/components/DropDown/index.tsx b/desktop-app/src/renderer/components/DropDown/index.tsx
@@ -1,30 +1,32 @@
 import { Menu, Transition } from '@headlessui/react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
-import { Fragment, useEffect, useRef, useState } from 'react';
+import { Fragment } from 'react';
 
 interface Separator {
   type: 'separator';
 }
+
 interface Option {
   type?: 'option';
   label: JSX.Element | string;
-  onClick: () => void;
+  onClick: (() => void) | null;
 }
 
 type OptionOrSeparator = Option | Separator;
 
 interface Props {
   label: JSX.Element | string;
   options: OptionOrSeparator[];
+  className?: string | null;
 }
 
-export function DropDown({ label, options }: Props) {
+export function DropDown({ label, options, className }: Props) {
   return (
     <div className="text-right">
-      <Menu as="div" className="relative inline-block text-left">
+      <Menu as="div" className={`relative inline-block text-left ${className}`}>
         <div>
-          <Menu.Button className="inline-flex w-full justify-center gap-1 rounded-md bg-opacity-20 px-4 py-2 text-sm font-medium hover:bg-slate-300 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 dark:hover:bg-slate-700">
+          <Menu.Button className="inline-flex w-full justify-center gap-1 rounded-md bg-opacity-20 p-2 text-sm font-medium hover:bg-slate-300 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 dark:hover:bg-slate-700">
             {label}
             <Icon icon="mdi:chevron-down" />
           </Menu.Button>
@@ -53,18 +55,29 @@ export function DropDown({ label, options }: Props) {
                 return (
                   // eslint-disable-next-line react/no-array-index-key
                   <Menu.Item key={idx.toString()}>
-                    {({ active }) => (
-                      <button
-                        className={cx(
-                          'group flex w-full items-center rounded-md px-2 py-2 text-sm',
-                          { 'bg-slate-200 dark:bg-slate-800': active }
-                        )}
-                        type="button"
-                        onClick={option.onClick}
-                      >
-                        {option.label}
-                      </button>
-                    )}
+                    {({ active }) =>
+                      option.onClick !== null ? (
+                        <button
+                          className={cx(
+                            'group flex w-full items-center rounded-md px-2 py-2',
+                            { 'bg-slate-200 dark:bg-slate-800': active }
+                          )}
+                          type="button"
+                          onClick={option.onClick}
+                        >
+                          {option.label}
+                        </button>
+                      ) : (
+                        <div
+                          className={cx(
+                            'group mt-2 flex w-full items-center rounded-md px-2',
+                            { 'bg-slate-200 dark:bg-slate-800': active }
+                          )}
+                        >
+                          {option.label}
+                        </div>
+                      )
+                    }
                   </Menu.Item>
                 );
               })}