Docs - various fixes

Author: M-i-k-e-l

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

@@ -64,14 +64,14 @@ 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>
     );
@@ -96,16 +96,17 @@ class Navbar extends Component {
         {this.renderSearch()}
         <ul>
           {_.map(markdowns, page => {
-            return <Item id={page.title} link={page.path} />;
+            return <Item key={page.title} id={page.title} link={page.path} />;
           })}
           <li className="separator" />
           {_.map(componentsByGroups, (components, key) => {
             return (
               <Item
+                key={key}
                 id={key}
                 components={components}
                 currentPage={currentPage}
-              ></Item>
+              />
             );
           })}
         </ul>

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

@@ -14,17 +14,17 @@ export default ({id, link, components, currentPage}) => {
     return (
       <li key={id}>
         {undocumentedGroups.includes(id) ? (
-          <span class={classnames('entry', {selected: id === currentPage})}>{id}</span>
+          <span className={classnames('entry', {selected: id === currentPage})}>{id}</span>
         ) : (
           <Link key={id} to={`/docs/${id}/`}>
-            <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} />
+              <ItemEntry id={c.node.displayName} key={c.node.displayName} currentPage={currentPage} />
             );
           })}
         </ul>
@@ -37,7 +37,7 @@ const ItemEntry = ({id, link, currentPage}) => {
   return (
     <li key={id}>
       <Link key={id} to={link || `/docs/${id}/`}>
-        <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

@@ -4,32 +4,32 @@ import qr from '../../images/newDesign/qr.png';
 
 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="https://snack.expo.io/@ethanshar/rnuilib_snack">
+              <a target="_blank" rel="noreferrer" href="https://snack.expo.io/@ethanshar/rnuilib_snack">
                 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

@@ -7,14 +7,14 @@ import goldStar from '../../images/goldStar.svg';
 export default () => {
   return (
     <div className="intro">
-      <img src={introCover} className="intro-cover" />
+      <img src={introCover} alt="showcase" className="intro-cover" />
       <div className="intro-inner">
         <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.7k</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

@@ -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>
           );