Neste laboratório, você construirá um app que alterna entre diferentes temas. Quando você alterna para um tema diferente, a cor de fundo mudará e uma mensagem diferente será exibida. Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de usuário: 1. Você deve ter um elemento button com o texto Switch Theme. 2. Seu elemento button deve ter os seguintes atributos:

• Um atributo id definido como "theme-switcher-button".
• Um atributo aria-haspopup definido como "true".
• Um atributo aria-expanded definido como "false".
• Um atributo aria-controls definido como "theme-dropdown".

3. Você deve ter um elemento ul com os seguintes atributos:

• Um atributo id definido como "theme-dropdown".
• Um atributo role definido como "menu".
• Um atributo aria-labelledby definido como "theme-switcher-button".
• Um atributo hidden.

4. Seu elemento ul deve ter pelo menos dois elementos li com um atributo role definido como "menuitem" e um texto de sua escolha representando um tema diferente. 5. Cada um dos seus elementos li deve ter um atributo id que comece com theme- e termine com o tema que você definiu para o texto do elemento li. Por exemplo, se um dos seus temas for Light, então seu id deve ser theme-light. 6. Você deve ter um elemento com um atributo aria-live definido como "polite". 7. Você deve ter um array themes com pelo menos dois objetos que contenham cada um uma propriedade name e message. O name representará um tema diferente e a message será exibida quando o tema for alterado. Você é livre para criar valores de name e message de sua escolha, mas os valores de name devem corresponder ao conteúdo de texto dos seus elementos li. 8. Quando um usuário clica no botão #theme-switcher-button, o elemento #theme-dropdown deve exibir os temas disponíveis. 9. Quando o elemento #theme-dropdown for exibido, o atributo aria-expanded deve ser definido como "true" para o elemento button. 10. Quando o usuário clicar no #theme-switcher-button enquanto o elemento #theme-dropdown estiver exibido, o menu deve ser fechado, o atributo hidden deve ser adicionado e o atributo aria-expanded deve ser definido como "false". 11. Quando um usuário clica no #theme-switcher-button e seleciona um tema, a classe correspondente theme-<name> deve ser adicionada ao elemento body e a mensagem de tema relacionada que você definiu no array themes deve ser exibida no elemento com aria-live="polite". 12. Quando um usuário clica no #theme-switcher-button e seleciona um tema diferente do atual, a classe de tema do body e a mensagem de status devem ser atualizadas para corresponder à nova seleção.

Testes:

• Você deve ter um elemento `button`.
• Seu elemento `button` deve conter o texto `Switch Theme`.
• Seu elemento `button` deve ter um atributo `id` definido como `"theme-switcher-button"`.
• Seu elemento `button` deve ter um atributo `aria-haspopup` definido como `"true"`.
• Seu elemento `button` deve ter um atributo `aria-expanded` definido como `"false"`.
• Seu elemento `button` deve ter um atributo `aria-controls` definido como `"theme-dropdown"`.
• Você deve ter um elemento `ul`.
• Seu elemento `ul` deve ter um atributo `id` definido como `"theme-dropdown"`.
• Seu elemento `ul` deve ter um atributo `role` definido como `"menu"`.
• Seu elemento `ul` deve ter um atributo `aria-labelledby` definido como `"theme-switcher-button"`.
• Seu elemento `ul` deve ter um atributo `hidden`.
• Seu elemento `ul` deve conter pelo menos dois elementos `li`.
• Cada um dos seus elementos `li` deve ter um atributo `role` definido como `"menuitem"`.
• Cada um dos seus elementos `li` deve conter um texto que represente um tema.
• Cada um dos seus elementos `li` deve ter um atributo `id` que comece com `theme-` e termine com o tema correspondente para esse elemento. Certifique-se de que o valor do seu `id` esteja todo em letras minúsculas.
• Você deve ter um elemento com um atributo `aria-live` definido como `"polite"`.
• Você deve ter um array `themes`.
• Seu array `themes` deve conter pelo menos dois objetos.
• Seu array `themes` deve conter pelo menos dois objetos, cada um com uma propriedade `name` e `message`.
• Seus valores das propriedades `name` e `message` devem ser strings que não estejam vazias.
• Cada um dos seus valores da propriedade `name` deve corresponder ao texto do conteúdo de um dos seus elementos `li`. Certifique-se de que esses valores estejam todos em minúsculas.
• Quando um usuário clica no `#theme-switcher-button` para exibir as opções de tema, o atributo `hidden` deve ser removido do elemento `#theme-dropdown`.
• Quando o elemento `#theme-dropdown` for exibido, o atributo `aria-expanded` deve ser definido como `"true"` para o elemento `button`.
• Quando o usuário clicar no `#theme-switcher-button` enquanto o elemento `#theme-dropdown` estiver exibido, o menu dropdown deve ser definido como `hidden`.
• Quando o usuário clicar no `#theme-switcher-button` enquanto o elemento `#theme-dropdown` estiver exibido, o atributo `aria-expanded` deve ser definido como `"false"`.
• Quando um usuário clica no `#theme-switcher-button` e seleciona um tema, a classe correspondente `theme-<name>` deve ser adicionada ao elemento `body`.
• Quando um usuário clica no `#theme-switcher-button` e seleciona um tema, uma `message` relacionada ao `theme` selecionado do array `themes` deve ser exibida no elemento com `aria-live="polite"`.
• Quando um usuário clica no `#theme-switcher-button` e seleciona dois temas diferentes, a classe do `body` e a mensagem de status devem ser atualizadas para corresponder a cada tema selecionado.