Merge branch '507-fix-accessibility-issues-reported' of https://githu…

…b.com/hbz/lobid Resolves #507
hbz · Jul 9, 2024 · 979eeb5 · 979eeb5
2 parents 14dc6d6 + f634813
commit 979eeb5
Show file tree

Hide file tree

Showing 14 changed files with 93 additions and 54 deletions.
diff --git a/gatsby/lobid/src/components/footer.html.js b/gatsby/lobid/src/components/footer.html.js
@@ -3,48 +3,52 @@ import React from "react"
 import wappenPng from "./images/wappen.png";
 
 export default class Footer extends React.Component {
-  render() {
-    return (
-      <div className="panel panel-default footer">
-        <div className="panel-body">
-          <span className="pull-left">
-            <img src={wappenPng} alt="NRW-Wappen" /> &nbsp; lobid |
-            ein Dienst des{" "}
-            <a href="https://www.hbz-nrw.de/produkte/linked-open-data">
-              hbz
-            </a>
-          </span>
-          <span className="pull-right">
-            <a href="/warranty">
-              {this.props.warranty}
-            </a>
-            {" | "}
-            <a href="https://www.hbz-nrw.de/impressum">
-              {this.props.companyDetails}
-            </a>
-            {" | "}
-            <a href="https://github.com/hbz/lobid/blob/master/conf/Datenschutzerklaerung_lobid.textile">
-              {this.props.privacy}
-            </a>
-            {" | "}
-            <a
-              href="https://openbiblio.social/@lobid"
-              style={{ marginRight: "12px" }}
-            >
-              <i className="fa-brands fa-mastodon" aria-hidden="true"></i> Mastodon
-            </a>
-            <a
-              href="https://github.com/hbz/lobid"
-              style={{ marginRight: "12px" }}
-            >
-              <i className="fa-brands fa-github" aria-hidden="true"></i> GitHub
-            </a>
-            <a href="http://blog.lobid.org" style={{ marginRight: "12px" }}>
-              <i className="fa fa-pencil" aria-hidden="true"></i> Blog
-            </a>
-          </span>
+    render() {
+      return (
+        <div className="panel panel-default footer">
+          <div className="panel-body">
+            <span className="pull-left">
+              <img src={wappenPng} alt="NRW-Wappen" /> &nbsp; lobid |
+              ein Dienst des{" "}
+              <a href="https://www.hbz-nrw.de/produkte/linked-open-data">
+                hbz
+              </a>
+            </span>
+            <span className="pull-right">
+              <a href="/warranty">
+                {this.props.warranty}
+              </a>
+              {" | "}
+              <a href="https://www.hbz-nrw.de/impressum">
+                {this.props.companyDetails}
+              </a>
+              {" | "}
+              <a href="https://github.com/hbz/lobid/blob/master/conf/Datenschutzerklaerung_lobid.textile">
+                {this.props.privacy}
+              </a>
+              {" | "}
+              <a href="https://www.hbz-nrw.de/barrierefreiheit">
+                {this.props.accessibility}
+              </a>
+              {" | "}
+              <a
+                href="https://openbiblio.social/@lobid"
+                style={{ marginRight: "12px" }}
+              >
+                <i className="fa-brands fa-mastodon" aria-hidden="true"></i> Mastodon
+              </a>
+              <a
+                href="https://github.com/hbz/lobid"
+                style={{ marginRight: "12px" }}
+              >
+                <i className="fa-brands fa-github" aria-hidden="true"></i> GitHub
+              </a>
+              <a href="http://blog.lobid.org" style={{ marginRight: "12px" }}>
+                <i className="fa fa-pencil" aria-hidden="true"></i> Blog
+              </a>
+            </span>
+          </div>
         </div>
-      </div >
-    )
-  }
+      )
+    }
 }
diff --git a/gatsby/lobid/src/components/member.html.js b/gatsby/lobid/src/components/member.html.js
@@ -7,9 +7,9 @@ import Publications from "./publications.html";
 import Products from "./products.html";
 import Projects from "./projects.html";
 
-import "./css/lobid.css";
 import "./css/bootstrap.min.css";
 import "./css/font-awesome.min.css";
+import "./css/lobid.css";
 
 import hbzLogoPng from "./images/hbz.png";
 import jsonLdPng from "./images/json-ld.png";
@@ -116,7 +116,7 @@ export class Member extends React.Component {
           </p>
           {this.state.infoToggledProjects ? this.getFormerProjects() : ""}
           <Publications pubs={this.props.pubs} publications={this.props.publications} />
-          <Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy} />
+          <Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy} accessibility={this.props.accessibility} />
         </div>
       </div>
     );

diff --git a/gatsby/lobid/src/components/product.html.js b/gatsby/lobid/src/components/product.html.js
@@ -7,9 +7,9 @@ import Footer from "./footer.html";
 import Publications from "./publications.html";
 import Membership from "./membership.html";
 
-import "./css/lobid.css";
 import "./css/bootstrap.min.css";
 import "./css/font-awesome.min.css";
+import "./css/lobid.css";
 
 import jsonLdPng from "./images/json-ld.png";
 
@@ -65,7 +65,7 @@ export class Product extends React.Component {
           {this.props.product.membership.length > 0 && <p className="lead">{this.props.memberName}</p>}
           <Membership membership={this.props.product.membership.filter((member) => !member.endDate).map((member) => [member, getMemberDetails(this.props.members, member)])} lang={this.props.lang}/>
           <Publications pubs={this.props.pubs} publications={this.props.publications} />
-          <Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy} />
+          <Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy} accessibility={this.props.accessibility} />
         </div>
       </div>
     );

diff --git a/gatsby/lobid/src/components/project.html.js b/gatsby/lobid/src/components/project.html.js
@@ -7,9 +7,9 @@ import Footer from "./footer.html";
 import Publications from "./publications.html";
 import Membership from "./membership.html";
 
-import "./css/lobid.css";
 import "./css/bootstrap.min.css";
 import "./css/font-awesome.min.css";
+import "./css/lobid.css";
 
 import jsonLdPng from "./images/json-ld.png";
 
@@ -68,7 +68,7 @@ export class Project extends React.Component {
           {this.props.project.membership.length > 0 && <p className="lead">{this.props.memberName}</p>}
           <Membership membership={this.props.project.membership.filter((member) => !member.endDate).map((member) => [member, getMemberDetails(this.props.members, member)])} lang={this.props.lang}/>
           <Publications pubs={this.props.pubs} publications={this.props.publications} />
-          <Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy} />
+          <Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy} accessibility={this.props.accessibility} />
         </div>
       </div>
     );

diff --git a/gatsby/lobid/src/components/team.html.js b/gatsby/lobid/src/components/team.html.js
@@ -7,9 +7,9 @@ import Membership from "./membership.html";
 import Publications from "./publications.html";
 import Projects from "./projects.html";
 
-import "./css/lobid.css";
 import "./css/bootstrap.min.css";
 import "./css/font-awesome.min.css";
+import "./css/lobid.css";
 
 import hbzLogoPng from "./images/hbz.png";
 import jsonLdPng from "./images/json-ld.png";
@@ -186,7 +186,7 @@ export class Team extends React.Component {
             </div>
           </div>
         </div>
-        <Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy} />
+        <Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy} accessibility={this.props.accessibility} />
       </div>
     );
   }

diff --git a/gatsby/lobid/src/components/visual.html.js b/gatsby/lobid/src/components/visual.html.js
@@ -120,7 +120,7 @@ export class Visual extends Component {
           </p>
           <div id="lobid-network" ref={this.appRef} />
         </div>
-        <Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy}/>
+        <Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy} accessibility={this.props.accessibility} />
       </div>
     );
   }

diff --git a/gatsby/lobid/src/templates/markdown.js b/gatsby/lobid/src/templates/markdown.js
@@ -30,6 +30,7 @@ export default function Template({ data, pageContext }) {
         privacy={pageContext.lang==="de"?"Datenschutz":"Privacy"}
         contactPointId="mailto:[email protected]"
         warranty={pageContext.lang==="de"?"Gewährleistung":"Warranty"}
+        accessibility={pageContext.lang==="de"?"Barrierefreiheit":"Accessibility"}
       />
     </div>
   )

diff --git a/gatsby/lobid/src/templates/member.js b/gatsby/lobid/src/templates/member.js
@@ -29,6 +29,7 @@ export default function MemberPage({ data, location, pageContext }) {
     memberName="Mitglieder"
     memberFormerName="Ehemalige"
     companyDetails="Impressum"
+    accessibility="Barrierefreiheit"
     privacy="Datenschutz"
     contactPointId="mailto:[email protected]"
     lang="de"

diff --git a/gatsby/lobid/src/templates/product.js b/gatsby/lobid/src/templates/product.js
@@ -22,6 +22,7 @@ export default function ProductPage({ data, location, pageContext }) {
     isRelatedTo="Bezug"
     companyDetails="Impressum"
     privacy="Datenschutz"
+    accessibility="Barrierefreiheit"
     contactPointId="mailto:[email protected]"
     memberName="Team"
     lang="de"

diff --git a/gatsby/lobid/src/templates/project.js b/gatsby/lobid/src/templates/project.js
@@ -24,6 +24,7 @@ export default function ProjectPage({ data, location, pageContext }) {
     result="Ergebnis"
     companyDetails="Impressum"
     privacy="Datenschutz"
+    accessibility="Barrierefreiheit"
     contactPointId="mailto:[email protected]"
     memberName="Team"
     lang="de"

diff --git a/gatsby/lobid/src/templates/team.js b/gatsby/lobid/src/templates/team.js
@@ -29,6 +29,7 @@ export default ({ data, location, pageContext }) => {
     memberName={pageContext.lang==="de"?"Mitglieder":"Members"}
     memberFormerName={pageContext.lang==="de"?"Ehemalige":"Former members"}
     companyDetails={pageContext.lang==="de"?"Impressum":"Imprint"}
+    accessibility={pageContext.lang==="de"?"Barrierefreiheit":"Accessibility"}
     privacy={pageContext.lang==="de"?"Datenschutz":"Privacy"}
     contactPointId="mailto:[email protected]"
   />

diff --git a/gatsby/lobid/static/index-de b/gatsby/lobid/static/index-de
@@ -5,10 +5,10 @@
 <head>
   <meta charset="utf-8">
   <title>lobid.org</title>
-  <link rel="stylesheet" media="screen" href="/stylesheets/lobid.css">
   <link rel="stylesheet" media="all" href="/stylesheets/bootstrap.min.css">
   <link rel="stylesheet" media="all" href="/stylesheets/jquery-ui.min.css">
   <link rel="stylesheet" media="all" href='/stylesheets/font-awesome.min.css'>
+  <link rel="stylesheet" media="screen" href="/stylesheets/lobid.css">
   <link rel="shortcut icon" type="image/png" href="/images/favicon.png">
   <script src="/javascripts/jquery-1.10.2.min.js"></script>
   <script src="/javascripts/jquery-ui.min.js"></script>
@@ -94,6 +94,7 @@
           <a href="/warranty">Gewährleistung</a> |
           <a href="https://www.hbz-nrw.de/impressum">Impressum</a> |
           <a href="https://github.com/hbz/lobid/blob/master/conf/Datenschutzerklaerung_lobid.textile">Datenschutz</a> |
+          <a href="https://www.hbz-nrw.de/barrierefreiheit">Barrierefreiheit</a> |
           <a href="https://openbiblio.social/@lobid"><i class="fa-brands fa-mastodon" aria-hidden="true"></i> Mastodon</a>&nbsp;
           <a href="https://github.com/hbz/lobid"><i class="fa-brands fa-github" aria-hidden="true"></i> GitHub</a>&nbsp;
           <a href="http://blog.lobid.org"><i class="fa fa-pencil" aria-hidden="true"></i> Blog</a>

diff --git a/gatsby/lobid/static/index-en b/gatsby/lobid/static/index-en
@@ -5,10 +5,10 @@
 <head>
   <meta charset="utf-8">
   <title>lobid.org</title>
-  <link rel="stylesheet" media="screen" href="/stylesheets/lobid.css">
   <link rel="stylesheet" media="all" href="/stylesheets/bootstrap.min.css">
   <link rel="stylesheet" media="all" href="/stylesheets/jquery-ui.min.css">
   <link rel="stylesheet" media="all" href='/stylesheets/font-awesome.min.css'>
+  <link rel="stylesheet" media="screen" href="/stylesheets/lobid.css">
   <link rel="shortcut icon" type="image/png" href="/images/favicon.png">
   <script src="/javascripts/jquery-1.10.2.min.js"></script>
   <script src="/javascripts/jquery-ui.min.js"></script>
@@ -95,6 +95,7 @@
           <a href="/warranty">Warranty</a> |
           <a href="https://www.hbz-nrw.de/impressum">Imprint</a> |
           <a href="https://github.com/hbz/lobid/blob/master/conf/Datenschutzerklaerung_lobid.textile">Privacy</a> |
+          <a href="https://www.hbz-nrw.de/barrierefreiheit">Accessibility</a> |
           <a href="https://openbiblio.social/@lobid"><i class="fa-brands fa-mastodon" aria-hidden="true"></i> Mastodon</a>&nbsp;
           <a href="https://github.com/hbz/lobid"><i class="fa-brands fa-github" aria-hidden="true"></i> GitHub</a>&nbsp;
           <a href="http://blog.lobid.org"><i class="fa fa-pencil" aria-hidden="true"></i> Blog</a>

diff --git a/gatsby/lobid/static/stylesheets/lobid.css b/gatsby/lobid/static/stylesheets/lobid.css
@@ -107,3 +107,31 @@ h5 {
 .toc {
 	margin-bottom: 50px;
 }
+
+/* improve accessibility */
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small,
+.h1 small,
+.h2 small,
+.h3 small,
+.h4 small,
+.h5 small,
+.h6 small,
+h1 .small,
+h2 .small,
+h3 .small,
+h4 .small,
+h5 .small,
+h6 .small,
+.h1 .small,
+.h2 .small,
+.h3 .small,
+.h4 .small,
+.h5 .small,
+.h6 .small {
+  color: #666;
+}