<!-- Utilizaremos este formulário para selecionar um planeta -->
<fieldset>
  <legend>Informação do planeta</legend>
  <label for="planetasSelect">Planeta:</label>

  <!--
    O atributo aria-controls aponta para o ID do elemento da página este formulário controla
  -->
  <select id="planetasSelect" aria-controls="planetaInformacoes">
    <option value="">Selecione um planeta&hellip;</option>
    <option value="mercurio">Mercúrio</option>
    <option value="venus">Vênus</option>
    <option value="terra">Terra</option>
    <option value="marte">Marte</option>
  </select>
</fieldset>

<!--
  O atributo role="region" define que a div a seguir é um ponto de destaque na
  página, facilitando o acesso à região através do teclado.

  Observe que o ID da div a seguir é o mesmo definido no atributo aria-controls
  do select acima.

  Definimos o aria-live como igual a polite. Desse modo, os leitores de
  tela não interromperam a leitura da página quando o conteúdo dessa div for alterado.

  Por fim, definimos o aria-busy para informar aos leitores de tela ou outras
  tecnologias assistivas quando a região está aguardando um novo conteúdo.
-->
<div role="region" id="planetaInformacoes" aria-live="polite" aria-busy="false">
  <h2 id="planetaNome">Nenhum planeta selecionado</h2>
  <p id="planetaDescricao">Selecione um planeta para ver sua descrição</p>
</div>

<p>
  <small>
    Com informações da
    <a href="https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System">Wikipedia</a>
  </small>
</p>

[aria-busy] {
  transition: opacity 0.2s linear;
  position: relative;
}

[aria-busy="true"] * {
  opacity: 0.7;
}

[aria-busy="true"]:before {
  content: '';
  display: block;
  border: 6px solid transparent;
  border-top-color: purple;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  animation: spin 1.2s infinite linear;
  position: absolute;
  left: calc(50% - 18px);
  top: calc(50% - 18px);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

const PLANETAS = {
  mercurio: {
    nome: 'Mercúrio',
    descricao: 'Mercúrio é o menor e mais interno planeta do Sistema Solar. Tem o nome da divindade romana Mercúrio, o mensageiro dos deuses.'
  },
  venus: {
    nome: 'Vênus',
    descricao: 'Vênus é o segundo planeta depois do Sol. Foi nomeado em homenamgem à deusa romana do amor e da beleza.'
  },
  terra: {
    nome: 'Terra',
    descricao: 'A Terra é o terceiro planeta depois do Sol e o único planeta conhecido capaz de suportar a vida.'
  },
  marte: {
    nome: 'Marte',
    descricao: 'Marte é o quarto planeta depois do Sol e o segundo menor planeta do Sistema Solar. Seu nome é uma homenagem ao deus romano da Guerra. Também é conhecido com o "Planeta Vermelho".'
  }
}

function renderizaInformacoesDoPlaneta(planeta) {
  const planetaInformacoes = document.getElementById('planetaInformacoes');
  const planetaNome = document.getElementById('planetaNome');
  const planetaDescricao = document.getElementById('planetaDescricao');
  
  planetaInformacoes.setAttribute('aria-busy', 'true');

  setTimeout(() => {
    if (planeta in PLANETAS) {
      planetaNome.textContent = PLANETAS[planeta].nome;
      planetaDescricao.textContent = PLANETAS[planeta].descricao;
    } else {
      planetaNome.textContent = 'Nenhum planeta selecionado';
      planetaDescricao.textContent = 'Selecione um planeta para ver sua descrição';
    }
    
    planetaInformacoes.setAttribute('aria-busy', 'false');
  }, 1100);
}

document.getElementById('planetasSelect')
  .addEventListener('change', event => {
    renderizaInformacoesDoPlaneta(event.target.value);
  });