From fc9e3e5610da22103d1a4480cbd86250546d76e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Thu, 13 May 2021 16:35:57 +0200
Subject: [PATCH 1/2] Improve attribution accessibility

Tab order of attribution text should be after the toggle button
Add aria-expanded state to the toggle button.
---
 src/ol/control/Attribution.js | 19 +++++++++++++------
 src/ol/ol.css                 | 10 ++++++----
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/ol/control/Attribution.js b/src/ol/control/Attribution.js
index b8ccc8f1ee..b72620b60b 100644
--- a/src/ol/control/Attribution.js
+++ b/src/ol/control/Attribution.js
@@ -140,12 +140,18 @@ class Attribution extends Control {
 
     const activeLabel =
       this.collapsible_ && !this.collapsed_ ? this.collapseLabel_ : this.label_;
-    const button = document.createElement('button');
-    button.setAttribute('type', 'button');
-    button.title = tipLabel;
-    button.appendChild(activeLabel);
 
-    button.addEventListener(
+    /**
+     * @private
+     * @type {HTMLElement}
+     */
+    this.toggleButton_ = document.createElement('button');
+    this.toggleButton_.setAttribute('type', 'button');
+    this.toggleButton_.setAttribute('aria-expanded', String(false));
+    this.toggleButton_.title = tipLabel;
+    this.toggleButton_.appendChild(activeLabel);
+
+    this.toggleButton_.addEventListener(
       EventType.CLICK,
       this.handleClick_.bind(this),
       false
@@ -161,8 +167,8 @@ class Attribution extends Control {
       (this.collapsible_ ? '' : ' ol-uncollapsible');
     const element = this.element;
     element.className = cssClasses;
+    element.appendChild(this.toggleButton_);
     element.appendChild(this.ulElement_);
-    element.appendChild(button);
 
     /**
      * A list of currently rendered resolutions.
@@ -301,6 +307,7 @@ class Attribution extends Control {
       replaceNode(this.label_, this.collapseLabel_);
     }
     this.collapsed_ = !this.collapsed_;
+    this.toggleButton_.setAttribute('aria-expanded', String(!this.collapsed_));
   }
 
   /**
diff --git a/src/ol/ol.css b/src/ol/ol.css
index 1f6dfd7f93..0e5d3e2768 100644
--- a/src/ol/ol.css
+++ b/src/ol/ol.css
@@ -178,11 +178,13 @@
   bottom: .5em;
   right: .5em;
   max-width: calc(100% - 1.3em);
+  display: flex;
+  flex-flow: row-reverse;
+  align-items: flex-end;
 }
-
 .ol-attribution ul {
   margin: 0;
-  padding: 0 .5em;
+  padding: 1px .5em;
   color: #000;
   text-shadow: 0 0 2px #fff;
 }
@@ -198,8 +200,8 @@
   max-width: inherit;
   vertical-align: middle;
 }
-.ol-attribution ul, .ol-attribution button {
-  display: inline-block;
+.ol-attribution button {
+  flex-shrink: 0;
 }
 .ol-attribution.ol-collapsed ul {
   display: none;

From 99aa3b26409a40ab43ab037499462e60c70ef5c6 Mon Sep 17 00:00:00 2001
From: MoonE <maxi_kroeg@web.de>
Date: Fri, 14 May 2021 21:03:51 +0200
Subject: [PATCH 2/2] Correctly initialize attribution aria state

Co-authored-by: Marc Jansen <jansen@terrestris.de>
---
 src/ol/control/Attribution.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ol/control/Attribution.js b/src/ol/control/Attribution.js
index b72620b60b..7d1ff8234a 100644
--- a/src/ol/control/Attribution.js
+++ b/src/ol/control/Attribution.js
@@ -147,7 +147,7 @@ class Attribution extends Control {
      */
     this.toggleButton_ = document.createElement('button');
     this.toggleButton_.setAttribute('type', 'button');
-    this.toggleButton_.setAttribute('aria-expanded', String(false));
+    this.toggleButton_.setAttribute('aria-expanded', String(!this.collapsed_));
     this.toggleButton_.title = tipLabel;
     this.toggleButton_.appendChild(activeLabel);