Changed all headings from h1 to h2

Author: Htbaa

CHANGELOG.md

@@ -1,4 +1,6 @@
-- In de vorige versies werd bij het openen van het feature modal een standaard `padding-right` van `17px` op de `body` class toegepast (`body.gh-dim-modal-open`) om de ruimte te compenseren voor het verwijderen van de browser scrollbar. Deze waarde kan echter verschillen per scherm en device en wordt daarom nu dynamisch bepaald en wordt direct toegepast op `body.style.paddingRight`. Mogelijk heeft dit invloed op eigen styling.
+- **Let op!** Er zijn diverse aanpassingen doorgevoerd die invloed kunnen hebben op hoe DataInMap wordt weergegeven. Bij een eigen stylesheet moeten mogelijk ook wijzigingen worden doorgevoerd. Lees onderstaande notities goed door!
+- De diverse componenten maakten gebruik van `h1`-koppen. Dit is aangepast naar `h2`, zodat een pagina beperkt kan blijven tot één `h1`-kop.
+- In de vorige versies werd bij het openen van het feature modal een standaard `padding-right` van `17px` op de `body` toegepast (`body.gh-dim-modal-open`) om de ruimte te compenseren voor het verwijderen van de browser scrollbar. Deze waarde kan echter verschillen per scherm en device en wordt daarom nu dynamisch bepaald en wordt direct toegepast op `body.style.paddingRight`.
 
 **1.10.11 (2023-11-28)**
 

src/components/feature.js

@@ -40,7 +40,7 @@ class KMLFeatureComponent extends Component {
         return (
             <>
                 <header>
-                    <h1>{feature.name}</h1>
+                    <h2>{feature.name}</h2>
                     <CloseModal onClick={() => this.props.closeModal()} />
                 </header>
                 <section className="gh-dim-feature-content" dangerouslySetInnerHTML={{__html: feature.description}} tabIndex="0" />
@@ -59,7 +59,7 @@ class WMSFeatureComponent extends Component {
         return (
             <>
                 <header>
-                    <h1>Informatie</h1>
+                    <h2>Informatie</h2>
                     <CloseModal onClick={() => this.props.closeModal()} />
                 </header>
                 <section className="gh-dim-feature-content" dangerouslySetInnerHTML={{__html: feature}} tabIndex="0" />
@@ -84,7 +84,7 @@ class DIMFeatureComponent extends Component {
         return (
             <>
                 <header>
-                    <h1 dangerouslySetInnerHTML={{__html: title}}></h1>
+                    <h2 dangerouslySetInnerHTML={{__html: title}}></h2>
                     <CloseModal onClick={() => this.props.closeModal()} />
                 </header>
                 <section className="gh-dim-feature-content" dangerouslySetInnerHTML={{__html: feature.content}} tabIndex="0" />

src/components/featureslistbox.js

@@ -136,7 +136,7 @@ class FeaturesListboxComponent extends Component {
             <div className="gh-dim-features-listbox" tabIndex="0" onKeyDown={(e) => this.keyboardNavigation(e)} onBlur={(e) => this.setState({currentResult: null})}>
                 <section aria-labelledby={this.headerId}>
                     <header>
-                        <h1 id={this.headerId}>Gevonden locaties <span>({totalResults > 100 ? '100+' : totalResults})</span></h1>
+                        <h2 id={this.headerId}>Gevonden locaties <span>({totalResults > 100 ? '100+' : totalResults})</span></h2>
                     </header>
                     <div className="gh-dim-features-listbox-content" ref={this.listboxContainer}>
                         <ul aria-live="polite" role="listbox" aria-label="Locaties zichtbaar op de kaart" aria-activedescendant={activeDescendant} aria-expanded={expanded}>

src/components/filter.js

@@ -56,7 +56,7 @@ export class FilterComponent extends Component {
             <div className="gh-dim-filter" tabIndex="0" onKeyDown={blur}>
                 <section aria-labelledby={id}>
                     <header>
-                        <h1 id={id}>Filters</h1>
+                        <h2 id={id}>Filters</h2>
                     </header>
                     <div className="gh-dim-filters">
                         {this.props.description &&

src/components/toggler.js

@@ -73,7 +73,7 @@ export class TogglerComponent extends Component {
             <div className="gh-dim-toggler" tabIndex="0" onKeyDown={blur}>
                 <section aria-labelledby={id}>
                     <header>
-                        <h1 id={id}>Lagen</h1>
+                        <h2 id={id}>Lagen</h2>
                     </header>
                     <div className="gh-dim-togglers">
                         {this.props.description &&

src/scss/style.scss

@@ -85,7 +85,7 @@ $shadow-color: rgba(0, 0, 0, 0.5);
             }
         }
 
-        header h1 {
+        header h2 {
             background-color:$bgcolor-button-hover;
             text-align:left;
         }
@@ -94,7 +94,7 @@ $shadow-color: rgba(0, 0, 0, 0.5);
     header {
         margin:0 -20px;
         background-color:$bgcolor-button-neutral;
-        h1 {
+        h2 {
             @include font-size(14px);
             margin:0;
             padding:10px;
@@ -355,15 +355,15 @@ $shadow-color: rgba(0, 0, 0, 0.5);
                 }
             }
 
-            header h1 {
+            header h2 {
                 background-color:$bgcolor-button-hover;
             }
         }
 
         header {
             margin:0 -20px;
             background-color:$bgcolor-button-neutral;
-            h1 {
+            h2 {
                 @include font-size(14px);
                 margin:0;
                 padding:10px;
@@ -461,7 +461,7 @@ body.gh-dim-modal-open {
             padding:10px 0px 15px 15px;
             background-color:$bgcolor-feature-header;
             border-radius:6px 6px 0 0;
-            h1 {
+            h2 {
                 @include font-size(24px);
                 margin:0;
                 color:#FFF;