From 5f8383d21b83af63abd579618c0becc7c4a7cc9c Mon Sep 17 00:00:00 2001 From: Romain Date: Wed, 7 Oct 2020 16:42:20 +0200 Subject: [PATCH] SEO and accessibility improvements --- components/Button.js | 4 +-- components/Header.js | 6 ++++ components/WrapInLink.js | 26 +++++++++++++++-- components/cards/HelpCard.js | 2 +- components/cards/KitCard.js | 8 ++++-- components/cards/SimpleMediaCard.js | 2 ++ components/forms/AccountForm.js | 19 +++++++++++-- components/forms/ChangePasswordForm.js | 3 ++ components/forms/LoginForm.js | 10 +++++-- components/forms/MediaCreationForm.js | 4 +++ components/forms/SignUpForm.js | 10 ++++--- components/forms/UploadForm.js | 1 + components/inputs/CheckBox.js | 2 +- components/inputs/FileInput.js | 1 + components/inputs/SearchBar.js | 9 ++++++ components/layouts/MainLayout.js | 5 +++- components/layouts/PageLayout.js | 37 +++++++++++++++++++++---- components/posts/PostFile.js | 1 + components/posts/PostLink.js | 2 +- pages/_app.js | 1 + pages/challenges.js | 2 +- pages/help.js | 2 +- pages/index.js | 2 +- pages/library.js | 4 ++- pages/library/create-media.js | 5 +++- pages/login.js | 4 +-- pages/map.js | 8 +++++- pages/news.js | 4 ++- pages/users/[username].js | 6 +++- public/images/meta-image.png | Bin 0 -> 21257 bytes 30 files changed, 154 insertions(+), 36 deletions(-) create mode 100644 public/images/meta-image.png diff --git a/components/Button.js b/components/Button.js index e1d50a1..23f8374 100644 --- a/components/Button.js +++ b/components/Button.js @@ -70,11 +70,11 @@ const Button = React.forwardRef( ref={ref} type={props.type || "button"} isIcon={isIcon} + aria-label={label} {...props} > - {icon && {icon}} - {label} + {isIcon ? {icon} : <>{label}} ); } diff --git a/components/Header.js b/components/Header.js index 6f1dcf5..ac59575 100644 --- a/components/Header.js +++ b/components/Header.js @@ -195,6 +195,9 @@ export default function Header() { */ function toggleSearch() { setOpenSearch(!openSearch); + if (!openSearch) { + document.getElementById("query").focus(); + } } return ( @@ -212,6 +215,7 @@ export default function Header() { : } onClick={() => toggleSearch()} @@ -219,6 +223,7 @@ export default function Header() { } onClick={() => toggleDrawer()} @@ -234,6 +239,7 @@ export default function Header() { trigger={ } /> diff --git a/components/WrapInLink.js b/components/WrapInLink.js index 748d49f..d38e68a 100644 --- a/components/WrapInLink.js +++ b/components/WrapInLink.js @@ -1,13 +1,35 @@ import Link from "next/link"; +import PropTypes from "prop-types"; import React from "react"; /*** * Wrapper component for dynamic href and as */ -export default function WrapInLink({ children, href, as }) { +export default function WrapInLink({ children, href, as, ...props }) { return ( - {children} + + {children} + ); } + +WrapInLink.propTypes = { + /** + * Components to wrap + */ + children: PropTypes.node.isRequired, + /** + * Destination of the link + */ + href: PropTypes.string.isRequired, + /** + * As path of the link + */ + as: PropTypes.string, +}; + +WrapInLink.defaultProps = { + as: null, +}; diff --git a/components/cards/HelpCard.js b/components/cards/HelpCard.js index 9c3b45f..024c1e6 100644 --- a/components/cards/HelpCard.js +++ b/components/cards/HelpCard.js @@ -46,7 +46,7 @@ export default function HelpCard(props) { return ( <> {external ? ( - + ) : ( diff --git a/components/cards/KitCard.js b/components/cards/KitCard.js index c41b747..079ffe4 100644 --- a/components/cards/KitCard.js +++ b/components/cards/KitCard.js @@ -27,12 +27,16 @@ export default function KitCard(props) {
We're currently working on a new version of Kit Dashboards. For now you can use the{" "} - + current tools {" "} to access and edit your kits. To learn more about the new features please{" "} - + join our Slack . diff --git a/components/cards/SimpleMediaCard.js b/components/cards/SimpleMediaCard.js index 9d4db8a..f29dfcf 100644 --- a/components/cards/SimpleMediaCard.js +++ b/components/cards/SimpleMediaCard.js @@ -136,6 +136,7 @@ export default function SimpleMediaCard({ media, showTools }) { <>