Define strategy how to transfer HTML attributes to the component and …

…accordingly modify the `TabsItem` component

CONTRIBUTING.md

@@ -164,6 +164,16 @@ To keep React UI consistent and predictable the following guidelines should be o
 
 1. If component accepts the `children` prop it should be either required or the element
    should return `null` when no children are provided.
+2. When forwarding HTML attributes to the component the following rules should
+    be observed:
+    1. If the component internally instantiates an interactive
+        (clickable/editable) element, the attributes should be forwarded to it.
+    2. If the component internally instantiates multiple interactive
+        (clickable/editable) elements, the attributes should be forwarded to
+        them.
+    3. If the component does not internally instantiate an interactive
+        (clickable/editable) element, the attributes should be forwarded to the
+        root element of the component.
 
 ## Documenting
 

src/components/Tabs/README.md

@@ -159,7 +159,7 @@ React.createElement(() => {
 In addition to the options below in the [component's API](#api) section, you
 can specify [React synthetic events] or **any HTML attribute you like.** All
 attributes that don't interfere with the API are forwarded to the `<nav>` HTML
-element in case of `Tabs` component and to the `<li>` HTML element in
+element in case of `Tabs` component and to the `<a>` HTML element in
 case of `TabsItem`. This enables making the component interactive and helps
 to improve its accessibility.
 

src/components/Tabs/TabsItem.jsx

@@ -16,7 +16,6 @@ export const TabsItem = ({
   ...restProps
 }) => (
   <li
-    {...transferProps(restProps)}
     className={classNames(
       styles.root,
       isActive && styles.isRootActive,
@@ -25,6 +24,7 @@ export const TabsItem = ({
     key={href}
   >
     <a
+      {...transferProps(restProps)}
       className={styles.link}
       href={href}
       id={id && `${id}__link`}