@moda/om 21.6.7 → 21.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "21.6.7",
+  "version": "21.6.8",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/SearchInput/SearchInput.test.tsx

@@ -8,11 +8,11 @@ describe('SearchInput', () => {
   it('clears the input when the button is clicked', async () => {
     render(<SearchInput value='Hello' />);
 
-    expect(screen.getByRole('textbox')).toHaveValue('Hello');
+    expect(screen.getByRole('searchbox')).toHaveValue('Hello');
 
     await userEvent.click(screen.getByRole('button'));
 
-    expect(screen.getByRole('textbox')).toHaveValue('');
+    expect(screen.getByRole('searchbox')).toHaveValue('');
   });
 
   it('calls onChange when typing', async () => {
@@ -20,7 +20,7 @@ describe('SearchInput', () => {
 
     render(<SearchInput value='' onChange={onChange} />);
 
-    await userEvent.type(screen.getByRole('textbox'), 'Greetings');
+    await userEvent.type(screen.getByRole('searchbox'), 'Greetings');
 
     expect(onChange).toHaveBeenCalledWith('Greetings');
 

package/src/components/SearchInput/SearchInput.tsx

@@ -52,11 +52,12 @@ export const SearchInput: React.FC<SearchInputProps> = ({
 
   return (
     <div className={classNames('SearchInput', className)}>
-      <div className='SearchInput__icon'>
+      <div className='SearchInput__icon' aria-hidden='true'>
         <SearchIcon height={`${searchIconSize}px`} width={`${searchIconSize}px`} />
       </div>
 
       <TextInput
+        type='search'
         className={classNames('SearchInput__input', {
           'SearchInput__input--round-borders': roundBorders,
           'SearchInput__input--no-borders': noBorders
@@ -68,8 +69,13 @@ export const SearchInput: React.FC<SearchInputProps> = ({
       />
 
       {controlledValue && (
-        <Clickable className='SearchInput__clear' onClick={handleClear} type='reset'>
-          <ExitIcon />
+        <Clickable
+          className='SearchInput__clear'
+          onClick={handleClear}
+          type='reset'
+          aria-label='Clear search'
+        >
+          <ExitIcon aria-hidden='true' />
         </Clickable>
       )}
     </div>