#10158 painless accessibility improvements (#10159) (#10547)

* #10158: set HTML document language On Behalf of DB Systel * #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 * #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 * #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: fkellner <[email protected]> Co-authored-by: Florian Kellner <[email protected]>
geosolutions-it · Sep 16, 2024 · a4e4f36 · a4e4f36
1 parent cc3eaea
commit a4e4f36
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
             })
         }