Merge pull request #12315 from MoonE/accessibility-attributions

Improve attribution accessibility

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(!this.collapsed_));
+    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_));
   }
 
   /**

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;