diff --git a/src/ol/control/Attribution.js b/src/ol/control/Attribution.js index b8ccc8f1ee..7d1ff8234a 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(!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_)); } /** 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;