Docs/fix undocumented logic and various fixes

uilib-docs/src/components/header.js

@@ -13,7 +13,7 @@ const Header = ({githubDomain}) => {
 
       <div className="links">
         <Link to="/getting-started/setup">Docs</Link>
-        <a target="_blank" href={githubDomain}>
+        <a target="_blank" rel="noreferrer" href={githubDomain}>
           GitHub
         </a>
       </div>

uilib-docs/src/components/navbar/index.js

@@ -72,10 +72,10 @@ class Navbar extends Component {
     });
     return (
       <div className="search">
-        <img src={searchIcon} />
+        <img src={searchIcon} alt="search" />
         <input placeholder="Search..." onChange={this.setFilter} value={filter} />
         <button className={clearButtonClassName} onClick={this.resetSearch}>
-          <img src={clearIcon} />
+          <img src={clearIcon} alt="clear search" />
         </button>
       </div>
     );

uilib-docs/src/components/navbar/item.js

@@ -3,28 +3,27 @@ import Link from 'gatsby-link';
 import _ from 'lodash';
 import classnames from 'classnames';
 
-const undocumentedGroups = ['Incubator'];
-
 export default ({id, link, components, currentPage, onLinkClick}) => {
   const hasChildren = _.size(components) > 1;
 
   if (!hasChildren) {
     return <ItemEntry id={id} link={link} currentPage={currentPage} onLinkClick={onLinkClick} />;
   } else {
+    const isUndocumented = _.isUndefined(_.find(components, {node: {displayName: id}}));
     return (
       <li key={id}>
-        {undocumentedGroups.includes(id) ? (
-          <span class={classnames('entry', {selected: id === currentPage})}>{id}</span>
+        {isUndocumented ? (
+          <span className={classnames('entry', {selected: id === currentPage})}>{id}</span>
         ) : (
           <Link key={id} to={`/docs/${id}/`} onClick={onLinkClick}>
-            <span class={classnames('entry', {selected: id === currentPage})}>{id}</span>
+            <span className={classnames('entry', {selected: id === currentPage})}>{id}</span>
           </Link>
         )}
 
-        <ul class="nested">
+        <ul className="nested">
           {_.map(_.filter(components, c => c.node.displayName !== id), c => {
             return (
-              <ItemEntry id={c.node.displayName} currentPage={currentPage} onLinkClick={onLinkClick}/>
+              <ItemEntry id={c.node.displayName} key={c.node.displayName} currentPage={currentPage} onLinkClick={onLinkClick}/>
             );
           })}
         </ul>
@@ -37,7 +36,7 @@ const ItemEntry = ({id, link, currentPage, onLinkClick}) => {
   return (
     <li key={id}>
       <Link key={id} to={link || `/docs/${id}/`} onClick={onLinkClick}>
-        <span class={classnames('entry', {selected: id === currentPage})}>
+        <span className={classnames('entry', {selected: id === currentPage})}>
           {id}
         </span>
       </Link>

uilib-docs/src/pages/sections/CodeSection.jsx

@@ -1,4 +1,4 @@
-import React, {useState, useCallback} from 'react';
+import React, {useState} from 'react';
 import Link from 'gatsby-link';
 import classnames from 'classnames';
 
@@ -37,7 +37,14 @@ const TabBar = ({onChangeIndex, selectedIndex}) => {
       {['Foundation', 'Theme', 'Modifiers'].map((title, index) => {
         const tabClassName = classnames('tab', {selected: selectedIndex === index});
         return (
-          <div className={tabClassName} onClick={() => onChangeIndex(index)}>
+          <div
+            key={title}
+            className={tabClassName}
+            onClick={() => onChangeIndex(index)}
+            onKeyPress={() => onChangeIndex(index)}
+            role="tab"
+            tabIndex={index}
+          >
             {title}
           </div>
         );

uilib-docs/src/pages/sections/ComponentsSection.jsx

@@ -15,7 +15,7 @@ export default () => {
           <button className="dark">View Docs</button>
         </Link>
       </div>
-      <img src={showcase} />
+      <img src={showcase} alt="showcase" />
     </div>
   );
 };

uilib-docs/src/pages/sections/InfoSection.jsx

@@ -5,32 +5,32 @@ import expoSnackLink from '../../data/expoSnackLink';
 
 export default () => {
   return (
-    <div class="info-section">
+    <div className="info-section">
       <div className="flex-row">
         <div className="column">
           <h6 className="title">Try our Expo App</h6>
-          <img className="qr" src={qr} />
+          <img className="qr" src={qr} alt="QR code" />
         </div>
         <div className="column">
           <h6 className="title">Find Us</h6>
           <ul>
             <li>
-              <a target="_blank" href="https://twitter.com/rnuilib">
+              <a target="_blank" rel="noreferrer" href="https://twitter.com/rnuilib">
                 Twitter
               </a>
             </li>
             <li>
-              <a target="_blank" href="https://discord.gg/2eW4g6Z">
+              <a target="_blank" rel="noreferrer" href="https://discord.gg/2eW4g6Z">
                 Discord
               </a>
             </li>
             <li>
-              <a target="_blank" href={expoSnackLink}>
+              <a target="_blank" rel="noreferrer" href={expoSnackLink}>
                 Expo-Snack
               </a>
             </li>
             <li>
-              <a target="_blank" href="https://github.com/wix/react-native-ui-lib">
+              <a target="_blank" rel="noreferrer" href="https://github.com/wix/react-native-ui-lib">
                 Github
               </a>
             </li>

uilib-docs/src/pages/sections/IntroSection.jsx

@@ -9,13 +9,13 @@ import expoSnackLink from '../../data/expoSnackLink';
 export default () => {
   return (
     <div className="intro">
-      <img src={introCover} className="intro-cover" />
+      <img src={introCover} alt="showcase" className="intro-cover" />
       <div className="intro-content">
         <p>
           <span className="lib-name">RNUI</span> is a UI Toolset & Components Library for React Native
         </p>
         <div className="git-stars">
-          <img src={goldStar} />
+          <img src={goldStar} alt="gold star" />
           <span className="star-count">2.9k</span>
         </div>
 

uilib-docs/src/pages/sections/LibrariesSection.jsx

@@ -25,7 +25,7 @@ const Library = ({image, name, link}) => {
   return (
     <a href={link} target="_blank" rel="noopener noreferrer">
       <div className="library">
-        <img src={image} />
+        <img src={image} alt={name} />
         <h5 className="name">{name}</h5>
       </div>
     </a>

uilib-docs/src/pages/sections/RtlAndAccessibilitySection.jsx

@@ -20,7 +20,7 @@ export default () => {
 const Card = ({image, title, description}) => {
   return (
     <div className="card">
-      <img src={image} />
+      <img src={image} alt={title} />
       <h3 className="title">{title}</h3>
       <p>{description}</p>
     </div>

uilib-docs/src/templates/component.js

@@ -102,7 +102,7 @@ export default class ComponentTemplate extends Component {
 
           <ul>
             {_.map(extendLinks, link => (
-              <li className="link">{link}</li>
+              <li className="link" key={link}>{link}</li>
             ))}
           </ul>
 
@@ -135,7 +135,7 @@ export default class ComponentTemplate extends Component {
       return (
         <div className="notes">
           <span className="title">
-            <img src={importantIcon} /> Important
+            <img src={importantIcon} alt="important" /> Important
           </span>
           {_.map(notes, (note, i) => (
             <div key={i}>{note}</div>
@@ -193,7 +193,7 @@ export default class ComponentTemplate extends Component {
               <h2 className="title inline">{selectedComponent.displayName}</h2>
               {_.map(examples, example => {
                 return (
-                  <span className="code-example">
+                  <span key={example} className="code-example">
                     (
                     <a className="inline" target="_blank" rel="noopener noreferrer" href={example}>
                       code example
@@ -249,7 +249,7 @@ const ComponentAPI = ({props, href = ''}) => {
         const isFocused = _.includes(href, `#${prop.name}`);
         const titleClassname = classnames('title', {focused: isFocused});
         return (
-          <div className="prop-info">
+          <div key={prop.name} className="prop-info">
             <a name={prop.name}>
               <h5 className={titleClassname}>{prop.name}</h5>
             </a>
@@ -271,7 +271,7 @@ const TableOfContent = ({props}) => {
 
         {_.map(props, prop => {
           return (
-            <li>
+            <li key={prop.name}>
               <a href={`#${prop.name}`}>{prop.name}</a>
             </li>
           );