Hola y muchas gracias de anteamano recuro aqui tras estar desesperado, El tema esta en lo siguiente y te paso todo el código para que lo veas bien por favor porque ya no se como solucionar esto, el tema es un mapa que abre modales por provincias (eso ok) el problema es con los focos , se supone que al entrar en el modal si uso el teclado no deberia salir dicho foco del modal pero si lo hace y aparte cuando cierro modal el foco no vuelle a la provincia en cuestion donde previamente estaba , no se si me explico , no se como hacerlo ya se que es de js pero arreglo una cosa con tabindex pero rompo otra ....:
El ejemplo completo esta aqui:

https://adoptaunartesano.es/mapa.html#


<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<title>Modal Accesible Ministerio</title>
<link rel="stylesheet" href="./style.css">
<style>

.madContenedorModal {
width: 90%;
margin: auto;
}



.madConteido {
display: block;
position: fixed;
top: 25%;
left: 5%;
color: #222;
border: 2px double #555;
background-color: rgb(255, 255, 255);
height: 50%;
width: 90%;
z-index: 5;
overflow-y: scroll;
}

@media (min-width: 768px) {
.madConteido {
left: 25%;
width: 50%;
}
}


#pestanas {
float: top;
font-size: 3ex;
font-weight: bold;
}


#pestanas area {
list-style-type: none;
float: left;
margin: 0px 2px -2px -0px;
background: darkgrey;
border-radius: 5px 5px 0px 0px;
border: 2px solid bisque;
border-bottom: dimgray;
padding: 0px 20px;
cursor: pointer;
}

#pestanas area.selected {
background: #ccc;
cursor: inherit;
}

.mad-modal-overlay {

background: rgba(0, 0, 0, .8);
height: 100%;
left: 0;

overflow: auto;
padding: 0em;
position: fixed;
top: 0;
transition: opacity .2s;
width: 100%;
z-index: -1;
opacity: 0;
visibility: hidden;
}

.mad-modal-overlay-ok {
opacity: 1;
visibility: visible;
z-index: 1;

}

button.close {
position: absolute;
top: 0;
right: 0;
}

#contenido .hide {
display: none;
}
</style>

</head>

<body>

<header>
<h1>Modal / Dialog</h1>
</header>

<main>
<div class="madContenedorModal">
<div class="mad-modal-overlay"></div>

<h2>Mapa</h2>
<img id="MapaEspana" alt="Mapa de España" src="./Spain.gif" usemap="#DirectoryMap" />
<map name="DirectoryMap" id="DirectoryMap">





<div id="pestanas">


<area data-id="cadiz" class="show" aria-haspopup="true" href="#" shape="poly"
coords="229,299,235,295,269,288,258,306,266,318,257,331,248,331,236,321" alt="Cadíz" />



<area data-id="malaga" class="show" aria-haspopup="true" href="#" shape="poly"
coords="260,306,271,290,284,282,293,281,295,289,303,293,312,304,297,307,287,313,275,314,269,318,266,316,269,315"
alt="Málaga" />




<area class="show" aria-haspopup="true" href="#" shape="poly"
coords="294,281,305,275,317,269,333,266,341,251,350,252,348,265,339,279,332,285,326,302,317,304,313,306,316,304,315,304"
alt="Granada" />


<area class="open" href="#" shape="poly"
coords="328,304,356,302,361,302,373,278,370,272,361,267,358,255,354,255,351,266,341,280,336,283,329,300,331,302"
alt="Almería" />
<area href="/sitios/intranetdeh/perscont/Paginas/murcia.aspx" shape="poly"
coords="374,278,394,275,402,270,400,258,390,252,385,235,390,226,382,224,377,227,372,237,366,240,360,241,357,243,352,247,352,251,354,253,357,253,360,257,361,260,364,267,369,271"
alt="Murcia" />
<area href="/sitios/intranetdeh/perscont/Paginas/alicante.aspx" shape="poly"
coords="391,224,404,220,415,216,426,223,423,229,411,235,402,254,394,251,386,235,394,223"
alt="Alicante" />
<area href="/sitios/intranetdeh/perscont/Paginas/valencia.aspx" shape="poly"
coords="411,188,407,186,402,188,394,186,390,182,380,176,380,179,380,184,376,193,371,202,377,204,380,213,391,223,413,215,407,199"
alt="Valencia" />
<area href="/sitios/intranetdeh/perscont/Paginas/castellon.aspx" shape="poly"
coords="411,189,423,171,430,160,418,148,414,152,409,150,402,154,405,163,399,172,391,182,397,187,413,185"
alt="Castellón" />
<area href="/sitios/intranetdeh/perscont/Paginas/tarragona.aspx" shape="poly"
coords="432,162,421,150,420,138,427,130,440,128,448,117,455,125,458,133,449,139,438,146,435,157"
alt="Tarragona" />
<area href="/sitios/intranetdeh/perscont/Paginas/barcelona.aspx" shape="poly"
coords="460,134,474,129,478,122,489,113,478,105,479,102,473,96,466,98,464,93,461,94,457,94,454,106,449,118"
alt="Barcelona" />
<area href="/sitios/intranetdeh/perscont/Paginas/girona.aspx" shape="poly"
coords="458,91,457,85,470,85,479,86,485,80,495,82,499,94,498,102,495,107,491,111,478,104,480,100,473,94,460,94,461,92"
alt="Girona" />
<area href="/sitios/intranetdeh/perscont/Paginas/huelva.aspx" shape="poly"
coords="232,296,227,298,207,291,201,284,199,266,212,248,227,251,243,252,239,259,228,265,230,284"
alt="Huelva" />
<area href="/sitios/intranetdeh/perscont/Paginas/sevilla.aspx" shape="poly"
coords="242,252,240,260,231,265,233,297,268,289,284,282,271,266,261,269,262,263,255,247"
alt="Sevilla" />
<area href="/sitios/intranetdeh/perscont/Paginas/cordoba.aspx" shape="poly"
coords="255,249,253,237,272,228,277,236,284,238,294,243,295,264,301,273,299,278,292,283,284,279,274,267,263,268,255,236,254,238"
alt="Córdoba" />
<area href="/sitios/intranetdeh/perscont/Paginas/jaen.aspx" shape="poly"
coords="296,244,296,263,303,276,336,263,342,248,338,236,298,240,299,242" alt="Jaén" />
<area href="/sitios/intranetdeh/perscont/Paginas/albacete.aspx" shape="poly"
coords="341,251,354,251,356,242,370,238,376,228,379,224,390,223,392,219,382,214,375,200,362,207,359,205,351,209,337,206,335,216,339,225,337,235,344,248,345,248"
alt="Albacete" />
<area href="/sitios/intranetdeh/perscont/Paginas/cuenca.aspx" shape="poly"
coords="336,207,332,202,325,180,338,166,353,157,377,179,378,193,372,202,358,206,339,207"
alt="Cuenca" />
<area href="/sitios/intranetdeh/perscont/Paginas/ciudadreal.aspx" shape="poly"
coords="337,210,332,201,320,201,318,206,307,208,300,203,301,199,280,203,278,212,273,226,281,239,297,243,338,235"
alt="Ciudad Real" />
<area href="/sitios/intranetdeh/perscont/Paginas/toledo.aspx" shape="poly"
coords="299,201,302,205,315,206,323,200,332,201,324,180,309,188,307,181,302,176,290,175,281,175,264,180,266,192,271,206,279,203,290,199"
alt="Toledo" />
<area href="/sitios/intranetdeh/perscont/Paginas/badajoz.aspx" shape="poly"
coords="211,249,206,240,207,230,216,223,209,205,218,203,224,212,233,213,259,213,269,205,279,203,276,226,254,238,258,246,242,252"
alt="Badajoz" />
<area href="/sitios/intranetdeh/perscont/Paginas/caceres.aspx" shape="poly"
coords="262,181,271,205,255,212,226,211,220,203,209,203,204,197,213,193,222,186,218,175,235,167,245,174,250,170"
alt="Cáceres" />
<area href="/sitios/intranetdeh/perscont/Paginas/salamanca.aspx" shape="poly"
coords="219,174,219,147,231,140,249,141,266,140,269,147,267,154,250,170,245,172,237,168,222,173,221,170"
alt="Salamanca" />
<area href="/sitios/intranetdeh/perscont/Paginas/zamora.aspx" shape="poly"
coords="233,141,242,125,236,124,236,117,229,109,219,115,223,99,239,105,262,111,263,141,229,141"
alt="Zamora" />
<area href="/sitios/intranetdeh/perscont/Paginas/avila.aspx" shape="poly"
coords="262,182,252,170,269,153,269,142,280,141,283,153,293,161,287,173,276,174"
alt="Ávila" />
<area href="/sitios/intranetdeh/perscont/Paginas/Madrid.aspx" shape="poly"
coords="288,174,295,158,314,139,318,158,322,163,325,176,310,186,307,178" alt="Madrid" />
<area href="/sitios/intranetdeh/perscont/Paginas/segovia.aspx" shape="poly"
coords="293,160,286,152,282,140,290,131,302,127,313,126,318,134" alt="Segovia" />
<area href="/sitios/intranetdeh/perscont/Paginas/guadalajara.aspx" shape="poly"
coords="326,177,323,161,318,156,316,141,320,134,335,134,340,142,355,140,365,144,368,157,362,164,354,158,336,167"
alt="Guadalajara" />
<area href="/sitios/intranetdeh/perscont/Paginas/valladolid.aspx" shape="poly"
coords="266,142,282,140,290,131,301,127,300,120,278,117,275,114,272,102,265,103,263,110"
alt="Valladolid" />
<area href="/sitios/intranetdeh/perscont/Paginas/teruel.aspx" shape="poly"
coords="364,167,369,155,369,145,379,140,394,139,396,133,418,139,420,150,410,151,402,154,405,163,391,181,380,178"
alt="Teruel" />
<area href="/sitios/intranetdeh/perscont/Paginas/zaragoza.aspx" shape="poly"
coords="367,146,378,140,394,136,401,133,418,139,425,130,409,127,387,110,381,85,373,90,372,108,368,113,361,109,359,120,351,139"
alt="Zaragoza" />
<area href="/sitios/intranetdeh/perscont/Paginas/lerida.aspx" shape="poly"
coords="426,75,425,79,428,103,422,115,420,127,440,128,450,114,457,94,456,84,448,87,448,81,430,75"
alt="Lérida" />
<area href="/sitios/intranetdeh/perscont/Paginas/huesca.aspx" shape="poly"
coords="386,76,382,86,389,110,411,127,425,130,422,115,429,99,425,78" alt="Huesca" />
<area href="/sitios/intranetdeh/perscont/Paginas/navarra.aspx" shape="poly"
coords="387,77,379,85,373,89,372,108,368,112,360,109,359,100,341,91,350,75,362,62,373,71"
alt="Navarra" />
<area href="/sitios/intranetdeh/perscont/Paginas/soria.aspx" shape="poly"
coords="319,135,314,126,321,114,332,108,347,105,360,114,361,120,353,139,342,143,336,134"
alt="Soria" />
<area href="/sitios/intranetdeh/perscont/Paginas/larioja.aspx" shape="poly"
coords="324,89,326,110,349,104,360,112,359,97,343,93" alt="La Rioja" />
<area href="/sitios/intranetdeh/perscont/Paginas/burgos.aspx" shape="poly"
coords="326,112,326,89,320,80,323,73,309,70,302,75,304,85,298,86,291,91,300,110,300,118,307,127,316,126"
alt="Burgos" />
<area href="/sitios/intranetdeh/perscont/Paginas/palencia.aspx" shape="poly"
coords="277,77,274,102,277,117,301,121,301,111,292,90,299,86,290,78" alt="Palencia" />
<area href="/sitios/intranetdeh/perscont/Paginas/leon.aspx" shape="poly"
coords="222,101,263,110,265,102,274,101,279,75,275,68,269,75,246,74,235,76,221,80,218,82,216,95"
alt="León" />
<area href="/sitios/intranetdeh/perscont/Paginas/alava.aspx" shape="poly"
coords="346,80,341,91,327,90,319,82,324,71,335,74" alt="Álava" />
<area href="/sitios/intranetdeh/perscont/Paginas/guipuzcoa.aspx" shape="poly"
coords="340,63,351,64,358,59,363,63,348,79,338,74" alt="Guipuzcoa" />
<area href="/sitios/intranetdeh/perscont/Paginas/vizcaya.aspx" shape="poly"
coords="338,65,338,73,324,72,311,70,329,60" alt="Vizcaya" />
<area href="/sitios/intranetdeh/perscont/Paginas/cantabria.aspx" shape="poly"
coords="275,71,284,67,287,61,306,57,327,62,304,74,305,85,289,78" alt="Cantabria" />
<area href="/sitios/intranetdeh/perscont/Paginas/asturias.aspx" shape="poly"
coords="285,63,283,67,275,67,272,74,245,74,220,80,215,59,231,55,252,54,289,61,277,67,275,68,274,73"
alt="Asturias" />
<area href="/sitios/intranetdeh/perscont/Paginas/lugo.aspx" shape="poly"
coords="216,58,202,49,199,58,191,80,194,91,204,97,214,97,220,77" alt="Lugo" />
<area href="/sitios/intranetdeh/perscont/Paginas/ourense.aspx" shape="poly"
coords="193,90,188,90,183,95,187,102,189,114,200,114,214,118,224,101,217,95,203,97"
alt="Orense" />
<area href="/sitios/intranetdeh/perscont/Paginas/acoruna.aspx" shape="poly"
coords="199,49,187,54,188,59,170,59,157,70,163,91,170,89,173,81,192,78" alt="La Coruña" />
<area href="/sitios/intranetdeh/perscont/Paginas/pontevedra.aspx" shape="poly"
coords="169,92,175,83,191,78,193,88,183,93,186,105,169,117,167,108" alt="Pontevedra" />
<area href="/sitios/intranetdeh/perscont/Paginas/illesbalears.aspx" shape="poly"
coords="481,190,502,171,504,178,513,182,504,199,492,190,486,195" alt="Islas Baleares" />
<area href="/sitios/intranetdeh/perscont/Paginas/sctenerife.aspx" shape="poly"
coords="445,328,457,327,445,350,437,352,429,337" alt="Santa Cruz de Tenerife" />
<area href="/sitios/intranetdeh/perscont/Paginas/laspalmas.aspx" shape="poly"
coords="475,338,485,342,486,355,478,358,469,349" alt="Las Palmas de Gran Canaria" />
<area href="/sitios/intranetdeh/perscont/Paginas/melilla.aspx" shape="poly"
coords="363,350,376,347,376,358,362,360" alt="Melilla" />
<area href="/sitios/intranetdeh/perscont/Paginas/ceuta.aspx" shape="poly"
coords="247,341,264,339,264,352,249,353" alt="Ceuta" />



</div>
</map>


<div id="contenido">

<div id="cadiz" class="hide madConteido">

<section class="modal" role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc">

<section class="mad-modal__content">
<h2 class="mad-dialog-title" tabindex="-1">Delegación de Economía y Hacienda de Cádiz</h2>
<ul>
<li>
<strong>Delegado Provincial de Economía y Hacienda</strong>:</li>
</ul>
<blockquote dir="ltr">
<p>José Mª. Rodríguez Abela<br /></p>
<p>Teléfonos: 952.075.602/00  (25602/4)</p>
<p>
<a
href="mailto:JMRodriguezA@igae.hacienda.gob.es">JMRodriguezA@igae.hacienda.gob.es</a>
</p>
<p> </p>
</blockquote>
<ul>
<li>
<strong>Secretario General</strong>:</li>
</ul>
<p>          Carmen Gómez-Blanco Pontes</p>
<blockquote dir="ltr">
<p>Teléfono: 952.075.643   (25643)</p>
<p> <a href="mailto:CGomezB@igae.hacienda.gob.es">CGomezB@igae.hacienda.gob.es</a>
</p>
<p> </p>
</blockquote>
<ul>
<li>
<strong>Gerente del Catastro</strong>:</li>
</ul>
<blockquote dir="ltr">
<p>Francisco Pérez-Vivar López</p>
<p>Teléfono: 952.075.600  (25697)</p>
<p>
<a
href="mailto:francisco.perez-vivar@catastro.hacienda.gob.es">francisco.perez-vivar@catastro.hacienda.gob.es</a>
</p>
<p> </p>
</blockquote>
<ul>
<li>
<strong>Interventor  Territorial:</strong></li>
</ul>
<blockquote dir="ltr">
<div>José Mª.Rodríguez Abela</div>
<div> </div>
<div>Teléfonos: 952.075.602  (25602/4)</div>
<div> </div>
<div>
<a
href="mailto:JMRodriguezA@igae.hacienda.gob.es">JMRodriguezA@igae.hacienda.gob.es</a>
</div>
<p> </p>
</blockquote>
<p> </p>
<button class="close" aria-label="close" type="button">X</button>
</section>
</section>
</div>
<div id="malaga" class="hide madConteido">
<section class="modal" role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
<section class="mad-modal__content">
<h2 class="mad-dialog-title" tabindex="-1">Delegación de Economía y Hacienda de Málaga</h2>
<ul>
<li>
<strong>Delegado Provincial de Economía y Hacienda</strong>:</li>
</ul>
<blockquote dir="ltr">
<p>José Mª. Rodríguez Abela<br /></p>
<p>Teléfonos: 952.075.602/00  (25602/4)</p>
<p>
<a
href="mailto:JMRodriguezA@igae.hacienda.gob.es">JMRodriguezA@igae.hacienda.gob.es</a>
</p>
<p> </p>
</blockquote>
<ul>
<li>
<strong>Secretario General</strong>:</li>
</ul>
<p>          Carmen Gómez-Blanco Pontes</p>
<blockquote dir="ltr">
<p>Teléfono: 952.075.643   (25643)</p>
<p> <a href="mailto:CGomezB@igae.hacienda.gob.es">CGomezB@igae.hacienda.gob.es</a>
</p>
<p> </p>
</blockquote>
<ul>
<li>
<strong>Gerente del Catastro</strong>:</li>
</ul>
<blockquote dir="ltr">
<p>Francisco Pérez-Vivar López</p>
<p>Teléfono: 952.075.600  (25697)</p>
<p>
<a
href="mailto:francisco.perez-vivar@catastro.hacienda.gob.es">francisco.perez-vivar@catastro.hacienda.gob.es</a>
</p>
<p> </p>
</blockquote>
<ul>
<li>
<strong>Interventor  Territorial:</strong></li>
</ul>
<blockquote dir="ltr">
<div>José Mª.Rodríguez Abela</div>
<div> </div>
<div>Teléfonos: 952.075.602  (25602/4)</div>
<div> </div>
<div>
<a
href="mailto:JMRodriguezA@igae.hacienda.gob.es">JMRodriguezA@igae.hacienda.gob.es</a>
</div>
<p> </p>
</blockquote>
<p> </p>
<button class="close" aria-label="close" type="button">X</button>
</section>
</section>
</div>

<div id="granada" class="hide madConteido">
<section class="modal" role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
<section class="mad-modal__content">
<button class="close" aria-label="close" type="button">X</button>
</section>
</section>
</div>
</div>

</div>
</main>

<footer>
</footer>



</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="./script.js"></script>

</html>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="./script.js"></script>

<script>


let contenido;
let pestanas;
let buton;
let areamapa;

window.onload = () => {
modaloverlay = document.querySelector(".mad-modal-overlay");

dialogTitle = document.querySelector(".mad-dialog-title");
// obtenemos todos los elementos de las pestañas
pestanas = document.querySelectorAll('#pestanas>area');
// obtenemos todos los elementos deL BOTON CERRAR
buton = document.querySelectorAll('#pestanas>button');
// obtenemos todo los elementos de los contenidos
contenido = document.querySelectorAll('#contenido>div');

// generamos el evento click para cada pestaña
pestanas.forEach(el => el.addEventListener("click", clickPestana));
}

/* ESCAPE*/
$(document).on('keydown keyup', function (e) {
if (e.which == 27) {
$(".madConteido").addClass("hide");
$(".mad-modal-overlay").removeClass("mad-modal-overlay-ok")
document.addEventListener('keydown', useEsc);
pestanas.forEach(el => el.dataset.id == this.dataset.id
? el.classList.focus()
: el.classList.focus()
);

}
});


// CLOSE
$(".close").on("click", function () {
$(".madConteido").addClass("hide");
$(".mad-modal-overlay").removeClass("mad-modal-overlay-ok")
document.addEventListener('keydown', useEsc);

pestanas.forEach(el => el.dataset.id == this.dataset.id
? el.classList.focus()
: el.classList.focus()
);
});

// OPEN
function clickPestana(e) {
// añadimos la clase "selected" a la pestaña seleccionada
pestanas.forEach(el => el.dataset.id == this.dataset.id
? el.classList.add("selected")
: el.classList.remove("selected")
);


// añadimos la clase "hide" a todos los elementos menos al que
// pertenece a la pestaña seleccionada
contenido.forEach(el => this.dataset.id == el.id
? el.classList.remove("hide")
: el.classList.add("hide")
);
dialogTitle.focus();
$(".mad-modal-overlay").addClass("mad-modal-overlay-ok");
}






</script>