Browse Source

fixed small accessibility issues

Bernadette Elena Hammerle 4 years ago
parent
commit
da16428aa5
6 changed files with 22 additions and 15 deletions
  1. 2 2
      src/Addition.js
  2. 10 2
      src/App.css
  3. 2 2
      src/Error.js
  4. 4 4
      src/Help.js
  5. 2 3
      src/Home.js
  6. 2 2
      src/Subtraction.js

+ 2 - 2
src/Addition.js

@@ -266,7 +266,7 @@ function Addition() {
 
 
 
 
   return (
   return (
-    <div id="content">
+    <main>
 
 
       <h1>Addition</h1>
       <h1>Addition</h1>
 
 
@@ -332,7 +332,7 @@ function Addition() {
         showIdmtResults={showIdmtResults}
         showIdmtResults={showIdmtResults}
       />
       />
 
 
-    </div>
+    </main>
   );
   );
 }
 }
 
 

+ 10 - 2
src/App.css

@@ -3,14 +3,18 @@
   min-height: 93vh;
   min-height: 93vh;
 }
 }
 
 
-#content{
+main{
   margin-bottom: 60px;
   margin-bottom: 60px;
 }
 }
 
 
-#content ul{
+main ul{
   list-style: none;
   list-style: none;
 }
 }
 
 
+main ul li a{
+  color: #005bdf;
+}
+
 .dx-datagrid-focus-overlay{
 .dx-datagrid-focus-overlay{
   height: 0px !important;
   height: 0px !important;
 }
 }
@@ -62,4 +66,8 @@ h1{
 
 
 input[type="text"]{
 input[type="text"]{
   margin: 7px;
   margin: 7px;
+}
+
+#wrapper .navbar-dark .navbar-nav .nav-link{
+  color: rgba(255,255,255,.9)
 }
 }

+ 2 - 2
src/Error.js

@@ -3,10 +3,10 @@ import "./App.css";
 
 
 function Subtraction() {
 function Subtraction() {
   return (
   return (
-    <div id="content">
+    <main>
       <h1>error 404</h1>
       <h1>error 404</h1>
       <p>Sorry, this page doesn't exist.</p>
       <p>Sorry, this page doesn't exist.</p>
-    </div>
+    </main>
   );
   );
 }
 }
 
 

+ 4 - 4
src/Help.js

@@ -2,7 +2,7 @@ import React from "react";
 
 
 function Help() {
 function Help() {
   return (
   return (
-    <div id="content">
+    <main>
       <h1>Hilfe</h1>
       <h1>Hilfe</h1>
 
 
       <h2>1. Navigation</h2>
       <h2>1. Navigation</h2>
@@ -11,8 +11,8 @@ function Help() {
       </p>
       </p>
 
 
       <ul>
       <ul>
-        <a href="/addition"><li>Addition</li></a>
-        <a href="/subtraction"><li>Subtraktion</li></a>
+        <li><a href="/addition">Addition</a></li>
+        <li><a href="/subtraction">Subtraktion</a></li>
       </ul>
       </ul>
 
 
       <h2>2. Eingabe der Rechnung</h2>
       <h2>2. Eingabe der Rechnung</h2>
@@ -54,7 +54,7 @@ function Help() {
       <p>
       <p>
         Um die Eingabe zu korrigieren oder eine neue Rechnung zu beginnen, muss die Seite neu geladen werden.
         Um die Eingabe zu korrigieren oder eine neue Rechnung zu beginnen, muss die Seite neu geladen werden.
       </p>
       </p>
-    </div>
+    </main>
   );
   );
 }
 }
 
 

+ 2 - 3
src/Home.js

@@ -2,16 +2,15 @@ import React from "react";
 
 
 function Home() {
 function Home() {
   return (
   return (
-    <div id="content">
+    <main>
       <h1>Willkommen bei der MAWEN Web App</h1>
       <h1>Willkommen bei der MAWEN Web App</h1>
-      <p> Mawen bedeutet "Math Working environment" </p>
       <p> Derzeit sind zwei Grundrechnungsarten verf&uuml;gbar:&nbsp;
       <p> Derzeit sind zwei Grundrechnungsarten verf&uuml;gbar:&nbsp;
         <a href="/addition">Addition</a>
         <a href="/addition">Addition</a>
         &nbsp;und&nbsp;
         &nbsp;und&nbsp;
         <a href="/subtraction">Subtraction</a>
         <a href="/subtraction">Subtraction</a>
         &nbsp;
         &nbsp;
       </p>
       </p>
-    </div>
+    </main>
   );
   );
 }
 }
 
 

+ 2 - 2
src/Subtraction.js

@@ -308,7 +308,7 @@ function Subtraction() {
   }
   }
 
 
   return (
   return (
-    <div id="content">
+    <main>
 
 
       <h1>Subtraction</h1>
       <h1>Subtraction</h1>
 
 
@@ -374,7 +374,7 @@ function Subtraction() {
         showIdmtResults={showIdmtResults}
         showIdmtResults={showIdmtResults}
       />
       />
 
 
-    </div>
+    </main>
   );
   );
 }
 }