ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #12315 from MoonE/accessibility-attributions

Browse Source 
Improve attribution accessibility
This commit is contained in:
MoonE
2021-05-14 21:18:43 +02:00
committed by GitHub
parent ac9187c9bf 99aa3b2640
commit f66fc99bd8
2 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/ol/control/Attribution.js
View File

@@ -140,12 +140,18 @@ class Attribution extends Control {
const activeLabel = const activeLabel =
this.collapsible_ && !this.collapsed_ ? this.collapseLabel_ : this.label_; 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, EventType.CLICK,
this.handleClick_.bind(this), this.handleClick_.bind(this),
false false
@@ -161,8 +167,8 @@ class Attribution extends Control {
(this.collapsible_ ? '' : ' ol-uncollapsible'); (this.collapsible_ ? '' : ' ol-uncollapsible');
const element = this.element; const element = this.element;
element.className = cssClasses; element.className = cssClasses;
element.appendChild(this.toggleButton_);
element.appendChild(this.ulElement_); element.appendChild(this.ulElement_);
element.appendChild(button);
/** /**
* A list of currently rendered resolutions. * A list of currently rendered resolutions.
@@ -301,6 +307,7 @@ class Attribution extends Control {
replaceNode(this.label_, this.collapseLabel_); replaceNode(this.label_, this.collapseLabel_);
} }
this.collapsed_ = !this.collapsed_; this.collapsed_ = !this.collapsed_;
this.toggleButton_.setAttribute('aria-expanded', String(!this.collapsed_));
} }
/** /**

10
src/ol/ol.css
View File

@@ -178,11 +178,13 @@
bottom: .5em; bottom: .5em;
right: .5em; right: .5em;
max-width: calc(100% - 1.3em); max-width: calc(100% - 1.3em);
display: flex;
flex-flow: row-reverse;
align-items: flex-end;
} }
.ol-attribution ul { .ol-attribution ul {
margin: 0; margin: 0;
padding: 0 .5em; padding: 1px .5em;
color: #000; color: #000;
text-shadow: 0 0 2px #fff; text-shadow: 0 0 2px #fff;
} }
@@ -198,8 +200,8 @@
max-width: inherit; max-width: inherit;
vertical-align: middle; vertical-align: middle;
} }
.ol-attribution ul, .ol-attribution button { .ol-attribution button {
display: inline-block; flex-shrink: 0;
} }
.ol-attribution.ol-collapsed ul { .ol-attribution.ol-collapsed ul {
display: none; display: none;