Feature/tab index

src/button/Button.tsx

@@ -45,7 +45,7 @@ type ButtonProps = React.HTMLAttributes<HTMLButtonElement> & {
    */
   isLoading?: boolean;
   /**
-   * a custom loding label
+   * a custom loading label
    */
   loadingLabel?: string;
   /**

src/button/__tests__/Button.test.tsx

@@ -242,4 +242,12 @@ describe('Button', () => {
     expect(buttons[2].getAttribute('aria-label')).toBe('submit-button');
     expect(buttons[3].getAttribute('aria-label')).toBe('reset-button');
   });
+
+  it('should accept tabIndex attribute', () => {
+    render(<Button label="X" tabIndex={1} />);
+
+    const button: any = screen.getByRole('button');
+
+    expect(button.getAttribute('tabindex')).toBe('1');
+  });
 });

src/copyToClipboard/CopyToClipboard.tsx

@@ -12,7 +12,7 @@ type CopyToClipboardProps = Omit<
 export const CopyToClipboard = React.forwardRef<
   HTMLElement,
   CopyToClipboardProps
->(({ icon, onCopy, text, children, ...props }, ref) => {
+>(({ icon, onCopy, text, children, tabIndex = 0, ...props }, ref) => {
   const onClickHandler = () => {
     const inputRef = ref as MutableRefObject<HTMLElement>;
     document.execCommand('copy');
@@ -24,7 +24,7 @@ export const CopyToClipboard = React.forwardRef<
         );
   };
   return (
-    <button onClick={onClickHandler} {...props}>
+    <button onClick={onClickHandler} {...props} tabIndex={tabIndex}>
       {icon}
       {children}
     </button>

src/copyToClipboard/__test__/CopyToClipboard.test.tsx

@@ -153,4 +153,32 @@ describe('CopyToClipboard', () => {
     const copiedValue = screen.getByTestId('copied');
     expect(copiedValue.innerHTML).toBe('helloWorld');
   });
+
+  it('should have 0 tabIndex value by default', () => {
+    const onCopyHandler = jest.fn();
+
+    render(
+      <CopyToClipboard onCopy={onCopyHandler}>
+        <div>custom</div>
+      </CopyToClipboard>
+    );
+
+    const button: any = screen.getByRole('button');
+
+    expect(button.getAttribute('tabindex')).toBe('0');
+  });
+
+  it('should accept tabIndex attribute', () => {
+    const onCopyHandler = jest.fn();
+
+    render(
+      <CopyToClipboard tabIndex={1} onCopy={onCopyHandler}>
+        <div>custom</div>
+      </CopyToClipboard>
+    );
+
+    const button: any = screen.getByRole('button');
+
+    expect(button.getAttribute('tabindex')).toBe('1');
+  });
 });

src/details/Details.tsx

@@ -33,6 +33,10 @@ type DetailsProps = {
    * summary text class name
    */
   summaryTextClassName?: string;
+  /**
+   * details tab index
+   */
+  tabIndex?: number;
 };
 
 const OPEN: string = 'open';
@@ -46,6 +50,7 @@ export const Details = ({
   openClassName,
   summaryClassName,
   summaryTextClassName,
+  tabIndex = 0,
 }: DetailsProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(open);
 
@@ -55,7 +60,11 @@ export const Details = ({
 
   return (
     <details className={detailsClassName} open={open}>
-      <summary className={summaryClassName} onClick={handleOnChange}>
+      <summary
+        className={summaryClassName}
+        onClick={handleOnChange}
+        tabIndex={tabIndex}
+      >
         <span className={summaryTextClassName}>{summary}</span>
       </summary>
       <div

src/details/__test__/Details.test.tsx

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

src/formDate/Date.tsx

@@ -8,6 +8,7 @@ type DateProps = DateType & {
   disabled?: boolean;
   maxLength?: number;
   handleChange: (evt: React.FormEvent<HTMLInputElement>) => void;
+  tabIndex?: number;
 };
 
 export const DateComponent = ({
@@ -22,6 +23,7 @@ export const DateComponent = ({
   classNameInput,
   disabled,
   maxLength = 2,
+  tabIndex = 0,
 }: DateProps) => (
   <label
     style={{ display: 'flex', flexDirection: 'column' }}
@@ -41,6 +43,7 @@ export const DateComponent = ({
       inputMode="numeric"
       maxLength={maxLength}
       pattern="[0-9]*"
+      tabIndex={tabIndex}
     />
   </label>
 );

src/formDate/FormDate.tsx

@@ -9,6 +9,7 @@ export type DateType = {
   classNameLabel?: string;
   classNameSpan?: string;
   customLabel?: JSX.Element;
+  tabIndex?: number;
 };
 
 type ErrorPosition = 'top' | 'bottom';
@@ -51,6 +52,8 @@ type FormDateProps = {
    * classNameSpan?: string;
    * // if you want to pass a custom Label (i.e. an h1 etc)
    * customLabel?: JSX.Element;
+   * // if you want to pass tab index for the input
+   * tabIndex?: number;
    */
   yearProps?: DateType;
   /**
@@ -65,6 +68,8 @@ type FormDateProps = {
    * classNameSpan?: string;
    * // if you want to pass a custom Label (i.e. an h1 etc)
    * customLabel?: JSX.Element;
+   * // if you want to pass tab index for the input
+   * tabIndex?: number;
    */
   monthProps?: DateType;
   /**
@@ -79,6 +84,8 @@ type FormDateProps = {
    * classNameSpan?: string;
    * // if you want to pass a custom Label (i.e. an h1 etc)
    * customLabel?: JSX.Element;
+   * // if you want to pass tab index for the input
+   * tabIndex?: number;
    */
   dayProps?: DateType;
 
@@ -217,6 +224,7 @@ export const FormDate = ({
             label={yearProps?.label}
             classNameInput={[yearProps?.classNameInput, inputClass].join(' ')}
             disabled={disabled}
+            tabIndex={yearProps?.tabIndex}
           />
         );
       case 'm':
@@ -233,6 +241,7 @@ export const FormDate = ({
             label={monthProps?.label}
             classNameInput={[monthProps?.classNameInput, inputClass].join(' ')}
             disabled={disabled}
+            tabIndex={monthProps?.tabIndex}
           />
         );
       case 'd':
@@ -249,6 +258,7 @@ export const FormDate = ({
             label={dayProps?.label}
             classNameInput={[dayProps?.classNameInput, inputClass].join(' ')}
             disabled={disabled}
+            tabIndex={dayProps?.tabIndex}
           />
         );
       default:

src/formDate/__test__/FormDate.test.tsx

@@ -284,4 +284,38 @@ describe('FormInput', () => {
     expect(input[1].innerHTML).toBe('');
     expect(input[2].innerHTML).toBe('');
   });
+
+  it('should accept tabIndex attribute for year and month and day inputs', () => {
+    const { container } = render(
+      <FormDate
+        dateFormat="dd/mm/yyyy"
+        handleValidity={jest.fn()}
+        yearProps={{ label: 'Year', tabIndex: 0 }}
+        monthProps={{ label: 'Month', tabIndex: 1 }}
+        dayProps={{ label: 'Day', tabIndex: 0 }}
+      />
+    );
+
+    const inputField: any = container.querySelectorAll('input');
+    expect(inputField[0].getAttribute('tabindex')).toBe('0');
+    expect(inputField[1].getAttribute('tabindex')).toBe('1');
+    expect(inputField[2].getAttribute('tabindex')).toBe('0');
+  });
+
+  it('should have 0 tabIndex value for the inputs by default', () => {
+    const { container } = render(
+      <FormDate
+        dateFormat="dd/mm/yyyy"
+        handleValidity={jest.fn()}
+        yearProps={{ label: 'Year' }}
+        monthProps={{ label: 'Month' }}
+        dayProps={{ label: 'Day' }}
+      />
+    );
+
+    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');
+  });
 });

stories/Details/Documentation.stories.mdx

@@ -33,6 +33,7 @@ An example with all the available properties is:
   summaryClassName="summary-class-name"
   summaryTextClassName="summar-text-class-name"
   open={true}
+  tabIndex={0}
 >
   my-detail
 </Details>

stories/FormDate/Documentation.stories.mdx

@@ -54,19 +54,22 @@ return (
         customLabel: <CustomComponent>Year</CustomComponent>, //you can specify your customLabel component
         classNameLabel: 'yearLabel',
         classNameSpan: 'span',
+        tabIndex: 1,
       }}
       monthProps={{
         label: 'Month',
         classNameInput: 'classInput',
         classNameLabel: 'monthLabel',
         classNameSpan: 'classSpan',
+        tabIndex: 0,
       }}
       dayProps={{
         classNameLabel: 'dayLabel',
         label: 'Day',
         classNameInput: 'classInput',
         classNameLabel: 'classDayLabel',
         classNameSpan: 'classSpan',
+        tabIndex: 0,
       }}
       day="29"
       month="07"

stories/liveEdit/DetailsLive.tsx

@@ -5,7 +5,7 @@ import { Details } from '../../src/details/Details';
 const DetailsDemo = `
   function DetailsDemo() {
     return (
-      <Details summary="headline summary">some details</Details>
+      <Details summary="headline summary" tabIndex={0}>some details</Details>
     )
   }
 `.trim();

stories/liveEdit/FormDateLive.tsx

@@ -23,21 +23,24 @@ function FormDateDemo() {
           classNameInput: "",
           classNameLabel: "",
           classNameSpan: "",
-          customLabel: <></>
+          customLabel: <></>,
+          tabIndex: 0
         }}
         monthProps={{
           label: "",
           classNameInput: "",
           classNameLabel: "",
           classNameSpan: "",
-          customLabel: <></>
+          customLabel: <></>,
+          tabIndex: 0
         }}
         dayProps={{
           label: "",
           classNameInput: "",
           classNameLabel: "",
           classNameSpan: "",
-          customLabel: <></>
+          customLabel: <></>,
+          tabIndex: 0
         }}
         displayError={false}
         errorMessage=""