Solucionado
Boa noite, no exemplo do curso foi feito uma modal utilizando alguns recursos .css para posicionar o botão fechar no canto superior direito. Sendo assim, eu gostaria de saber como fica a navegação por seta no modal, visto que tal botão esta após todo conteúdo da form
Oi Lucas, tudo bem?
Mesmo usando position ou flex no posicionamento dos elementos na modal, a ordem natural ali é seguir o fluxo do HTML.
Se o botão de fechar é o primeiro elemento ali no DOM, ele seria lido em primeiro lugar, desconsiderando aqui o uso de ARIAs.
Abcs!
Bom dia Natan,
esclareceu o funcionamento, mas fiquei com outra dúvida kk. Seguindo a estrutura DOM, o botão fechar da modal esta dentro do from apos todos os elementos, isso seria um problema?
<div class="dialogNewsletter-body">
<h2 class="dialogNewsletter-titulo" id="tituloDialog">News sem spam</h2>
<h3 class="dialogNewsletter-texto">
Assine nossa newsletter para receber notícias técnicas sem spam!
</h3>
<form class="dialogNewsletter-form">
<label class="dialogNewsletter-label" for="emailNewsletter">
Email:
</label>
<input type="email" class="dialogNewsletter-campo" placeholder="Digite seu e-mail..." id="emailNewsletter">
<button class="dialogNewsletter-btn" type="submit">
Assinar newsletter
</button>
<button class="dialogNewsletter-fechar" type="button" aria-label="Fechar janela modal">
Fechar modal
</button>
</form>
</div>
Obrigado.
Opa Lucas, tranquilo?
Não é um problema, uma vez que o type dele está como "button".
Dentro de um form se não colocamos o type, qualquer botão vira SUBMIT. No caso como tem dois botões, precisa especificar os types deles.
Hoje eu mudaria a semântica desse código: deixaria o botão fora do form, pois pra mim (Natan do Presente) faz mais sentido. Ele fecha a modal e não apenas o form.
Entretanto, a modal representa o form, então até que faz sentido também!
Abcs!
Só uma observação, o texto "fechar modal" geralmente não é muito comum de se ver em uma navegação natural, além de ser um termo conhecido somente por pessoas da área. Recomendo que tire "modal" e deixe somente "fechar", já irá cumprir o papel devido. Outro detalhe, se tem "fechar modal" entre o > e </ do botão, e também o aria-label, eles estão redundantes. Se tem o texto no botão em si, não precisa do aria-label.
Ótima contribuição, Bruno! Muito obrigado!
De fato, repetir o conteúdo do botão no aria-label ficaria redundante mesmo!
E modal apesar de ser bem conhecido por nós, é um jargão de fato.
Abraços!