geosolutions-it#10158: add aria-labels to maps search bar and home bu…

…tton This required adding some new text to the translation dictionaries. On Behalf of DB Systel
fkellner · Apr 4, 2024 · 0425114 · 0425114
1 parent 53867bf
commit 0425114
Show file tree

Hide file tree

Showing 18 changed files with 103 additions and 81 deletions.
diff --git a/web/client/components/home/Home.jsx b/web/client/components/home/Home.jsx
@@ -49,16 +49,19 @@ class Home extends React.Component {
         let tooltip = <Tooltip id="toolbar-home-button">{<Message msgId="gohome"/>}</Tooltip>;
         return hidden ? false : (
             <React.Fragment>
-                <OverlayTrigger overlay={tooltip} placement={tooltipPosition}>
-                    <Button
-                        id="home-button"
-                        className="square-button"
-                        bsStyle={this.props.bsStyle}
-                        onClick={this.checkUnsavedChanges}
-                        tooltip={tooltip}
-                        {...pick(restProps, ['disabled', 'active', 'block', 'componentClass', 'href', 'children', 'icon', 'bsStyle', 'className'])}
-                    ><Glyphicon glyph={this.props.icon}/></Button>
-                </OverlayTrigger>
+                <Message msgId="gohome">
+                    {(label) => <OverlayTrigger overlay={tooltip} placement={tooltipPosition}>
+                        <Button
+                            id="home-button"
+                            className="square-button"
+                            bsStyle={this.props.bsStyle}
+                            onClick={this.checkUnsavedChanges}
+                            tooltip={tooltip}
+                            aria-label={label}
+                            {...pick(restProps, ['disabled', 'active', 'block', 'componentClass', 'href', 'children', 'icon', 'bsStyle', 'className'])}
+                        ><Glyphicon glyph={this.props.icon}/></Button>
+                    </OverlayTrigger>}
+                </Message>
                 <ConfirmModal
                     ref="unsavedMapModal"
                     show={this.props.displayUnsavedDialog || false}

diff --git a/web/client/components/maps/search/SearchBar.jsx b/web/client/components/maps/search/SearchBar.jsx
@@ -43,62 +43,66 @@ export default ({
     const search = defaultSearchWrapper({searchText, searchOptions, maxResults, onSearch, onSearchReset});
     const isSearchFilterEmpty = !searchFilter || (searchFilter.contexts || []).length === 0;
 
-    return (<SearchBarBase className="maps-search">
-        <FormGroup>
-            <div className="input-group">
-                <SearchBarInput
-                    show
-                    hideOnBlur={false}
-                    typeAhead={false}
-                    placeholderMsgId="maps.search"
-                    searchText={searchText}
-                    onSearch={search}
-                    onSearchTextChange={onSearchTextChange}/>
-                <SearchBarToolbar
-                    splitTools={false}
-                    toolbarButtons={[{
-                        glyph: removeIcon,
-                        className: "square-button-md no-border",
-                        bsStyle: "default",
-                        pullRight: true,
-                        visible: searchText !== "",
-                        onClick: () => onSearchReset()
-                    }, {
-                        glyph: searchIcon,
-                        className: "square-button-md no-border magnifying-glass clickable",
-                        bsStyle: "default",
-                        pullRight: true,
-                        visible: true,
-                        onClick: () => search()
-                    }, {
-                        glyph: advancedSearchIcon,
-                        tooltip: <Message
-                            msgId={`search.advancedSearchPanel.${showAdvancedSearchPanel ? 'hide' : 'show'}Tooltip` +
+    return (
+        <Message msgId="maps.searchButton">{(searchButtonText) => (<Message msgId="queryform.reset">{(resetSearchText) => (
+            <SearchBarBase className="maps-search">
+                <FormGroup>
+                    <div className="input-group">
+                        <SearchBarInput
+                            show
+                            hideOnBlur={false}
+                            typeAhead={false}
+                            placeholderMsgId="maps.search"
+                            searchText={searchText}
+                            onSearch={search}
+                            onSearchTextChange={onSearchTextChange}/>
+                        <SearchBarToolbar
+                            splitTools={false}
+                            toolbarButtons={[{
+                                glyph: removeIcon,
+                                className: "square-button-md no-border",
+                                bsStyle: "default",
+                                pullRight: true,
+                                visible: searchText !== "",
+                                onClick: () => onSearchReset(),
+                                'aria-label': resetSearchText
+                            }, {
+                                glyph: searchIcon,
+                                className: "square-button-md no-border magnifying-glass clickable",
+                                bsStyle: "default",
+                                pullRight: true,
+                                visible: true,
+                                onClick: () => search(),
+                                'aria-label': searchButtonText
+                            }, {
+                                glyph: advancedSearchIcon,
+                                tooltip: <Message
+                                    msgId={`search.advancedSearchPanel.${showAdvancedSearchPanel ? 'hide' : 'show'}Tooltip` +
                             (isSearchFilterEmpty ? '' : 'Active')}/>,
-                        className: "square-button-md no-border " +
+                                className: "square-button-md no-border " +
                             (showAdvancedSearchPanel && showContextSearchOption ? "active" : ""),
-                        bsStyle: isSearchFilterEmpty ? "default" : "success",
-                        pullRight: true,
-                        visible: showContextSearchOption,
-                        onClick: () => {
-                            onToggleControl("advancedsearchpanel");
-                            onLoadContexts('*', {params: {start: 0, limit: 12}});
-                        }
-                    }]}/>
-            </div>
-        </FormGroup>
-        <AdvancedSearch
-            loading={loadingFilter || loadingContexts}
-            loadFlags={{
-                loadingFilter,
-                loadingContexts
-            }}
-            show={showAdvancedSearchPanel}
-            showContextSearchOption={showContextSearchOption}
-            searchFilter={searchFilter}
-            contexts={contexts}
-            onClearAll={onSearchFilterClearAll}
-            onSearchFilterChange={onSearchFilterChange}
-            onLoadContexts={onLoadContexts}/>
-    </SearchBarBase>);
+                                bsStyle: isSearchFilterEmpty ? "default" : "success",
+                                pullRight: true,
+                                visible: showContextSearchOption,
+                                onClick: () => {
+                                    onToggleControl("advancedsearchpanel");
+                                    onLoadContexts('*', {params: {start: 0, limit: 12}});
+                                }
+                            }]}/>
+                    </div>
+                </FormGroup>
+                <AdvancedSearch
+                    loading={loadingFilter || loadingContexts}
+                    loadFlags={{
+                        loadingFilter,
+                        loadingContexts
+                    }}
+                    show={showAdvancedSearchPanel}
+                    showContextSearchOption={showContextSearchOption}
+                    searchFilter={searchFilter}
+                    contexts={contexts}
+                    onClearAll={onSearchFilterClearAll}
+                    onSearchFilterChange={onSearchFilterChange}
+                    onLoadContexts={onLoadContexts}/>
+            </SearchBarBase>)}</Message>)}</Message>);
 };
diff --git a/web/client/product/components/viewer/Home.jsx b/web/client/product/components/viewer/Home.jsx
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
  */
 import React from 'react';
 
-import { Glyphicon, Tooltip } from 'react-bootstrap';
+import { Glyphicon } from 'react-bootstrap';
 import ToggleButton from '../../../components/buttons/ToggleButton';
 import Message from '../../../components/I18N/Message';
 

diff --git a/web/client/translations/data.da-DK.json b/web/client/translations/data.da-DK.json
@@ -387,7 +387,8 @@
         "errorSizeExceeded": "Please, reduce the size or the quality of the images",
         "errorLoadingContexts": "An error occurred during contexts loading"
       },
-      "search": "search..."
+      "search": "search...",
+      "searchButton": "Search in Maps"
     },
     "resources": {
       "successSaved": "This resource has been saved correctly",

diff --git a/web/client/translations/data.de-DE.json b/web/client/translations/data.de-DE.json
@@ -458,7 +458,8 @@
                 "errorSizeExceeded": "Bitte verkleinern Sie die Größe der Details oder die Qualität der Bilder",
                 "errorLoadingContexts": "Beim Laden des Karten-Kontexts ist ein Fehler aufgetreten"
             },
-            "search": "Suche..."
+            "search": "Suche...",
+            "searchButton": "Suche in Karten"
         },
         "resources": {
             "successSaved": "Diese Ressource wurde korrekt gespeichert",

diff --git a/web/client/translations/data.en-US.json b/web/client/translations/data.en-US.json
@@ -420,7 +420,8 @@
                 "errorSizeExceeded": "Please, reduce the size or the quality of the images",
                 "errorLoadingContexts": "An error occurred during contexts loading"
             },
-			"search": "search..."
+			"search": "search...",
+      "searchButton": "Search in Maps"
 		},
         "resources": {
             "successSaved": "This resource has been saved correctly",

diff --git a/web/client/translations/data.es-ES.json b/web/client/translations/data.es-ES.json
@@ -420,7 +420,8 @@
                 "errorSizeExceeded": "Por favor, reduzca el tamaño de los detalles o la calidad de las imágenes",
                 "errorLoadingContexts": "Se produjo un error durante la carga de contextos"
             },
-            "search": "buscar..."
+            "search": "buscar...",
+            "searchButton": "Buscar mapas"
         },
         "resources": {
             "successSaved": "Este recurso se ha guardado correctamente",

diff --git a/web/client/translations/data.fi-FI.json b/web/client/translations/data.fi-FI.json
@@ -278,7 +278,8 @@
         "errorWhenDeleting": "Virhe poiston aikana",
         "errorSizeExceeded": "Pienennä yksityiskohtien kokoa tai kuvien laatua"
       },
-      "search": "Haku..."
+      "search": "Haku...",
+      "searchButton": "Hae karttoja"
     },
     "resources": {
       "successSaved": "Tämä resurssi on tallennettu oikein",

diff --git a/web/client/translations/data.fr-FR.json b/web/client/translations/data.fr-FR.json
@@ -420,7 +420,8 @@
                 "errorSizeExceeded": "S'il vous plaît, réduisez la taille ou la qualité des images",
                 "errorLoadingContexts": "Une erreur s'est produite lors du chargement des contextes"
             },
-            "search": "rechercher ..."
+            "search": "rechercher ...",
+          "searchButton": "Rechercher des cartes"
         },
         "resources": {
             "successSaved": "Cette ressource a été enregistrée correctement",

diff --git a/web/client/translations/data.hr-HR.json b/web/client/translations/data.hr-HR.json
@@ -277,7 +277,8 @@
                 "errorWhenDeleting": "Došlo je do greške prilikom postupka brisanja",
                 "errorSizeExceeded": "Molimo, smanjite veličinu detalja ili kvalitetu slika"
             },
-			"search": "pretraži karte..."
+			"search": "pretraži karte...",
+        "searchButton": "Pretraži karte"
 		},
         "resources": {
             "deleteConfirmTitle": "Jeste li sigurni",

diff --git a/web/client/translations/data.is-IS.json b/web/client/translations/data.is-IS.json
@@ -391,7 +391,8 @@
         "errorSizeExceeded": "Please, reduce the size or the quality of the images",
         "errorLoadingContexts": "An error occurred during contexts loading"
       },
-      "search": "search..."
+      "search": "search...",
+      "searchButton": "Search for maps"
     },
     "resources": {
       "successSaved": "This resource has been saved correctly",

diff --git a/web/client/translations/data.it-IT.json b/web/client/translations/data.it-IT.json
@@ -420,7 +420,8 @@
                 "errorSizeExceeded": "Riduci il contenuto o la qualità delle immagini",
                 "errorLoadingContexts": "Si è verificato un errore durante il caricamento dei contesti"
             },
-			"search": "Cerca..."
+			"search": "Cerca...",
+      "searchButton": "Cerca mappe"
 		},
         "resources": {
             "successSaved": "Questa risorsa è stata salvata correttamente",

diff --git a/web/client/translations/data.nl-NL.json b/web/client/translations/data.nl-NL.json
@@ -408,7 +408,8 @@
                 "errorSizeExceeded": "Gelieve de afbeeldingen te verkleinen of de kwaliteit te verlagen",
                 "errorLoadingContexts": "Er is een fout opgetreden tijdens het laden van app-contexts"
             },
-			"search": "Zoeken..."
+			"search": "Zoeken...",
+      "searchButton": "Zoek kaarten"
 		},
         "resources": {
             "successSaved": "Deze resource is correct opgeslagen",

diff --git a/web/client/translations/data.pt-PT.json b/web/client/translations/data.pt-PT.json
@@ -279,7 +279,8 @@
               "errorWhenDeleting": "Ocorreu um erro durante o processo de remoção",
               "errorSizeExceeded": "Por favor, reduza a quantidade dos detalhes ou a qualidade das imagens"
           },
-    			"search": "pesquisar..."
+    			"search": "pesquisar...",
+          "searchButton": "Pesquisar mapas"
     		},
         "resources": {
             "deleteConfirmTitle": "Tem a certeza",

diff --git a/web/client/translations/data.sk-SK.json b/web/client/translations/data.sk-SK.json
@@ -371,7 +371,8 @@
                 "errorSizeExceeded": "Prosím, zníž veľkosť alebo kvalitu obrázkov",
                 "errorLoadingContexts": "An error occurred during contexts loading"
             },
-			"search": "Vyhľadávanie..."
+			"search": "Vyhľadávanie...",
+      "searchButton": "Vyhľadajte mapy"
 		},
         "resources": {
             "successSaved": "Zdroj sa úspešne uložil",

diff --git a/web/client/translations/data.sv-SE.json b/web/client/translations/data.sv-SE.json
@@ -341,7 +341,8 @@
                 "errorSizeExceeded": "Prova att minska storleken eller kvaliteten på bilderna",
                 "errorLoadingContexts": "Ett fel uppstod när webbkarta laddades"
             },
-			"search": "Sök..."
+			"search": "Sök...",
+      "searchButton": "Sök kartor"
 		},
         "resources": {
             "successSaved": "Den här resursen har sparats korrekt",

diff --git a/web/client/translations/data.vi-VN.json b/web/client/translations/data.vi-VN.json
@@ -833,6 +833,7 @@
             },
             "removeFromFeaturedMaps": "Xóa khỏi bản đồ đặc trưng",
             "search": "Tìm kiếm...",
+            "searchButton": "Tìm kiếm bản đồ",
             "title": "Bản đồ"
         },
         "markNameSelector": {

diff --git a/web/client/translations/data.zh-ZH.json b/web/client/translations/data.zh-ZH.json
@@ -278,7 +278,8 @@
                 "errorWhenDeleting": "An error occurred during deleting process",
                 "errorSizeExceeded": "Please, reduce the size of the details or the quality of the images"
             },
-			"search": "搜索地图..."
+			"search": "搜索地图...",
+      "searchButton": "搜索地图"
 		},
         "resources": {
             "deleteConfirmTitle": "Are you sure",