From 6f6b28aa4c5568a9c01fe9fafd77dd3c3129da08 Mon Sep 17 00:00:00 2001
From: fkellner <mr.florian.kellner@posteo.de>
Date: Fri, 13 Sep 2024 16:44:39 +0200
Subject: [PATCH] #10158 painless accessibility improvements (#10159)

* geosolutions-it#10158: set HTML document language

On Behalf of DB Systel

* geosolutions-it#10158: re-enable browser zoom

Too much Zoom does seem to break the layout, but handing that responsibility to the end user is more accessible than
disabling it. Map zoom is unaffected, and since using browser zoom enlarges map controls, users who tried zooming
into the map using browser zoom should be able to notice the actual controls and recover from their mistake.

On Behalf of DB Systel

* geosolutions-it#10158: Tiny Accessibility Fixes

- Convert heading that, semantically, should not be a heading, to a div
- correctly assign label to scalebox
- add alt tag to attribution logo

On Behalf of DB Systel

* geosolutions-it#10158: set HTML document language once per mount/update

As requested, the document language is now set when the component is mounted or the language is changed instead of with every rerender.

---------

Co-authored-by: Florian Kellner <florian.fl.kellner@deutschebahn.com>
---
 web/client/components/I18N/Localized.jsx         | 16 ++++++++++++++++
 .../components/I18N/__tests__/Localized-test.jsx | 15 +++++++++++++++
 .../components/mapcontrols/scale/ScaleBox.jsx    |  4 ++--
 web/client/components/misc/PaginationToolbar.jsx |  2 +-
 web/client/index.html                            |  2 +-
 web/client/indexTemplate.html                    |  2 +-
 web/client/product/plugins/Attribution.jsx       |  2 +-
 7 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/web/client/components/I18N/Localized.jsx b/web/client/components/I18N/Localized.jsx
index 0f56f3b819..a810e72155 100644
--- a/web/client/components/I18N/Localized.jsx
+++ b/web/client/components/I18N/Localized.jsx
@@ -32,6 +32,16 @@ class Localized extends React.Component {
         };
     }
 
+    componentDidMount() {
+        this.updateDocumentLangAttribute();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (this.props.locale !== prevProps.locale) {
+            this.updateDocumentLangAttribute();
+        }
+    }
+
     render() {
         let { children } = this.props;
 
@@ -63,6 +73,12 @@ class Localized extends React.Component {
             };
         }, {});
     };
+
+    updateDocumentLangAttribute() {
+        if (document?.documentElement) {
+            document.documentElement.setAttribute("lang", this.props.locale);
+        }
+    }
 }
 
 export default Localized;
diff --git a/web/client/components/I18N/__tests__/Localized-test.jsx b/web/client/components/I18N/__tests__/Localized-test.jsx
index 829b0a70eb..91ab7542d4 100644
--- a/web/client/components/I18N/__tests__/Localized-test.jsx
+++ b/web/client/components/I18N/__tests__/Localized-test.jsx
@@ -40,6 +40,21 @@ describe('Test the localization support HOC', () => {
         expect(dom.innerHTML).toBe("my message");
     });
 
+    it('correctly sets the document language', () => {
+        ReactDOM.render(
+            <Localized locale="it-IT" messages={messages}>
+                {() => <Message msgId="testMsg"/> }
+            </Localized>
+            , document.getElementById("container"));
+        expect(document.documentElement.lang).toBe("it-IT");
+        ReactDOM.render(
+            <Localized locale="de-DE" messages={messages}>
+                {() => <Message msgId="testMsg"/> }
+            </Localized>
+            , document.getElementById("container"));
+        expect(document.documentElement.lang).toBe("de-DE");
+    });
+
     it('localizes wrapped HTML component', () => {
         var localized = ReactDOM.render(
             <Localized locale="it-IT" messages={messages}>
diff --git a/web/client/components/mapcontrols/scale/ScaleBox.jsx b/web/client/components/mapcontrols/scale/ScaleBox.jsx
index 39333c2303..eebb3d5bad 100644
--- a/web/client/components/mapcontrols/scale/ScaleBox.jsx
+++ b/web/client/components/mapcontrols/scale/ScaleBox.jsx
@@ -73,8 +73,8 @@ class ScaleBox extends React.Component {
         } else {
             control =
                 (<Form inline><FormGroup bsSize="small">
-                    <ControlLabel>{this.props.label}</ControlLabel>
-                    <FormControl componentClass="select" onChange={this.onComboChange} value={currentZoomLvl || ""}>
+                    <ControlLabel htmlFor="scaleBox">{this.props.label}</ControlLabel>
+                    <FormControl id="scaleBox" componentClass="select" onChange={this.onComboChange} value={currentZoomLvl || ""}>
                         {this.getOptions()}
                     </FormControl>
                 </FormGroup></Form>)
diff --git a/web/client/components/misc/PaginationToolbar.jsx b/web/client/components/misc/PaginationToolbar.jsx
index f9e6c99038..5a6d710914 100644
--- a/web/client/components/misc/PaginationToolbar.jsx
+++ b/web/client/components/misc/PaginationToolbar.jsx
@@ -65,7 +65,7 @@ class PaginationToolbar extends React.Component {
                         onSelect={this.onSelect} />
                 </Col>
                 <Col xs={12}>
-                    <h5>{this.props.loading ? <Message msgId="loading"/> : msg}</h5>
+                    <div>{this.props.loading ? <Message msgId="loading"/> : msg}</div>
                 </Col>
             </Row>
         );
diff --git a/web/client/index.html b/web/client/index.html
index d7f952eaf2..c868c1bf74 100644
--- a/web/client/index.html
+++ b/web/client/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>MapStore HomePage</title>
         <style>
         body {
diff --git a/web/client/indexTemplate.html b/web/client/indexTemplate.html
index 7215e2cfab..1e70ff949a 100644
--- a/web/client/indexTemplate.html
+++ b/web/client/indexTemplate.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>MapStore HomePage</title>
     <style>
     body {
diff --git a/web/client/product/plugins/Attribution.jsx b/web/client/product/plugins/Attribution.jsx
index f2e18e60b7..dce7740c2b 100644
--- a/web/client/product/plugins/Attribution.jsx
+++ b/web/client/product/plugins/Attribution.jsx
@@ -48,7 +48,7 @@ export default {
                 position: 0,
                 label: props.label || 'GeoSolutions',
                 href: props.href || 'https://www.geosolutionsgroup.com/',
-                img: props.src && <img className="customer-logo" src={props.src} height="30" /> || <img className="customer-logo" src={src} height="30" />,
+                img: props.src && <img className="customer-logo" src={props.src} height="30" alt={props.label || 'GeoSolutions'} /> || <img className="customer-logo" src={src} height="30" alt={props.label || 'GeoSolutions'} />,
                 logo: true
             })
         }