Skip to content

Change introduced <a> controls to use <button> #488

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 20, 2021
Merged

Change introduced <a> controls to use <button> #488

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fc986e3
Add generic `mapml-button` class
Malvoz Jul 19, 2021
4269b17
Change context menu items from `<a>` to `<button>`
Malvoz Jul 19, 2021
de284d9
Change `mapml-reload-button` from `<a>` to `<button>`
Malvoz Jul 19, 2021
eb0a10f
Change `mapml-popup-button` from `<a>` to `<button>`
Malvoz Jul 19, 2021
af9a62b
Change `mapml-layer-remove-button` from `<a>` to `<button>`
Malvoz Jul 19, 2021
726633c
Correct comment in Focus Controls test
Malvoz Jul 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 45 additions & 7 deletions src/mapml.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,25 @@
* Controls.
*/

/* Generic class for seamless buttons */
.mapml-button {
background-color: transparent;
border: none;
border-radius: 0;
color: inherit;
font: inherit;
line-height: inherit;
margin: 0;
padding: 0;
overflow: hidden;
text-align: left;
text-align: inline-start;
text-transform: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.leaflet-top .leaflet-control {
margin-top: 5px;
}
Expand All @@ -54,13 +73,25 @@
margin-left: 5px;
}

.leaflet-bar a {
.leaflet-bar a,
.mapml-reload-button {
background-color: #fff;
box-sizing: border-box;
width: 44px !important;
height: 44px !important;
line-height: 44px !important;
font-size: 34px !important;
font-weight: normal;
text-align: center;
}

.mapml-reload-button:not([aria-disabled="true"]):hover {
background-color: #f4f4f4;
}

.mapml-reload-button[aria-disabled="true"] {
color: #bbb;
cursor: default;
}

.leaflet-control-layers-toggle {
Expand All @@ -69,11 +100,13 @@
}

.leaflet-bar a,
.leaflet-control-layers {
.leaflet-control-layers,
.mapml-reload-button {
border-color: #e3e3e3 !important;
}

.leaflet-control-layers {
.leaflet-control-layers,
.mapml-reload-button {
border-radius: 4px !important;
}
.leaflet-touch .leaflet-bar a:last-child {
Expand Down Expand Up @@ -226,7 +259,7 @@
cursor: default;
}

.mapml-contextmenu a.mapml-contextmenu-item {
.mapml-contextmenu button.mapml-contextmenu-item {
display: block;
color: #222;
font-size: 12px;
Expand All @@ -236,9 +269,10 @@
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
cursor: default;
width: 100%;
}

.mapml-contextmenu a.mapml-contextmenu-item.over {
.mapml-contextmenu button.mapml-contextmenu-item.over {
background-color: #f4f4f4;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
Expand Down Expand Up @@ -448,6 +482,10 @@ summary {
font-weight: bold;
background: transparent;
white-space: nowrap;
box-sizing: border-box;
width: 44px;
height: 44px;
line-height: 44px;
}

.mapml-focus-buttons {
Expand All @@ -461,7 +499,7 @@ summary {
padding: 2px;
}

.mapml-focus-buttons a,
.mapml-focus-buttons button,
.leaflet-container a.leaflet-popup-close-button {
width: 44px;
height: 44px;
Expand All @@ -480,7 +518,7 @@ summary {
display: block;
text-align: center;
}
.mapml-focus-buttons a {
.mapml-focus-buttons button {
display: inline-block;
padding: 0;
}
Expand Down
8 changes: 4 additions & 4 deletions src/mapml/control/ReloadButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ export var ReloadButton = L.Control.extend({
onAdd: function (map) {
let container = L.DomUtil.create("div", "mapml-reload-button leaflet-bar");

let link = L.DomUtil.create("a", "mapml-reload-button", container);
link.innerHTML = "&#x021BA";
link.href = "#";
let link = L.DomUtil.create("button", "mapml-reload-button", container);
link.innerHTML = "<span aria-hidden='true'>&#x021BA</span>";
link.title = "Reload";
link.setAttribute('role', 'button');
link.setAttribute("type", "button");
link.classList.add("mapml-button");
link.setAttribute('aria-label', "Reload");

L.DomEvent.disableClickPropagation(link);
Expand Down
6 changes: 3 additions & 3 deletions src/mapml/handlers/ContextMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,13 +324,13 @@ export var ContextMenu = L.Handler.extend({
}

var itemCls = 'mapml-contextmenu-item',
el = this._insertElementAt('a', itemCls, container, index),
el = this._insertElementAt('button', itemCls, container, index),
callback = this._createEventHandler(el, options.callback, options.context, options.hideOnSelect),
html = '';

el.innerHTML = html + options.text;
el.href = "#";
el.setAttribute("role","button");
el.setAttribute("type", "button");
el.classList.add("mapml-button");
if(options.popup){
el.setAttribute("aria-haspopup", "true");
el.setAttribute("aria-expanded", "false");
Expand Down
27 changes: 11 additions & 16 deletions src/mapml/layers/MapLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,12 +497,11 @@ export var MapMLLayer = L.Layer.extend({

summaryContainer.classList.add('mapml-control-summary-container');

let removeButton = document.createElement('a');
removeButton.href = '#';
removeButton.role = 'button';
let removeButton = document.createElement('button');
removeButton.type = 'button';
removeButton.title = 'Remove Layer';
removeButton.innerHTML = "<span aria-hidden='true'>&#10006;</span>";
removeButton.classList.add('mapml-layer-remove-button');
removeButton.classList.add('mapml-layer-remove-button', 'mapml-button');
L.DomEvent.disableClickPropagation(removeButton);
L.DomEvent.on(removeButton, 'click', L.DomEvent.stop);
L.DomEvent.on(removeButton, 'click', (e)=>{
Expand Down Expand Up @@ -1203,9 +1202,8 @@ export var MapMLLayer = L.Layer.extend({
let div = L.DomUtil.create("nav", "mapml-focus-buttons");

// creates |< button, focuses map
let mapFocusButton = L.DomUtil.create('a',"mapml-popup-button", div);
mapFocusButton.href = '#';
mapFocusButton.role = "button";
let mapFocusButton = L.DomUtil.create("button", "mapml-popup-button", div);
mapFocusButton.type = "button";
mapFocusButton.title = "Focus Map";
mapFocusButton.innerHTML = "<span aria-hidden='true'>|&#10094;</span>";
L.DomEvent.disableClickPropagation(mapFocusButton);
Expand All @@ -1216,9 +1214,8 @@ export var MapMLLayer = L.Layer.extend({
}, popup);

// creates < button, focuses previous feature, if none exists focuses the current feature
let previousButton = L.DomUtil.create('a', "mapml-popup-button", div);
previousButton.href = '#';
previousButton.role = "button";
let previousButton = L.DomUtil.create("button", "mapml-popup-button", div);
previousButton.type = "button";
previousButton.title = "Previous Feature";
previousButton.innerHTML = "<span aria-hidden='true'>&#10094;</span>";
L.DomEvent.disableClickPropagation(previousButton);
Expand All @@ -1231,19 +1228,17 @@ export var MapMLLayer = L.Layer.extend({
featureCount.innerText = (popup._count + 1)+"/"+totalFeatures;

// creates > button, focuses next feature, if none exists focuses the current feature
let nextButton = L.DomUtil.create('a', "mapml-popup-button", div);
nextButton.href = '#';
nextButton.role = "button";
let nextButton = L.DomUtil.create("button", "mapml-popup-button", div);
nextButton.type = "button";
nextButton.title = "Next Feature";
nextButton.innerHTML = "<span aria-hidden='true'>&#10095;</span>";
L.DomEvent.disableClickPropagation(nextButton);
L.DomEvent.on(nextButton, 'click', L.DomEvent.stop);
L.DomEvent.on(nextButton, 'click', layer._nextFeature, popup);

// creates >| button, focuses map controls
let controlFocusButton = L.DomUtil.create('a',"mapml-popup-button", div);
controlFocusButton.href = '#';
controlFocusButton.role = "button";
let controlFocusButton = L.DomUtil.create("button", "mapml-popup-button", div);
controlFocusButton.type = "button";
controlFocusButton.title = "Focus Controls";
controlFocusButton.innerHTML = "<span aria-hidden='true'>&#10095;|</span>";
L.DomEvent.disableClickPropagation(controlFocusButton);
Expand Down
4 changes: 2 additions & 2 deletions test/e2e/core/featureLinks.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ jest.setTimeout(50000);

test("[" + browserType + "]" + " Sub-point inplace link adds new layer, parent feature has separate link", async () => {
await page.hover(".leaflet-top.leaflet-right");
await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > details > summary > div > a");
await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > details > summary > div > button");
await page.click("body > map");
for(let i = 0; i < 6; i++)
await page.keyboard.press("Tab");
Expand Down Expand Up @@ -68,7 +68,7 @@ jest.setTimeout(50000);
describe("Main Part Link Tests in " + browserType, () => {
test("[" + browserType + "]" + " Main part adds new layer", async () => {
await page.hover(".leaflet-top.leaflet-right");
await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > details > summary > div > a");
await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > details > summary > div > button");
await page.click("body > map");
for(let i = 0; i < 5; i++)
await page.keyboard.press("Tab");
Expand Down
4 changes: 2 additions & 2 deletions test/e2e/core/keyboardInteraction.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ jest.setTimeout(50000);

describe("Feature Popup Tab Navigation Tests in " + browserType, () => {
test("[" + browserType + "]" + " Inline features popup focus order", async () => {
await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.mapml-reload-button.leaflet-bar.leaflet-control > a");
await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.mapml-reload-button.leaflet-bar.leaflet-control > button");
await page.evaluateHandle(() => document.getElementById("vector").removeAttribute("checked"));
await page.evaluateHandle(() => document.getElementById("query").removeAttribute("checked"));
await page.click("body");
Expand Down Expand Up @@ -246,7 +246,7 @@ jest.setTimeout(50000);
expect(f).toEqual("M285 373L460 380L468 477L329 459z");
});

test("[" + browserType + "]" + " Focus Controls focuses the first <a> child in control div", async () => {
test("[" + browserType + "]" + " Focus Controls focuses the first <button> child in control div", async () => {
await page.click("body > mapml-viewer");
await page.keyboard.press("Shift+F10");
await page.keyboard.press("t");
Expand Down
18 changes: 9 additions & 9 deletions test/e2e/core/mapContextMenu.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ jest.setTimeout(50000);
);
await page.waitForTimeout(1000);
await page.click("body > map", { button: "right" });
await page.click("div > div.mapml-contextmenu > a:nth-child(1)");
await page.click("div > div.mapml-contextmenu > button:nth-child(1)");
await page.waitForTimeout(1000);
const extent = await page.$eval(
"body > map",
Expand All @@ -103,7 +103,7 @@ jest.setTimeout(50000);
});
test("[" + browserType + "]" + " Context menu, back item at intial location", async () => {
await page.click("body > map", { button: "right" });
await page.click("div > div.mapml-contextmenu > a:nth-child(1)");
await page.click("div > div.mapml-contextmenu > button:nth-child(1)");
await page.waitForTimeout(1000);
const extent = await page.$eval(
"body > map",
Expand All @@ -119,7 +119,7 @@ jest.setTimeout(50000);
});
test("[" + browserType + "]" + " Context menu, forward item", async () => {
await page.click("body > map", { button: "right" });
await page.click("div > div.mapml-contextmenu > a:nth-child(2)");
await page.click("div > div.mapml-contextmenu > button:nth-child(2)");
await page.waitForTimeout(1000);
const extent = await page.$eval(
"body > map",
Expand All @@ -134,7 +134,7 @@ jest.setTimeout(50000);
});
test("[" + browserType + "]" + " Context menu, forward item at most recent location", async () => {
await page.click("body > map", { button: "right" });
await page.click("div > div.mapml-contextmenu > a:nth-child(2)");
await page.click("div > div.mapml-contextmenu > button:nth-child(2)");
await page.waitForTimeout(1000);
const extent = await page.$eval(
"body > map",
Expand All @@ -156,7 +156,7 @@ jest.setTimeout(50000);
);

await page.click("body > map", { button: "right" });
await page.click("div > div.mapml-contextmenu > a:nth-child(5)");
await page.click("div > div.mapml-contextmenu > button:nth-child(5)");

const controlsOff = await page.$eval(
"div > div.leaflet-control-container > div.leaflet-top.leaflet-left",
Expand All @@ -174,7 +174,7 @@ jest.setTimeout(50000);
);

await page.click("body > map", { button: "right" });
await page.click("div > div.mapml-contextmenu > a:nth-child(5)");
await page.click("div > div.mapml-contextmenu > button:nth-child(5)");

const controlsOff = await page.$eval(
"div > div.leaflet-control-container > div.leaflet-top.leaflet-left",
Expand Down Expand Up @@ -203,9 +203,9 @@ jest.setTimeout(50000);
expect(valueBefore).toEqual("0.5");

await page.click("body > map", { button: "right" });
await page.click("div > div.mapml-contextmenu > a:nth-child(5)");
await page.click("div > div.mapml-contextmenu > button:nth-child(5)");
await page.click("body > map", { button: "right" });
await page.click("div > div.mapml-contextmenu > a:nth-child(5)");
await page.click("div > div.mapml-contextmenu > button:nth-child(5)");

const valueAfter = await page.$eval(
"div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details > details > input",
Expand All @@ -224,7 +224,7 @@ jest.setTimeout(50000);
await page.keyboard.press("Tab");

await page.keyboard.press("Enter");
await page.click("#mapml-copy-submenu > a:nth-child(10)");
await page.click("#mapml-copy-submenu > button:nth-child(10)");

await page.click("body > textarea");
await page.keyboard.press("Control+v");
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/core/mapElement.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ jest.setTimeout(50000);
});

test("[" + browserType + "]" + " Reload button takes you back to initial state", async () => {
await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.mapml-reload-button.leaflet-bar.leaflet-control > a");
await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.mapml-reload-button.leaflet-bar.leaflet-control > button");
await page.waitForTimeout(1000);
const extent = await page.$eval(
"body > map",
Expand Down
14 changes: 7 additions & 7 deletions test/e2e/layers/queryLink.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ jest.setTimeout(50000);
});
describe("Queried Feature Tests in " + browserType, () => {
test("[" + browserType + "]" + " First feature added + popup content updated ", async () => {
await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.mapml-reload-button.leaflet-bar.leaflet-control > a");
await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.mapml-reload-button.leaflet-bar.leaflet-control > button");
await page.click("div");
await page.waitForSelector("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div");
const feature = await page.$eval(
Expand All @@ -93,7 +93,7 @@ jest.setTimeout(50000);
});

test("[" + browserType + "]" + " Next feature added + popup content updated ", async () => {
await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)");
await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
const feature = await page.$eval(
"div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
(tile) => tile.getAttribute("d")
Expand All @@ -108,7 +108,7 @@ jest.setTimeout(50000);
});

test("[" + browserType + "]" + " Previous feature added + popup content updated ", async () => {
await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(2)");
await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(2)");
const feature = await page.$eval(
"div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
(tile) => tile.getAttribute("d")
Expand All @@ -124,7 +124,7 @@ jest.setTimeout(50000);

test("[" + browserType + "]" + " PCRS feature added + popup content updated ", async () => {
for (let i = 0; i < 2; i++)
await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)");
await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
const feature = await page.$eval(
"div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
(tile) => tile.getAttribute("d")
Expand All @@ -139,7 +139,7 @@ jest.setTimeout(50000);
});

test("[" + browserType + "]" + " TCRS feature added + popup content updated ", async () => {
await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)");
await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
const feature = await page.$eval(
"div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
(tile) => tile.getAttribute("d")
Expand All @@ -154,7 +154,7 @@ jest.setTimeout(50000);
});

test("[" + browserType + "]" + " Tilematrix feature added + popup content updated ", async () => {
await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)");
await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
const feature = await page.$eval(
"div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
(tile) => tile.getAttribute("d")
Expand All @@ -168,7 +168,7 @@ jest.setTimeout(50000);
expect(popup).toEqual("TILEMATRIX Test");
});
test("[" + browserType + "]" + " Synthesized point, valid location ", async () => {
await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)");
await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
const feature = await page.$eval(
"div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
(tile) => tile.getAttribute("d")
Expand Down
Loading