fix: accessibility issues for visualisations

.husky/pre-commit

@@ -2,3 +2,14 @@
 . "$(dirname "$0")/_/husky.sh"
 
 npx lint-staged && npm run test
+
+
+
+
+# Restrict to specific branch
+# branch=$(git branch | sed -n -e 's/^\* \(.*\)/\1/p')
+
+# if [ "$branch" == "development" ]
+# then
+#   npx lint-staged && npm run test
+# fi

.prettierignore

@@ -2,6 +2,4 @@
 package.json
 package-lock.json
 public
-
-.mdx
-
+.github

content/visualisation/2021-06-24-Increased-snack-intake-in-UK-and-Australia/marimekkoPlot.jsx

@@ -1,118 +1,146 @@
-import React from 'react'
+import React from "react"
 import PropTypes from "prop-types"
-import { ResponsiveMarimekko } from '@nivo/marimekko'
+import { ResponsiveMarimekko } from "@nivo/marimekko"
 import Snack from "./snacks.svg"
 import AUFlag from "./australia.svg"
 import UKFlag from "./united-kingdom.svg"
 
 export const data = [
   {
-    "country": 'United Kingdom',
-    "Increased": 53,
-    "Decreased": 26,
-    "NoChanges": 20,
-    "population": 66.65
+    country: "United Kingdom",
+    Increased: 53,
+    Decreased: 26,
+    NoChanges: 20,
+    population: 66.65
   },
   {
-    "country": 'Australia',
-    "Increased": 49,
-    "Decreased": 25,
-    "NoChanges": 26,
-    "population": 25.36
+    country: "Australia",
+    Increased: 49,
+    Decreased: 25,
+    NoChanges: 26,
+    population: 25.36
   }
 ]
 
 /**
- * This component uses tailwindcss (https://tailwindcss.com/) framework for styling of some elements. 
+ * This component uses tailwindcss (https://tailwindcss.com/) framework for styling of some elements.
  * Visit the website for reference of className.
  * E.g. className="p-5 relative" translates to "padding: 1.25rem; position: relative"
- */ 
+ */
 const marimekkoPlot = () => {
   const plotTitle = {
-    color: 'white',
+    color: "white",
     lineHeight: 1.25,
-    fontSize: '1.5rem',
+    fontSize: "1.5rem",
     fontWeight: 700
   }
 
   const visWrapper = {
-    width: '100%',
-    display: 'flex',
-    flexWrap: 'wrap',
-    position: 'relative',
+    width: "100%",
+    display: "flex",
+    flexWrap: "wrap",
+    position: "relative",
     zIndex: 10,
-    height: '350px'
+    height: "350px"
   }
 
   const sourceInfo = {
-    position: 'absolute',
+    position: "absolute",
     bottom: 0,
-    margin: '1.25rem',
-    fontSize: '0.72rem',
-    color: 'rgb(55, 65, 81)'
+    margin: "1.25rem",
+    fontSize: "0.72rem",
+    color: "rgb(55, 65, 81)"
   }
 
+  const theme = {
+    textColor: "#000"
+  }
 
-	return (
-    <div 
+  return (
+    <div
       id="visualisation"
-      style={{backgroundColor: '#FAD961', backgroundImage: 'linear-gradient(315deg, #FAD961 0%, #ff6e00 100%)', minHeight: '550px', height: '100%', maxWidth: '550px', borderRadius: '20px', backgroundSize: 'cover', padding: '1.25rem', position: 'relative'}}
+      style={{
+        backgroundColor: "#FAD961",
+        backgroundImage:
+          "linear-gradient(325deg, #FFC800 0%, #FF7800 50%, #ea3a05 100%)",
+        minHeight: "550px",
+        height: "100%",
+        maxWidth: "550px",
+        borderRadius: "20px",
+        backgroundSize: "cover",
+        padding: "1.25rem",
+        position: "relative"
+      }}
     >
       <h1 style={plotTitle}>
-        People turned to <span style={{backgroundImage: 'linear-gradient(90deg, #7B3F00 31%, rgb(255, 37, 0) 100%)', backgroundColor: '#ff6e00'}}>sweets, chocolate and salty snacks</span> during the Covid-19 lockdowns in the UK and Australia
+        People turned to{" "}
+        <span
+          style={{
+            backgroundImage:
+              "linear-gradient(90deg, #7B3F00 31%, rgb(255, 37, 0) 100%)",
+            backgroundColor: "#ff6e00"
+          }}
+        >
+          sweets, chocolate and salty snacks
+        </span>{" "}
+        during the Covid-19 lockdowns in the UK and Australia
       </h1>
-      <h3 style={{color: 'white', marginTop: '0.5rem', fontSize: '0.85rem'}}>“Increased snack intake was associated with higher levels of perceived stress ...”</h3>
-
+      <h3 style={{ color: "white", marginTop: "0.5rem", fontSize: "0.85rem" }}>
+        “Increased snack intake was associated with higher levels of perceived
+        stress ...”
+      </h3>
+
       <div style={visWrapper}>
         <ResponsiveMarimekko
           data={data}
+          theme={theme}
           id="country"
           value="population"
           dimensions={[
             {
-              id: 'Increased intake',
-              value: 'Increased'
+              id: "Increased intake",
+              value: "Increased"
             },
             {
-              id: 'Decreased intake',
-              value: 'Decreased'
+              id: "Decreased intake",
+              value: "Decreased"
             },
             {
-              id: 'No changes',
-              value: 'NoChanges'
+              id: "No changes",
+              value: "NoChanges"
             }
           ]}
           enableGridY={false}
           innerPadding={9}
           axisTop={null}
           axisBottom={{
-            orient: 'bottom',
+            orient: "bottom",
             tickSize: 5,
             tickPadding: 5,
             tickRotation: 10,
-            legend: 'Country population (million)',
+            legend: "Country population (million)",
             legendOffset: 36,
-            legendPosition: 'middle'
+            legendPosition: "middle"
           }}
           axisLeft={{
-            orient: 'left',
+            orient: "left",
             tickSize: 5,
             tickPadding: 5,
             tickRotation: 0,
-            legend: 'Respondent %',
+            legend: "Respondent %",
             legendOffset: -40,
-            legendPosition: 'middle'
+            legendPosition: "middle"
           }}
           margin={{ top: 40, right: 80, bottom: 100, left: 80 }}
-          colors={{ scheme: 'yellow_green_blue' }}
+          colors={{ scheme: "yellow_green_blue" }}
           borderWidth={0}
-          borderColor={{ from: 'color', modifiers: [ [ 'darker', 0.2 ] ] }}
+          borderColor={{ from: "color", modifiers: [["darker", 0.2]] }}
           defs={[
             {
-              id: 'lines',
-              type: 'patternLines',
-              background: 'rgba(255, 255, 255, 1)',
-              color: '#7fcdbb',
+              id: "lines",
+              type: "patternLines",
+              background: "rgba(255, 255, 255, 1)",
+              color: "#7fcdbb",
               rotation: -45,
               lineWidth: 4,
               spacing: 8
@@ -121,59 +149,89 @@ const marimekkoPlot = () => {
           fill={[
             {
               match: {
-                id: 'Increased intake'
+                id: "Increased intake"
               },
-              id: 'lines'
+              id: "lines"
             }
           ]}
-          tooltip={function(e){
-            let country = e.bar.datum.data.country;
-            let flag = country == "United Kingdom" ? UKFlag : AUFlag;
+          tooltip={function (e) {
+            let country = e.bar.datum.data.country
+            let flag = country == "United Kingdom" ? UKFlag : AUFlag
 
             return React.createElement(
-              'div',
-              {className: 'bg-white p-2 rounded-md text-gray-800'},
-              React.createElement('img', {src: flag, style: {maxWidth: '20px'}}),
+              "div",
+              { className: "bg-white p-2 rounded-md text-gray-800" },
+              React.createElement("img", {
+                src: flag,
+                style: { maxWidth: "20px" }
+              }),
               ` ${e.bar.id}: ${e.bar.value}%`
             )
           }}
           motionConfig="wobbly"
           legends={[
             {
-              anchor: 'bottom',
-              direction: 'row',
+              anchor: "bottom",
+              direction: "row",
               justify: false,
               translateX: 0,
               translateY: 80,
               itemsSpacing: 0,
               itemWidth: 140,
               itemHeight: 18,
-              itemTextColor: '#555',
-              itemDirection: 'right-to-left',
+              itemTextColor: "#333",
+              itemDirection: "right-to-left",
               itemOpacity: 1,
               symbolSize: 20,
-              symbolShape: 'square',
+              symbolShape: "square",
               effects: [
                 {
-                  on: 'hover',
+                  on: "hover",
                   style: {
-                    itemTextColor: '#000'
+                    itemTextColor: "#000"
                   }
                 }
               ]
             }
           ]}
         />
       </div>
-      <img src={Snack} alt="Snack" style={{opacity: '0.07', maxWidth: '150px', position: 'absolute', bottom: 0, right: 0, margin: '1.5rem'}}  />
-      <h1 style={{fontWeight: 800, left: 0, fontSize: '.9rem', ...sourceInfo}}>Dataviz.Shef</h1>
-      <h1 style={{right: 0, ...sourceInfo}}>Source: The University of Sheffield - News</h1>
+      <img
+        src={Snack}
+        alt="Snack"
+        style={{
+          opacity: "0.07",
+          maxWidth: "150px",
+          position: "absolute",
+          bottom: 0,
+          right: 0,
+          margin: "1.5rem"
+        }}
+      />
+      <img
+        src={UKFlag}
+        alt="UK flag"
+        style={{ position: "absolute", top: "30%", left: "38%", width: "25px" }}
+      />
+      <img
+        src={AUFlag}
+        alt="Australia flag"
+        style={{ position: "absolute", top: "30%", left: "72%", width: "25px" }}
+      />
+      <h1
+        style={{ fontWeight: 800, left: 0, fontSize: ".9rem", ...sourceInfo }}
+      >
+        Dataviz.Shef
+      </h1>
+      <h1 style={{ right: 0, ...sourceInfo }}>
+        Source: The University of Sheffield - News
+      </h1>
     </div>
-	)
+  )
 }
 
 export default marimekkoPlot
 
 marimekkoPlot.propTypes = {
-		data: PropTypes.any
-	}
+  data: PropTypes.any
+}