Add some aria labels

content/projects/flutter.md

@@ -2,8 +2,8 @@
 title: "Experiments with Flutter mobile app development"
 description: "A project to develop a mobile app for the Fitzwilliam Museum"
 institution: Fitzwilliam Museum
-geo_lat: 52.199722
-gei_lon: 0.119167
+geo_lat: 52.199444
+geo_lon: 0.119167
 GitHub_repo: 
   - url: https://github.com/FitzwilliamMuseum/fitz-flutter-app
     name: Flutter App source code
@@ -18,7 +18,7 @@ tags:
   - mobile
   - dart
   - android 12
-  - ios
+  - IOS
   - museums
   - creative economy
 featuredImg: ../images/2022/flutter/splashscreen.png

package.json

@@ -44,7 +44,7 @@
     "gatsby-plugin-image": "^3.12.3",
     "gatsby-plugin-manifest": "^5.12.3",
     "gatsby-plugin-mdx": "^5.12.3",
-    "gatsby-plugin-react-svg": "github:tsamantanis/gatsby-plugin-react-svg",
+    "gatsby-plugin-react-svg": "^3.3.0",
     "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-scroll-indicator": "^1.0.1",
     "gatsby-plugin-sharp": "^5.12.3",

src/components/elements/fair-data.js

@@ -1,13 +1,13 @@
 import React from "react"
 import PropTypes from "prop-types"
 import Image from "react-bootstrap/Image";
-import {Link} from "gatsby";
+import Button from 'react-bootstrap/Button';
 
 const FairData = ({zenodo_doi, github_repo, project_website, deposited_archive}) => (
     <div>
         {project_website &&  <div>
             <p className="p-2">
-                <a href={project_website}>Project website</a>
+                <Button href={project_website} variant="dark" className={"text-white"}>Project website</Button>
             </p>
         </div>
         }
@@ -27,7 +27,7 @@ const FairData = ({zenodo_doi, github_repo, project_website, deposited_archive})
         <div>
             <h4 className="p-2">Data sources</h4>
             <ul>
-                {zenodo_doi && <li><Link to={`https://doi.org/${zenodo_doi}`}><Image alt={'DOI Badge'} src={`https://zenodo.org/badge/DOI/${zenodo_doi}.svg`}></Image></Link>
+                {zenodo_doi && <li><a href={`https://doi.org/${zenodo_doi}`}><Image alt={'DOI Badge'} src={`https://zenodo.org/badge/DOI/${zenodo_doi}.svg`}></Image></a>
                 </li>}
                 {github_repo && <span>
                     {github_repo.map((item, i) => (

src/components/structure/nav.js

@@ -10,7 +10,7 @@ const NavBar = ({siteTitle, menuLinks}) => (
     }}
     >
 
-        <nav className="navbar navbar-expand-lg navbar-dark fixed-top" style={{
+        <nav role="navigation" aria-label="Site Navigation" className="navbar navbar-expand-lg navbar-dark fixed-top" style={{
             background: "#192036",
             marginBottom: "1.45rem",
         }}>

src/components/structure/pagination.js

@@ -2,28 +2,31 @@ import React from 'react'
 import PropType from "prop-types";
 import {Link} from "gatsby";
 import {Container} from "react-bootstrap";
+import Button from "react-bootstrap/Button";
 
 export default function Pagination(props) {
 
     const {pageContext} = props;
     const {pageNumber, numberOfPages, humanPageNumber, previousPagePath, nextPagePath} = pageContext;
     return (
             <Container>
-                <nav className="pagination py-2">
+                <nav className="pagination py-2" role="navigation" aria-label="Pagination Navigation">
                     {humanPageNumber > 1 ? (
-                            <Link
+                            <Button variant={'dark'}><Link
                                 title="Go to previous page"
-                                to={previousPagePath}>
+                                to={previousPagePath}
+                                aria-label="Go to previous page">
                                 ← Previous
-                            </Link>) :
+                            </Link></Button>) :
                         <span/>}
-                    <strong>Page {pageNumber + 1} of {numberOfPages}</strong>
+                    <span className={'fw-bolder'}>Page {pageNumber + 1} of {numberOfPages}</span>
                     {humanPageNumber < numberOfPages ? (
-                            <Link
+                            <Button variant={'dark'}><Link
                                 title="Go to next page"
+                                aria-label="Go to next page"
                                 to={nextPagePath}>
                                 Next →
-                            </Link>) :
+                            </Link></Button>) :
                         <span/>}
                 </nav>
             </Container>

src/styles/global.css

@@ -76,7 +76,7 @@ figcaption {
 
     padding: 10px;
 }
-.post-body li {
+.post-body, #project li {
     list-style: square;
 }
 nav.pagination {

src/templates/blog-page.js

@@ -9,19 +9,22 @@ import Seo from "../components/structure/SEO";
 import {formatReadingTime} from "../utils/helpers";
 
 export default function BlogPageTemplate({data: {markdownRemark}}) {
+
     const {frontmatter, timeToRead, html} = markdownRemark;
+
     const isSSR = typeof window === "undefined";
+
     return (
         <Layout>
             <HeaderImage backgroundImage={frontmatter.background}/>
             <Container>
                 <Row className={"post-body"}>
                     <div className="px-4">
-                        <h1 className="text-black fw-bold mt-4">{frontmatter.title}</h1>
+                        <header><h1 className="text-black fw-bold mt-4">{frontmatter.title}</h1></header>
                         <h2 className="text-primary small">{frontmatter.date}</h2>
                         <h3 className="text-primary lead small">{`${formatReadingTime(timeToRead)}`}</h3>
                     </div>
-                    <div className="post-body bg-white text-black p-4"
+                    <div className="bg-white text-black p-4"
                          dangerouslySetInnerHTML={{__html: html}}/>
                 </Row>
             </Container>
@@ -31,6 +34,7 @@ export default function BlogPageTemplate({data: {markdownRemark}}) {
             )}
         </Layout>
     );
+
 }
 
 

src/templates/photo-page.js

@@ -19,7 +19,7 @@ export default function PhotographsPageTemplate({data: {markdownRemark}}) {
                         <h1 className="text-black fw-bold mt-4">{frontmatter.title}</h1>
                         <h2 className="text-black lead">{frontmatter.date}</h2>
                     </div>
-                    <div className="post-body bg-white text-black p-4 text-center">
+                    <div className="bg-white text-black p-4 text-center">
                         <GatsbyImage className="mx-auto" image={ getImage(frontmatter.featuredImg) } alt={frontmatter.featuredImgAlt}/>
                     </div>
                 </Row>

src/templates/photogrammetry-page.js

@@ -25,7 +25,7 @@ export default function PhotogrammetryPageTemplate({data: {markdownRemark}}) {
                 </Row>
 
             </Container>
-            <Container fluid className="bg-pastel post-body">
+            <Container fluid className="bg-pastel">
                 <Container>
                     <FairData zenodo_doi={frontmatter.zenodo_doi} github_repo={frontmatter.github_repo}
                               project_website={frontmatter.project_website}

src/templates/projects-page.js

@@ -39,7 +39,7 @@ export default function ProjectsPageTemplate({data: {markdownRemark}}) {
             </Container>
             <Vimeo vimeo={frontmatter.vimeo}/>
             <PlyrAudio audio={frontmatter.audio}/>
-            <Container fluid className="bg-pastel post-body">
+            <Container fluid className="bg-pastel" id={"project"}>
                 <Container>
                     <FairData zenodo_doi={frontmatter.zenodo_doi} github_repo={frontmatter.github_repo} project_website={frontmatter.project_website} deposited_archive={frontmatter.deposited_archive}/>
                     <People collaborators={frontmatter.collaborators} partners={frontmatter.partners}/>