Merge pull request #1 from Xelsing/main

refactor: add aria

.eslintrc.json

@@ -40,7 +40,8 @@
     "jsx-a11y/no-autofocus": "off",
     "react/button-has-type": "off",
     "jsx-a11y/no-noninteractive-element-interactions": "off",
-    "no-shadow": "off"
+    "no-shadow": "off",
+    "jsx-a11y/role-has-required-aria-props": "off"
   },
   "settings": {
     "import/resolver": {

src/phone-input/phone-input-item.tsx

@@ -42,6 +42,7 @@ export function PhoneInputItem(
     <li
       {...props}
       {...itemProps}
+      aria-controls={country}
       className={clsx(styles.countrySelectItem, className)}
       onClick={handleSelect}
       onKeyDown={handleKeyDown}
@@ -62,6 +63,7 @@ export function usePhoneInputItem(props: UsePhoneInputItemProps) {
   return {
     getListItemProps: useCallback(
       (itemProps: { value: string }) => ({
+        'aria-controls': itemProps.value,
         'aria-selected': selected === itemProps.value,
         role: 'option' as const,
       }),

src/phone-input/phone-input-trigger.tsx

@@ -21,6 +21,9 @@ export function PhoneInputTrigger(
   return (
     <button
       {...props}
+      aria-expanded={isDialogOpen}
+      aria-haspopup="listbox"
+      aria-label="Country selector"
       className={clsx(styles.phoneInputTrigger, className)}
       data-open={isDialogOpen}
       onClick={handleTogglePopover}
@@ -31,17 +34,22 @@ export function PhoneInputTrigger(
           });
         }
       }}
+      // eslint-disable-next-line no-use-before-define
+      role="combobox"
       type="button"
     >
       {children}
     </button>
   );
 }
 
-export function usePhoneInputTrigger() {
+export function usePhoneInputTrigger(props: { open: boolean }) {
   return {
     triggerProps: {
+      'aria-expanded': props.open,
+      'aria-haspopup': 'listbox',
       'aria-label': 'Select country',
+      role: 'combobox',
       type: 'button',
     } as const,
   };

src/phone-input/phone-input.module.scss

@@ -13,6 +13,10 @@
   &Trigger {
     background: none;
     border: none;
+
+    & * {
+      pointer-events: none;
+    }
   }
 
   &Dialog {

src/phone-input/phone-input.tsx

@@ -23,7 +23,9 @@ export function usePhone(
   const { getListItemProps } = usePhoneInputItem({
     selected: state.country,
   });
-  const { triggerProps } = usePhoneInputTrigger();
+  const { triggerProps } = usePhoneInputTrigger({
+    open: props.isDialogOpen,
+  });
   const { phoneInputDialogProps } = usePhoneInputDialog({
     open: props.isDialogOpen,
   });

stories/phone-input.stories.tsx

@@ -268,7 +268,10 @@ export function StyledWithAnimation() {
         >
           {({ open }) => (
             <>
-              <PhoneInput.Trigger className={styles.countrySelect}>
+              <PhoneInput.Trigger
+                className={styles.countrySelect}
+                id="country-selector"
+              >
                 <CountryFlag className={styles.countryFlag} country={country} />
                 <div className={styles.countryIcon}>
                   <svg
@@ -308,8 +311,10 @@ export function StyledWithAnimation() {
                     </div>
                     {open && (
                       <input
+                        aria-labelledby="country-selector search-input"
                         autoFocus
                         className={styles.countrySelectSearchInput}
+                        id="search-input"
                         onChange={(e) => setSearch(e.target.value)}
                         placeholder="Search"
                         type="text"