Merge pull request #197 from Zolon-DOL/master

SPT21 changes

package.json

@@ -201,4 +201,4 @@
             "react-app"
         ]
     }
-}
+}

src/components/AppWraapper/AppWrapper.js

@@ -159,9 +159,14 @@ class AppWrapper extends Component {
         document.getElementById("menu-btn").style.paddingTop = '16px';
         document.getElementById("menu-btn").style.height = '55px';
         if (isIOS() || isAndroid()) {
-                document.getElementById("showSTM").style.display = 'none';
-                }
+            document.getElementById("showSTM").style.display = 'none';
         }
+        /*TODO For keyBoard issue #171
+        var inputs = document.getElementById('main').getElementsByTagName('input');
+        for (var i = 0; i < inputs.length; i++) {
+            inputs[i].setAttribute("lang",localStorage.getItem("lang"));
+        }*/
+    }
      componentDidUpdate() {
         }
 

src/components/Bookmarkable/Bookmarkable.js

@@ -182,7 +182,7 @@ class Bookmarkable extends Component {
             <Wrapper>
                 <BookmarkButton aria-live="assertive"
                     title={
-                        bookmarked ? `${title} is Bookmarked To undo Bookmark Press Enter ` : `Bookmark ${title}`
+                        bookmarked ? `${title} is Bookmarked To undo Bookmark Press Enter or double-tap` : `Bookmark ${title}`
                     }
                     onClick={() => {
                         if (!bookmarked) {

src/components/Menu/BottomNavBar/BottomNavBar.js

@@ -44,7 +44,7 @@ class BottomNavBar extends Component {
         );
     }
 }
-
+//TODO below change white to grayLightest
 const Wrapper = styled.nav`
     display: flex;
     align-items: center;
@@ -54,7 +54,7 @@ const Wrapper = styled.nav`
     left: 0;
     right: 0;
     border-top: 1px solid #e0e0e0;
-    background-color: ${theme.colors.grayLightest};
+    background-color: ${theme.colors.white};
     z-index: 1;
     padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
     padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */

src/components/Menu/LanguageSwitcher/LanguageSwitcher.js

@@ -56,6 +56,12 @@ class LanguageSwitcher extends Component {
         localizor.setLanguage(lang);
         this.setState({ currentLanguage: lang });
         document.documentElement.lang = lang;
+        /*TODO For keyBoard issue #171
+        var inputs = document.getElementById('main').getElementsByTagName('input');
+        for (var i = 0; i < inputs.length; i++) {
+            inputs[i].setAttribute("lang",lang);
+        }*/
+
     };
     render() {
         const { localizor } = this.props;

src/modules/config/theme.js

@@ -1,8 +1,8 @@
 export const theme = {
     colors: {
-        primary: "#0071bc",
-        primaryDarker: "#205493",
-        primaryDarkest: "#112e51",
+        primary: "#ffa500",//"#0071bc",
+        primaryDarker: "#ff9400",//"#205493",
+        primaryDarkest: "#eba607",//"#112e51",
         primaryRGB: "0,113,188",
         base: "#212121",
         grayDark: "#323a45",
@@ -12,7 +12,7 @@ export const theme = {
         gray: "#d3d3d3",
         grayRGB: "211,211,211",
         charcoal: "#3d3d3d",
-        white: "#fff",
+        white: "#000",//"#fff",
         offWhite: "#f1f1f1",
         primaryAlt: "#02bfe7",
         primaryAltDarkest: "#046b99",
@@ -24,7 +24,7 @@ export const theme = {
         secondaryDark: "#cd2026",
         secondaryLight: "#e59393",
         secondaryLightest: "#f9dede",
-        gold: "#fdb81e",
+        gold: "#000",//"#fdb81e",
         goldLight: "#f9c642",
         goldLighter: "#fad980",
         goldLightest: "#fff1d2",

src/routes/About/About.js

@@ -6,10 +6,10 @@ import { withLanguageContext } from "../../components/Language";
 
 class About extends Component {
     componentWillUpdate(){
-        document.getElementById("brand-strip-container").setAttribute("tabindex","-1")
-        document.getElementById("navbar-left-items")[0].getElementsByTag("a")[0].setAttribute("tabindex","-1")
-        document.getElementById("menu-btn").setAttribute("tabindex","-1")
-        document.getElementById("main").setAttribute("tabindex","0")
+        // document.getElementById("brand-strip-container").setAttribute("tabindex","-1")
+        // document.getElementById("navbar-left-items")[0].getElementsByTag("a")[0].setAttribute("tabindex","-1")
+        // document.getElementById("menu-btn").setAttribute("tabindex","-1")
+        // document.getElementById("main").setAttribute("tabindex","0")
     }
     render() {
         const { localizor, location } = this.props;

src/routes/Bookmarks/Bookmarks.js

@@ -242,7 +242,7 @@ class Bookmarks extends Component {
                                 </PaddedContent>
                             </Item>
                             <IconWrapper
-                                aria-label="Remove bookmark"
+                                aria-label={"Remove "+ getPropByString(localizor.strings, bookmark.name) + " bookmark."}
                                 onClick={() => {this.markForRemoval(bookmark, i);}}
                             >
                                 <BookmarkIcon/>

src/routes/Home/Home.js

@@ -20,12 +20,13 @@ import homeStep8 from "../../static/images/home_step_8.jpg";
 import homeStep9 from "../../static/images/home_step_9.jpg";
 import homeStep10 from "../../static/images/home_step_10.jpg";
 import homeWhyDevelop from "../../static/images/home_why_develop.jpg";
+import { isBrowser } from "../../modules/utils/platform";
 
 class Home extends Component {
     render() {
         const { localizor } = this.props;
         return (
-            <HomeWrapper aria-hidden="true">
+            <HomeWrapper aria-hidden={isBrowser?"true":"false"}>
 
                 {localizor.strings.steps.map((step, i) => {
                     const bookmarked = storage.bookmarks.containsBookmarks(

src/routes/Search/Search.js

@@ -26,11 +26,11 @@ const SearchLabel = styled.label`
         vertical-align: bottom;
     }
 `;
-
+//TODO below change offWhite to white
 const SearchInput = styled.input`
     display: block;
     color: ${theme.colors.base};
-    background-color: ${theme.colors.white};
+    background-color: ${theme.colors.offWhite};
     border: 1px solid ${theme.colors.charcoal};
     padding: 10px 30px;
     width: 100%;
@@ -388,7 +388,7 @@ class Search extends Component {
                 <h1>{localizor.strings.general.search}</h1>
                 {query && !searching && (
                     <SearchResultsHeader>
-                        <h1 aria-owns="search_result_h1">
+                        <h1 aria-owns="search_result_h1" aria-label={resultsTitle + " " + query}>
                         {resultsTitle}"<span id="search_result_h1" className="query" >{query}</span>"
                         </h1>
                     </SearchResultsHeader>

src/static/data/info/about/en.js

@@ -5,7 +5,7 @@ import StaticData from "../../../../components/StaticData";
 const en = () => {
     return (
         <StaticData>
-            <h1>About the Comply Chain App</h1>
+            <h1 role="heading" aria-level="1">About the Comply Chain App</h1>
             <p>
                 In the era of globalization, the production of goods in foreign
                 countries has increased at a rapid pace. Unfortunately in too

src/static/data/step/3/topic/3/en.js

@@ -14,7 +14,7 @@ const en = () => {
                     Some typical roles that stakeholders can play are highlighted below:
                 </p>
 
-                      <h3>Company employees</h3>
+                      <h2>Company employees</h2>
                         <ul>
                             <li>
                                 Be involved in<strong> code of conduct </strong>
@@ -54,8 +54,8 @@ const en = () => {
                                 with social compliance.
                             </li>
                         </ul>
-                        <h3> Workers in production facilities and worker
-                        representative organizations</h3>
+                        <h2> Workers in production facilities and worker
+                        representative organizations</h2>
                         <ul>
                             <li>
                                 Engage in
@@ -101,7 +101,7 @@ const en = () => {
                             </li>
                         </ul>
 
-                       <h3> Suppliers throughout your supply chain</h3>
+                       <h2> Suppliers throughout your supply chain</h2>
                         <ul>
                             <li>
                                 Be involved in{" "}
@@ -147,8 +147,8 @@ const en = () => {
                             </li>
                         </ul>
 
-                        <h3>Communities and community-based organizations throughout
-                        your supply chain</h3>
+                        <h2>Communities and community-based organizations throughout
+                        your supply chain</h2>
                         <ul>
                             <li>
                                 Provide valuable input into your
@@ -205,7 +205,7 @@ const en = () => {
                             </li>
                         </ul>
 
-                       <h3> National or international civil society organizations</h3>
+                       <h2> National or international civil society organizations</h2>
                         <ul>
                             <li>
                                 Provide valuable input into your
@@ -244,7 +244,7 @@ const en = () => {
                             </li>
                        </ul>
 
-                       <h3> Shareholders and investor groups</h3>
+                       <h2> Shareholders and investor groups</h2>
                         <ul>
                             <li>
                                 Advocate with other shareholders to support the{" "}
@@ -273,7 +273,7 @@ const en = () => {
                         </ul>
 
 
-                       <h3> Other companies in your industry</h3>
+                       <h2> Other companies in your industry</h2>
                         <ul>
                             <li>
                                 Share example<strong> codes of conduct </strong>

src/static/data/step/3/topic/3/es.js

@@ -14,7 +14,7 @@ const es = () => {
                                    de arreglos y vínculos laborales, pueden utilizarse en la participación
                                    de distintas partes interesadas. A continuación, se destacan algunas funciones típicas que desempeñan las partes interesadas:
                                </p>
-                       <h3> Empleados de empresas</h3>
+                       <h2> Empleados de empresas</h2>
                         <ul>
                             <li>
                                 Participan en el
@@ -62,8 +62,8 @@ const es = () => {
                             </li>
                         </ul>
 
-                        <h3>Trabajadores en establecimientos productores y
-                        organizaciones de representaci&oacute;n obrera</h3>
+                        <h2>Trabajadores en establecimientos productores y
+                        organizaciones de representaci&oacute;n obrera</h2>
                         <ul>
                             <li>
                                 Entablan
@@ -115,7 +115,7 @@ const es = () => {
                                 de las infracciones laborales.
                             </li>
                         </ul>
-                       <h3> Los proveedores en su cadena de suministro</h3>
+                       <h2> Los proveedores en su cadena de suministro</h2>
                         <ul>
                             <li>
                                 Participan en la{" "}
@@ -173,8 +173,8 @@ const es = () => {
                             </li>
                         </ul>
 
-                        <h3>Comunidades y organizaciones comunitarias en su cadena
-                        de suministro</h3>
+                        <h2>Comunidades y organizaciones comunitarias en su cadena
+                        de suministro</h2>
                         <ul>
                             <li>
                                 Realizan contribuciones valiosas al
@@ -245,8 +245,8 @@ const es = () => {
                                 empresas en iniciativas para hacerles frente.
                             </li>
                         </ul>
-                       <h3> Organizaciones nacionales o internacionales de la
-                        sociedad civil</h3>
+                       <h2> Organizaciones nacionales o internacionales de la
+                        sociedad civil</h2>
                         <ul>
                             <li>
                                 Realizan contribuciones valiosas al
@@ -290,7 +290,7 @@ const es = () => {
                             </li>
                         </ul>
 
-                       <h3> Accionistas y grupos de inversionistas</h3>
+                       <h2> Accionistas y grupos de inversionistas</h2>
                         <ul>
                             <li>
                                 Promueven con otros accionistas el respaldo del{" "}
@@ -323,7 +323,7 @@ const es = () => {
                             </li>
                         </ul>
 
-                        <h3>Otras empresas en su industria</h3>
+                        <h2>Otras empresas en su industria</h2>
                         <ul>
                             <li>
                                 Intercambian modelos de

src/static/data/step/3/topic/3/fr.js

@@ -15,7 +15,7 @@ const fr = () => {
                       le dialogue avec différentes parties prenantes. Voici quelques-unes
                       des fonctions-type que les parties prenantes peuvent remplir :
                  </p>
-                       <h3> Employ&eacute;s de l&apos;entreprise</h3>
+                       <h2> Employ&eacute;s de l&apos;entreprise</h2>
                         <ul>
                             <li>
                                 Prendre part &agrave; l&apos;&eacute;laboration
@@ -72,8 +72,8 @@ const fr = () => {
                             </li>
                         </ul>
 
-                       <h3> Travailleurs dans les ateliers de production et
-                        organisations de repr&eacute;sentation des travailleurs</h3>
+                       <h2> Travailleurs dans les ateliers de production et
+                        organisations de repr&eacute;sentation des travailleurs</h2>
                         <ul>
                             <li>
                                 Prendre part aux{" "}
@@ -129,8 +129,8 @@ const fr = () => {
                             </li>
                         </ul>
 
-                        <h3>Fournisseurs dans toute votre cha&icirc;ne
-                        d&apos;approvisionnement</h3>
+                        <h2>Fournisseurs dans toute votre cha&icirc;ne
+                        d&apos;approvisionnement</h2>
                         <ul>
                             <li>
                                 Prendre part &agrave; l&apos;
@@ -195,8 +195,8 @@ const fr = () => {
                             </li>
                         </ul>
 
-                <h3>        Communaut&eacute;s et organisations communautaires dans
-                        toute votre cha&icirc;ne d&apos;approvisionnement</h3>
+                <h2>        Communaut&eacute;s et organisations communautaires dans
+                        toute votre cha&icirc;ne d&apos;approvisionnement</h2>
                         <ul>
                             <li>
                                 Fournir des avis utiles pour votre{" "}
@@ -269,8 +269,8 @@ const fr = () => {
                             </li>
                         </ul>
 
-                     <h3>Organisations nationales ou internationales de la
-                        soci&eacute;t&eacute; civile</h3>
+                     <h2>Organisations nationales ou internationales de la
+                        soci&eacute;t&eacute; civile</h2>
                         <ul>
                             <li>
                                 Fournir des avis utiles pour votre{" "}
@@ -321,7 +321,7 @@ const fr = () => {
                                 contre elles.
                             </li>
                         </ul>
-                        <h3>Actionnaires et groupes d&apos;investisseurs</h3>
+                        <h2>Actionnaires et groupes d&apos;investisseurs</h2>
                         <ul>
                             <li>
                                 Pr&eacute;coniser aupr&egrave;s des autres
@@ -357,7 +357,7 @@ const fr = () => {
                                 li&eacute;es &agrave; ses op&eacute;rations.
                             </li>
                         </ul>
-                        <h3>Autres entreprises dans votre industrie</h3>
+                        <h2>Autres entreprises dans votre industrie</h2>
                         <ul>
                             <li>
                                 Partager des exemples de{" "}