Bläddra i källkod

fixed small accessibility issues

Bernadette Elena Hammerle 4 år sedan
förälder
incheckning
da16428aa5
6 ändrade filer med 22 tillägg och 15 borttagningar
  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>
+        <li><a href="/addition">Addition</a></li>
-        <a href="/subtraction"><li>Subtraktion</li></a>
+        <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>
   );
   );
 }
 }