🔥 ( Hot-Fix )(resolved-conflict): Rectification of code by removing a…

…ll (jsx-A11y) warnings (Conflict Resolved) (#47) * Chore(warnings): Rectification of code by removing all (jsx-A11y) warnings * hot-fix: Drawer component now closes on clicking playground icon
react-native-elements · Mar 19, 2021 · 5128369 · 5128369
1 parent 084cf38
commit 5128369
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
@@ -17,24 +17,25 @@ function Footer() {
       <Grid container spacing={5} justify="center">
         <Grid item xs={12} md={6} lg={4}>
           <Typography variant="h4" style={{ marginBottom: 10 }}>
-            Playground 🚀
+           Playground <span role="img" aria-label="playground">🚀</span>
           </Typography>
 
           <Divider />
 
           <a
             href="https://github.com/react-native-elements/playground"
             target="_blank"
+            rel="noopener noreferrer"
           >
             <Typography>GitHub Repositoy</Typography>
           </a>
 
-          <a href="https://reactnativeelements.com/" target="_blank">
+          <a href="https://reactnativeelements.com/" target="_blank" rel="noopener noreferrer">
             <Typography>Official Docs</Typography>
           </a>
           <br />
 
-          <a href="https://www.netlify.com">
+          <a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">
             <img
               src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg"
               alt="Deploys by Netlify"
@@ -46,6 +47,7 @@ function Footer() {
           <a
             href="https://github.com/react-native-elements/react-native-elements/"
             target="_blank"
+            rel="noopener noreferrer"
           >
             <Typography variant="h6">React Native Elements</Typography>
             <Typography
@@ -58,6 +60,7 @@ function Footer() {
             <img
               src={require("../../assets/RNE_Logo.png")}
               className={styles.footer_product_img}
+              alt="react-native-elements-logo"
             />
 
             <img

diff --git a/src/containers/Drawer/index.jsx b/src/containers/Drawer/index.jsx
@@ -91,8 +91,8 @@ function ResponsiveDrawer(props) {
   const drawer = (
     <div>
       <div style={{ padding: "0.5rem" }}>
-        <Link to="/">
-          <Typography variant="h5">Playground 🚀</Typography>
+        <Link to="/" onClick={() => handleDrawerToggle(false)}>
+          <Typography variant="h5">Playground <span role="img" aria-label="playground" >🚀</span></Typography>
         </Link>
       </div>
       <List>
@@ -140,7 +140,7 @@ function ResponsiveDrawer(props) {
             </Typography>
           </Link>
           <div style={{ marginLeft: "auto" }}>
-            <a href="https://reactnativeelements.com/" target="_blank">
+            <a href="https://reactnativeelements.com/" target="_blank" rel="noopener noreferrer">
               <Button color="inherit">Docs</Button>
             </a>
             <IconButton

diff --git a/src/containers/Navigation/index.jsx b/src/containers/Navigation/index.jsx
@@ -186,7 +186,7 @@ export default function App() {
         })}
         <Route exact path="/explore">
           <Helmet>
-            <title>Explore | Playground 🚀 - React Native Elements</title>
+            <title>Explore | Playground <span role="img" aria-label="playground">🚀</span> - React Native Elements</title>
           </Helmet>
           <ExplorePage />
         </Route>

diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
@@ -33,7 +33,7 @@ function HomePage() {
       <div style={{ width: "100%", textAlign: "center", marginBottom: "2rem" }}>
         <Link to="/explore">
           <Button variant="outlined" color="secondary">
-            <Typography variant="h6">Explore Now 🌇</Typography>
+            <Typography variant="h6">Explore Now <span role="img" aria-label="explore">🌇</span></Typography>
           </Button>
         </Link>
       </div>
@@ -93,6 +93,7 @@ const FeatureCard = (props) => {
           margin: "auto",
           display: "flex",
         }}
+        alt="playground-banner"
         src={props.banner}
       />
       <div style={{ bottom: 0, marginTop: "1rem" }}>