Use hidden attribute for image maps (Maps4HTML#490)

* Use `hidden` attribute for posters

* Increase delay in keyboardInteraction test

Author: Malvoz

src/web-map.js

@@ -248,10 +248,12 @@ export class WebMap extends HTMLMapElement {
             }
           }
 
-          // undisplay the img in the image map, because it's not needed now
-          // gives a slight fouc, not optimal
+          // undisplay the img in the image map, because it's not needed now.
+          // gives a slight FOUC, unless:
+          // 1) the img is pre-styled (https://github.com/Maps4HTML/Web-Map-Custom-Element/blob/80a4a4e372d2ef61bb7cad6a111e17e396b8e908/index-map-area.html#L35)
+          // 2) placed after the map element
           if (this.poster) {
-            this.poster.style.display = 'none';
+            this.poster.setAttribute('hidden', '');
           }
 
           // https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/274

test/e2e/core/keyboardInteraction.test.js

@@ -32,13 +32,13 @@ jest.setTimeout(50000);
 
           test("[" + browserType + "]" + " Crosshair remains on map move with arrow keys", async () => {
             await page.keyboard.press("ArrowUp");
-            await page.waitForTimeout(500);
+            await page.waitForTimeout(1000);
             await page.keyboard.press("ArrowDown");
-            await page.waitForTimeout(500);
+            await page.waitForTimeout(1000);
             await page.keyboard.press("ArrowLeft");
-            await page.waitForTimeout(500);
+            await page.waitForTimeout(1000);
             await page.keyboard.press("ArrowRight");
-            await page.waitForTimeout(500);
+            await page.waitForTimeout(1000);
             const afterMove = await page.$eval("div > div.mapml-crosshair", (div) => div.style.visibility);
             expect(afterMove).toEqual("");
           });