fix(components): make Select an accessible listbox with keyboard support

.changepacks/changepack_log_select_a11y.json

@@ -0,0 +1,7 @@
+{
+  "changes": {
+    "packages/components/package.json": "Patch"
+  },
+  "note": "Select follows the listbox pattern: the trigger has aria-haspopup, aria-controls and opens with ArrowDown/ArrowUp; the popup is a listbox (aria-multiselectable for checkbox selects) whose options carry role=option, aria-selected and aria-disabled; opening focuses the selected or first option, arrows/Home/End move between enabled options, Enter/Space choose one, and Escape or choosing closes the popup and returns focus to the trigger. An outside click on a controlled select now calls onOpenChange(false) instead of changing hidden internal state",
+  "date": "2026-10-01T00:00:00.000Z"
+}

bindings/devup-ui-wasm/src/lib.rs

@@ -1551,7 +1551,7 @@ mod tests {
         );
 
         // Test getters
-        assert!(!output.code().is_empty());
+        assert_ne!(output.code(), "");
         assert_eq!(output.css_file(), Some("devup-ui-0.css".to_string()));
         assert_eq!(output.map(), Some("//# sourceMappingURL=test".to_string()));
         assert!(output.css().is_some());
@@ -1951,7 +1951,7 @@ mod tests {
 
         assert!(result.is_ok());
         let output = result.unwrap();
-        assert!(!output.code().is_empty());
+        assert_ne!(output.code(), "");
         assert!(output.map().is_some());
     }
 
@@ -1975,7 +1975,7 @@ mod tests {
 
         assert!(result.is_ok());
         let output = result.unwrap();
-        assert!(!output.code().is_empty());
+        assert_ne!(output.code(), "");
         assert!(output.map().is_none());
     }
 
@@ -2000,7 +2000,7 @@ mod tests {
 
         assert!(result.is_err());
         if let Err(error) = result {
-            assert!(!error.is_empty());
+            assert_ne!(error, "");
         }
     }
 

libs/css/src/theme_tokens.rs

@@ -119,7 +119,7 @@ mod tests {
         set_typography_keys(vec!["body".to_string(), "title".to_string()]);
         assert_eq!(get_typography_keys(), vec!["body", "title"]);
         set_typography_keys(vec![]);
-        assert!(get_typography_keys().is_empty());
+        assert_eq!(get_typography_keys(), Vec::<String>::new());
     }
 
     #[test]

libs/extractor/src/lib.rs

@@ -836,8 +836,8 @@ mod tests {
             alternate: None,
         };
 
-        assert!(empty.extract().is_empty());
-        assert!(empty.into_extract().is_empty());
+        assert_eq!(empty.extract(), vec![]);
+        assert_eq!(empty.into_extract(), vec![]);
     }
 
     #[test]
@@ -13598,7 +13598,7 @@ globalCss({
         );
         assert!(result.is_ok());
         let output = result.unwrap();
-        assert!(!output.code.is_empty());
+        assert_ne!(output.code, "");
     }
 
     #[test]
@@ -18778,7 +18778,7 @@ export const k = styled('div')({ color: SIZE });",
             &memory_resolver(CONSTANT_MODULES),
         )
         .unwrap();
-        assert!(without_imports.dependencies.is_empty());
+        assert_eq!(without_imports.dependencies.len(), 0);
         let without_constants = extract_with_modules(
             "/src/Handler.tsx",
             "import { Box } from '@devup-ui/react';\nimport { handler } from './handler';\nexport const a = <Box onClick={handler} color='red' />;",

libs/extractor/src/tailwind.rs

@@ -284,7 +284,7 @@ pub struct TailwindClass {
 /// non-overlapping) but mutates the existing buffer instead of allocating a new
 /// `String`. `needle` must be non-empty.
 fn remove_all_substr(haystack: &mut String, needle: &str) {
-    debug_assert!(!needle.is_empty());
+    debug_assert_ne!(needle, "");
     let mut search_from = 0;
     while let Some(rel) = haystack[search_from..].find(needle) {
         let at = search_from + rel;
@@ -3934,7 +3934,7 @@ mod tests {
     #[test]
     fn test_empty_string() {
         let styles = parse_tailwind_to_styles("");
-        assert!(styles.is_empty());
+        assert_eq!(styles, vec![]);
     }
 
     #[test]

packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx

@@ -5,25 +5,35 @@ import { Checkbox } from '../index'
 
 describe('Checkbox', () => {
   it('should render basic checkbox', () => {
-    const { container } = render(<Checkbox>Test Checkbox</Checkbox>)
+    const { container } = render(
+      <Checkbox id="checkbox">Test Checkbox</Checkbox>,
+    )
     expect(container).toMatchSnapshot()
   })
 
   it('should render checked checkbox', () => {
-    const { container } = render(<Checkbox checked>Test Checkbox</Checkbox>)
+    const { container } = render(
+      <Checkbox checked id="checkbox">
+        Test Checkbox
+      </Checkbox>,
+    )
     expect(container).toMatchSnapshot()
     expect(container.querySelector('input')).toBeChecked()
   })
 
   it('should render disabled checkbox', () => {
-    const { container } = render(<Checkbox disabled>Test Checkbox</Checkbox>)
+    const { container } = render(
+      <Checkbox disabled id="checkbox">
+        Test Checkbox
+      </Checkbox>,
+    )
     expect(container).toMatchSnapshot()
     expect(container.querySelector('input')).toBeDisabled()
   })
 
   it('should render disabled and checked checkbox', () => {
     const { container } = render(
-      <Checkbox checked disabled>
+      <Checkbox checked disabled id="checkbox">
         Test Checkbox
       </Checkbox>,
     )
@@ -34,7 +44,7 @@ describe('Checkbox', () => {
 
   it('should render checkbox with custom child', () => {
     const { container } = render(
-      <Checkbox>
+      <Checkbox id="checkbox">
         <div>Custom Child</div>
       </Checkbox>,
     )
@@ -45,7 +55,7 @@ describe('Checkbox', () => {
   it('should call onChange with true when checkbox is clicked and unchecked', async () => {
     const onChange = mock()
     const { container } = render(
-      <Checkbox checked={false} onChange={onChange}>
+      <Checkbox checked={false} id="checkbox" onChange={onChange}>
         Test Checkbox
       </Checkbox>,
     )
@@ -64,7 +74,7 @@ describe('Checkbox', () => {
   it('should call onChange with false when checkbox is clicked and checked', async () => {
     const onChange = mock()
     const { container } = render(
-      <Checkbox checked={true} onChange={onChange}>
+      <Checkbox checked={true} id="checkbox" onChange={onChange}>
         Test Checkbox
       </Checkbox>,
     )
@@ -82,7 +92,7 @@ describe('Checkbox', () => {
   it('should not call onChange when disabled is true', async () => {
     const onChange = mock()
     const { container } = render(
-      <Checkbox disabled onChange={onChange}>
+      <Checkbox disabled id="checkbox" onChange={onChange}>
         Test Checkbox
       </Checkbox>,
     )
@@ -97,7 +107,9 @@ describe('Checkbox', () => {
   })
 
   it('should not call onChange when onChange prop is not provided', async () => {
-    const { container } = render(<Checkbox>Test Checkbox</Checkbox>)
+    const { container } = render(
+      <Checkbox id="checkbox">Test Checkbox</Checkbox>,
+    )
 
     const input = container.querySelector('input')
 
@@ -113,7 +125,7 @@ describe('Checkbox', () => {
   it('should not call onChange when both disabled and onChange are provided', async () => {
     const onChange = mock()
     const { container } = render(
-      <Checkbox checked={false} disabled onChange={onChange}>
+      <Checkbox checked={false} disabled id="checkbox" onChange={onChange}>
         Test Checkbox
       </Checkbox>,
     )
@@ -130,7 +142,7 @@ describe('Checkbox', () => {
   it('should handle label click and trigger onChange', async () => {
     const onChange = mock()
     const { container } = render(
-      <Checkbox checked={false} onChange={onChange}>
+      <Checkbox checked={false} id="checkbox" onChange={onChange}>
         Test Checkbox
       </Checkbox>,
     )
@@ -148,7 +160,7 @@ describe('Checkbox', () => {
   it('should not trigger onChange on label click when disabled', async () => {
     const onChange = mock()
     const { container } = render(
-      <Checkbox disabled onChange={onChange}>
+      <Checkbox disabled id="checkbox" onChange={onChange}>
         Test Checkbox
       </Checkbox>,
     )
@@ -165,7 +177,7 @@ describe('Checkbox', () => {
   it('should pass correct event target checked value to onChange', async () => {
     const onChange = mock()
     const { container } = render(
-      <Checkbox checked={false} onChange={onChange}>
+      <Checkbox checked={false} id="checkbox" onChange={onChange}>
         Test Checkbox
       </Checkbox>,
     )
@@ -181,23 +193,31 @@ describe('Checkbox', () => {
   })
 
   it('should have proper accessibility attributes', () => {
-    const { container } = render(<Checkbox>Test Checkbox</Checkbox>)
+    const { container } = render(
+      <Checkbox id="checkbox">Test Checkbox</Checkbox>,
+    )
 
     const input = container.querySelector('input')
 
     expect(input).toHaveAttribute('type', 'checkbox')
   })
 
   it('should display CheckIcon when checked', () => {
-    const { container } = render(<Checkbox checked>Test Checkbox</Checkbox>)
+    const { container } = render(
+      <Checkbox checked id="checkbox">
+        Test Checkbox
+      </Checkbox>,
+    )
 
     const checkIcon = container.querySelector('svg')
     expect(checkIcon).toBeInTheDocument()
   })
 
   it('should not display CheckIcon when unchecked', () => {
     const { container } = render(
-      <Checkbox checked={false}>Test Checkbox</Checkbox>,
+      <Checkbox checked={false} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     const checkIcon = container.querySelector('svg')
@@ -208,6 +228,7 @@ describe('Checkbox', () => {
     const { container } = render(
       <Checkbox
         data-testid="custom-checkbox"
+        id="checkbox"
         name="test-name"
         value="test-value"
       >
@@ -231,7 +252,9 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+      <Checkbox colors={customColors} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     expect(container).toMatchSnapshot()
@@ -244,7 +267,9 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={partialColors}>Test Checkbox</Checkbox>,
+      <Checkbox colors={partialColors} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     expect(container).toMatchSnapshot()
@@ -260,7 +285,7 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox checked colors={customColors}>
+      <Checkbox checked colors={customColors} id="checkbox">
         Test Checkbox
       </Checkbox>,
     )
@@ -278,7 +303,7 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors} disabled>
+      <Checkbox colors={customColors} disabled id="checkbox">
         Test Checkbox
       </Checkbox>,
     )
@@ -292,7 +317,9 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+      <Checkbox colors={customColors} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     const input = container.querySelector('input')
@@ -307,7 +334,9 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+      <Checkbox colors={customColors} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     const input = container.querySelector('input')
@@ -322,7 +351,9 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+      <Checkbox colors={customColors} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     const input = container.querySelector('span')
@@ -337,7 +368,9 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+      <Checkbox colors={customColors} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     const input = container.querySelector('input')
@@ -352,7 +385,7 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox checked colors={customColors}>
+      <Checkbox checked colors={customColors} id="checkbox">
         Test Checkbox
       </Checkbox>,
     )
@@ -373,7 +406,9 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+      <Checkbox colors={customColors} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     const input = container.querySelector('input')
@@ -385,7 +420,9 @@ describe('Checkbox', () => {
   })
 
   it('should not apply CSS variables when colors prop is not provided', () => {
-    const { container } = render(<Checkbox>Test Checkbox</Checkbox>)
+    const { container } = render(
+      <Checkbox id="checkbox">Test Checkbox</Checkbox>,
+    )
 
     const input = container.querySelector('input')
     // CSS 변수가 undefined로 설정되지 않아야 함
@@ -407,7 +444,12 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox checked={false} colors={customColors} onChange={onChange}>
+      <Checkbox
+        checked={false}
+        colors={customColors}
+        id="checkbox"
+        onChange={onChange}
+      >
         Test Checkbox
       </Checkbox>,
     )