fix: removing the default 0 tabIndex

src/autocomplete/Autocomplete.tsx

@@ -291,7 +291,7 @@ export const Autocomplete = ({
   selectProps,
   prefix,
   suffix,
-  tabIndex = 0,
+  tabIndex,
   search,
   accessibilityStatus = '',
   accessibilityHintText = '',

src/autocomplete/__tests__/Autocomplete.test.tsx

@@ -877,11 +877,11 @@ describe('Autocomplete', () => {
     });
   });
 
-  it('should have a 0 tabIndex value by default', () => {
+  it('should have a null tabIndex value by default', () => {
     render(<Autocomplete options={['daniele', 'isaac']} />);
 
     const input: any = screen.getByRole('combobox');
-    expect(input.getAttribute('tabindex')).toBe('0');
+    expect(input.getAttribute('tabindex')).toBeNull();
   });
 
   it('should accept tabIndex attribute', () => {

src/details/Details.tsx

@@ -55,7 +55,7 @@ export const Details = ({
   openClassName,
   summaryClassName,
   summaryTextClassName,
-  tabIndex = 0,
+  tabIndex,
   summaryTextProps,
 }: DetailsProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(open);

src/details/__test__/Details.test.tsx

@@ -160,7 +160,7 @@ describe('Details', () => {
     expect(container.querySelector('.details-text-class-name.open')).toBeNull();
   });
 
-  it('should have 0 tabIndex value by default', () => {
+  it('should have null tabIndex value by default', () => {
     const { container } = render(
       <Details summary="my summary" summaryClassName="summary-class-name">
         my details
@@ -169,7 +169,7 @@ describe('Details', () => {
 
     const summary: any = container.querySelector('.summary-class-name');
 
-    expect(summary.getAttribute('tabindex')).toBe('0');
+    expect(summary.getAttribute('tabindex')).toBeNull();
   });
 
   it('should accept tabIndex attribute', () => {

src/formDate/Date.tsx

@@ -23,7 +23,7 @@ export const DateComponent = ({
   classNameInput,
   disabled,
   maxLength = 2,
-  tabIndex = 0,
+  tabIndex,
 }: DateProps) => (
   <label
     style={{ display: 'flex', flexDirection: 'column' }}

src/formDate/__test__/FormDate.test.tsx

@@ -329,7 +329,7 @@ describe('FormInput', () => {
     expect(inputField[2].getAttribute('tabindex')).toBe('0');
   });
 
-  it('should have 0 tabIndex value for the inputs by default', () => {
+  it('should not have 0 tabIndex value for the inputs by default', () => {
     const { container } = render(
       <FormDate
         dateFormat="dd/mm/yyyy"
@@ -341,8 +341,8 @@ describe('FormInput', () => {
     );
 
     const inputField: any = container.querySelectorAll('input');
-    expect(inputField[0].getAttribute('tabindex')).toBe('0');
-    expect(inputField[1].getAttribute('tabindex')).toBe('0');
-    expect(inputField[2].getAttribute('tabindex')).toBe('0');
+    expect(inputField[0].getAttribute('tabindex')).toBeNull();
+    expect(inputField[1].getAttribute('tabindex')).toBeNull();
+    expect(inputField[2].getAttribute('tabindex')).toBeNull();
   });
 });

src/formInput/FormInput.tsx

@@ -179,7 +179,7 @@ export const FormInput = ({
   hint,
   variant = 'normal',
   inputDivProps = { style: { display: 'flex' } },
-  tabIndex = 0,
+  tabIndex,
   hiddenErrorText = '',
   hiddenErrorTextProps,
 }: FormInputProps) => {

src/formInput/__tests__/FormInput.test.tsx

@@ -731,13 +731,13 @@ describe('FormInput', () => {
     expect(input.getAttribute('aria-label')).toBeNull();
   });
 
-  it('should have a 0 tabIndex value by default', () => {
+  it('should have a null tabIndex value by default', () => {
     render(
       <FormInput name="password" type="text" value="test" hiddenErrorText="" />
     );
 
     const input: any = screen.getByRole('textbox');
-    expect(input.getAttribute('tabindex')).toBe('0');
+    expect(input.getAttribute('tabindex')).toBeNull();
   });
 
   it('should accept tabIndex attribute', () => {

src/formSelect/FormSelect.tsx

@@ -162,7 +162,7 @@ export const FormSelect = ({
   nullOption,
   containerProps,
   defaultValue,
-  tabIndex = 0,
+  tabIndex,
   variant = 'normal',
   disabled = false,
   selectProps,

src/formSelect/__test__/FormSelect.test.tsx

@@ -471,10 +471,10 @@ describe('FormSelect', () => {
     expect(container).toBeInTheDocument();
   });
 
-  it('should have a 0 tabIndex value by default', () => {
+  it('should have a null tabIndex value by default', () => {
     const { container } = render(<FormSelect id="select" />);
     const select: any = container.querySelector('#select');
-    expect(select.getAttribute('tabindex')).toBe('0');
+    expect(select.getAttribute('tabindex')).toBeNull();
   });
 
   it('should take tabIndex attribute', () => {

src/multiSelect/MultiSelect.tsx

@@ -160,7 +160,7 @@ export const MultiSelect = ({
   onRemove,
   onRemoveAll,
   onSelect,
-  tabIndex = 0,
+  tabIndex,
 }: MultiSelectProps) => {
   const [state, dispatch] = useReducer(multiSelectReducer, {
     selected: selectOptions

src/multiSelect/__test__/MultiSelect.test.tsx

@@ -91,13 +91,13 @@ describe('MultiSelect', () => {
       );
     });
 
-    it('should have a 0 tabindex value by default', () => {
+    it('should have a null tabindex value by default', () => {
       const options: MultiSelectOption[] = [];
 
       render(<MultiSelect selectOptions={options} />);
 
       const input = screen.getByRole('combobox');
-      expect(input.getAttribute('tabindex')).toBe('0');
+      expect(input.getAttribute('tabindex')).toBeNull();
     });
 
     it('should accept tabIndex attribute', () => {

src/progress/Progress.tsx

@@ -38,7 +38,7 @@ export const Progress = ({
   id,
   labelClassName,
   value,
-  tabIndex = 0,
+  tabIndex,
 }: ProgressProps) => (
   <div tabIndex={tabIndex} data-testid={id}>
     <label className={labelClassName} htmlFor={id}>{`${label}: `}</label>

src/progress/__tests__/Progress.test.tsx

@@ -47,11 +47,11 @@ describe('Progress', () => {
     expect(container.querySelector('progress>div')?.className).toBe('my-class');
   });
 
-  it('should have 0 tabIndex value by default', () => {
+  it('should have null tabIndex value by default', () => {
     render(<Progress id="progress-id" label="Progress" max={100} value={80} />);
 
     const container = screen.getByTestId('progress-id');
-    expect(container.getAttribute('tabindex')).toBe('0');
+    expect(container.getAttribute('tabindex')).toBeNull();
   });
 
   it('should accept tabIndex attribute', () => {

src/range/Range.tsx

@@ -71,7 +71,7 @@ export const Range = ({
   onChangeMin,
   inputClass,
   showTooltip = false,
-  tabIndex = 0,
+  tabIndex,
   ...props
 }: RangeProps) => {
   const [defaultValue, setDefaultValue] = React.useState<number>(value);

src/range/__tests__/Range.test.tsx

@@ -139,11 +139,11 @@ describe('Range', () => {
     expect(handleChange).not.toHaveBeenCalled();
   });
 
-  it('should have a 0 tabIndex value by default', () => {
+  it('should have a null tabIndex value by default', () => {
     render(<Range min={0} max={100} value={50} />);
 
     const slider = screen.getByRole('slider');
-    expect(slider.getAttribute('tabindex')).toBe('0');
+    expect(slider.getAttribute('tabindex')).toBeNull();
   });
 
   it('should accept tabIndex attribute', () => {

src/table/Table.tsx

@@ -115,7 +115,7 @@ export const Table = ({
   searchProps,
   customHeaderLabels,
   trProps,
-  tabIndex = 0,
+  tabIndex,
 }: TableProps) => {
   const { items, requestSort, sortConfig } = useSortableData(dataSource);
   const [selectedHeader, setSelectedHeader] = React.useState('');

src/table/__tests__/Table.test.tsx

@@ -289,11 +289,11 @@ describe('Table', () => {
     expect(row.innerHTML).not.toContain('<span>1</span>');
   });
 
-  it('should have 0 tabIndex value by default', () => {
+  it('should have null tabIndex value by default', () => {
     render(<Table dataSource={values} />);
 
     const container = screen.getByTestId('table-container');
-    expect(container.getAttribute('tabindex')).toBe('0');
+    expect(container.getAttribute('tabindex')).toBeNull();
   });
 
   it('should accept tabIndex attribute', () => {