{"id":20198900,"url":"https://github.com/merieli/meri-menuacessible-dev","last_synced_at":"2025-06-18T17:39:29.282Z","repository":{"id":134839651,"uuid":"464184135","full_name":"Merieli/meri-menuAcessible-dev","owner":"Merieli","description":" [Front-End] Personal Project - 100% accessible menu component (Under development)","archived":false,"fork":false,"pushed_at":"2022-05-09T10:52:51.000Z","size":172,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-03T08:30:55.343Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Merieli.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-27T16:03:19.000Z","updated_at":"2022-07-01T12:38:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"1d4384f2-ed02-4a56-832f-e8a991b44a0d","html_url":"https://github.com/Merieli/meri-menuAcessible-dev","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Merieli/meri-menuAcessible-dev","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merieli%2Fmeri-menuAcessible-dev","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merieli%2Fmeri-menuAcessible-dev/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merieli%2Fmeri-menuAcessible-dev/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merieli%2Fmeri-menuAcessible-dev/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Merieli","download_url":"https://codeload.github.com/Merieli/meri-menuAcessible-dev/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merieli%2Fmeri-menuAcessible-dev/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260600566,"owners_count":23034737,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T04:34:40.955Z","updated_at":"2025-06-18T17:39:24.268Z","avatar_url":"https://github.com/Merieli.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n    \u003cbr\u003e\n    \u003cimg src=\"[url da Logo do projeto]\" alt=\"\" width=\"120\"\u003e\n    \u003cbr\u003e\n    \u003cbr\u003e\n    Accessible Menu Component\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eThis is [breve descrição do projeto]\u003c/p\u003e\n\n\u003c!-- SHIELDS DO PROJETO --\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\" alt=\"License MIT\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n  \n\u003c!-- INSERIR GIF DEMO DO PROJETO --\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"[GIF DE DEMONSTRAÇÃO OU IMAGEM do projeto]\" alt=\"demo-web\" height=\"425\"\u003e\n\u003c/div\u003e\n\n\u003chr/\u003e\n\n## ⚡ Built With\nThis project was developed with the following technologies:\n- \u003cimg src=\"https://img.icons8.com/color/50/000000/html-5.png\"  width=\"20px\"/\u003e\u003cimg src=\"https://img.icons8.com/color/48/000000/css3.png\" width=\"20px\"/\u003e **HTML e CSS**\n- \u003cimg src=\"https://img.icons8.com/color/48/000000/javascript--v1.png\"  width=\"20px\"/\u003e **JavaScript**\n- \u003cimg src=\"https://img.icons8.com/color/48/000000/sass-avatar.png\" width=\"20px\"/\u003e **SASS**\n\u003cbr\u003e\u003cbr\u003e\n- Design: https://www.figma.com/file/LLkrFHfNYTRXThrVxlJCQe/menu?node-id=0%3A1\n\n## 🗂 How To Use\n\n\u003cdetails\u003e\n\u003csummary\u003e \u003cstrong\u003eRequirements\u003c/strong\u003e \u003c/summary\u003e\n\n##### To clone and run the project:\n- Git\n\n##### To Develop:\n- Git\n- Sass\n\u003c/details\u003e\n\n#### Starting Development \n```\n# Iniciar a compilação SASS\ngulp\n```\n\n### Navigating through the menu\n\n\u003cdetails\u003e\n    \u003csummary\u003e \u003cstrong\u003eMenu Type [01-0]\u003c/strong\u003e \u003c/summary\u003e\n    Menu Acessivel com interações Vanilla JS Baseado no \u003ca href=\"https://codepen.io/merieli/pen/WNXawBz\"\u003emenu da W3C.\u003c/a\u003e \n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e \u003cstrong\u003eMenu Type [02-0]\u003c/strong\u003e \u003c/summary\u003e\n    Menu Acessivel com interações completas em Vanilla JS Baseado no \u003ca href=\"https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190814/examples/menubar/menubar-1/menubar-1.html#\"\u003emenu da W3C\u003c/a\u003e com semantica correta e facilitada para uso de leitor de tela.\n    \u003cp\u003ePara usar o menu acessível é preciso seguir a estrutura HTML do menu02.html, com os atributos e data-attributes necessários para cada tipo de item ou subitem do menu. E ao utilizar o script JS deve ser selecionado o data atribute correto para a variavel menubar. No CSS alem do hover sobre os itens do menu que deve exibir o submenu, a classe \"active\" também deve ativar a visibilidade do submenu.\u003c/p\u003e\n\n#### Keyboard Support\n|       Key          |       Function    |\n|       :----:       |       :---        |\n| [**Space**] / [**Enter**] | - Abre o submenu e move o foco para o primeiro item no submenu.\u003cbr\u003e - Quando usado no submenu abre o link. |\n| [**ESC**] | - Quando o foco esta em um submenu, fecha o submenu.\u003cbr\u003e - Move o foco para o item pai da barra de menus |\n| ➡ | - Move o foco para o próximo item na barra de menus.\u003cbr\u003e - Se o foco estiver no último item, move o foco para o primeiro item.\u003cbr\u003e - Se o foco estiver em um item de submenu, abre o próximo submenu e coloca o foco no primeiro item. \u003cbr\u003e - Se o foco estiver em um item que não possui um submenu: Fecha o submenu; Move o foco para o próximo item na barra de menus; Abre o submenu do item da barra de menus recém-focado, mantendo o foco nesse item da barra de menus pai. |\n| ⬅ | - Move o foco para o item anterior na barra de menus.\u003cbr\u003e - Se o foco estiver no primeiro item, move o foco para o último item. |\n| ⬇ | - Abre o submenu e move o foco para o primeiro item no submenu.\u003cbr\u003e - Quando em um submenu, move o foco para o próximo item.\u003cbr\u003e - Se o foco estiver no último item de um submenu, move o foco para o primeiro item. |\n| ⬆ | - Abre o submenu e move o foco para o último item do submenu.\u003cbr\u003e - Quando em um submenu, move o foco para o item anterior.\u003cbr\u003e - Se o foco estiver no primeiro item de um submenu, move o foco para o último item. |\n| [**Home**] | Move o foco para o primeiro item na barra de menus/ submenu. |\n| [**End**] | Move o foco para o último item na barra de menus/ submenu. |\n| [Character 🔡] | - Move o foco para o próximo item na barra de menus/ submenu com um nome que começa com o caractere digitado.\u003cbr\u003e - Se nenhum dos itens tiver um nome começando com o caractere digitado, o foco não se moverá. |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e \u003cstrong\u003eMenu Type [02-1]\u003c/strong\u003e \u003c/summary\u003e\n    Menu Acessivel com interações completas utilizando JS e JQuery Baseado no \u003ca href=\"https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190814/examples/menubar/menubar-1/menubar-1.html#\"\u003emenu da W3C\u003c/a\u003e com semantica correta e facilitada para uso de leitor de tela.\n    \u003cp\u003ePara usar o menu acessível é preciso seguir a estrutura HTML do menu02.html, com os atributos e data-attributes necessários para cada tipo de item ou subitem do menu. E ao utilizar o script JS deve ser selecionado o data atribute correto para a variavel menubar. No CSS alem do hover sobre os itens do menu que deve exibir o submenu, a classe \"active\" também deve ativar a visibilidade do submenu.\u003c/p\u003e\n\n#### Keyboard Support\n|       Key          |       Function    |\n|       :----:       |       :---        |\n| [**Space**] / [**Enter**] | - Abre o submenu e move o foco para o primeiro item no submenu.\u003cbr\u003e - Quando usado no submenu abre o link. |\n| [**ESC**] | - Quando o foco esta em um submenu, fecha o submenu.\u003cbr\u003e - Move o foco para o item pai da barra de menus |\n| ➡ | - Move o foco para o próximo item na barra de menus.\u003cbr\u003e - Se o foco estiver no último item, move o foco para o primeiro item.\u003cbr\u003e - Se o foco estiver em um item de submenu, abre o próximo submenu e coloca o foco no primeiro item. \u003cbr\u003e - Se o foco estiver em um item que não possui um submenu: Fecha o submenu; Move o foco para o próximo item na barra de menus; Abre o submenu do item da barra de menus recém-focado, mantendo o foco nesse item da barra de menus pai. |\n| ⬅ | - Move o foco para o item anterior na barra de menus.\u003cbr\u003e - Se o foco estiver no primeiro item, move o foco para o último item. |\n| ⬇ | - Abre o submenu e move o foco para o primeiro item no submenu.\u003cbr\u003e - Quando em um submenu, move o foco para o próximo item.\u003cbr\u003e - Se o foco estiver no último item de um submenu, move o foco para o primeiro item. |\n| ⬆ | - Abre o submenu e move o foco para o último item do submenu.\u003cbr\u003e - Quando em um submenu, move o foco para o item anterior.\u003cbr\u003e - Se o foco estiver no primeiro item de um submenu, move o foco para o último item. |\n| [**Home**] | Move o foco para o primeiro item na barra de menus/ submenu. |\n| [**End**] | Move o foco para o último item na barra de menus/ submenu. |\n| [Character 🔡] | - Move o foco para o próximo item na barra de menus/ submenu com um nome que começa com o caractere digitado.\u003cbr\u003e - Se nenhum dos itens tiver um nome começando com o caractere digitado, o foco não se moverá. |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e \u003cstrong\u003eMenu Type [02-2]\u003c/strong\u003e \u003c/summary\u003e\n    Menu Acessivel mais simples utilizando JS e JQuery Baseado no \u003ca href=\"https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190814/examples/menubar/menubar-1/menubar-1.html#\"\u003emenu da W3C\u003c/a\u003e com semantica correta e facilitada para uso de leitor de tela.\n    \u003cp\u003ePara usar o menu acessível é preciso seguir a estrutura HTML do menu02.html, com os atributos e data-attributes necessários para cada tipo de item ou subitem do menu. E ao utilizar o script JS deve ser selecionado o data atribute correto para a variavel menubar. No CSS alem do hover sobre os itens do menu que deve exibir o submenu, a classe \"active\" também deve ativar a visibilidade do submenu.\u003c/p\u003e\n\n#### Keyboard Support\n|       Key          |       Function    |\n|       :----:       |       :---        |\n| [**Space**] / [**Enter**] | - Abre o submenu e move o foco para o primeiro item no submenu.\u003cbr\u003e - Quando usado no submenu abre o link. |\n| [**ESC**] | - Quando o foco esta em um submenu, fecha o submenu.\u003cbr\u003e - Move o foco para o item pai da barra de menus |\n| ➡ | - Move o foco para o próximo item na barra de menus.\u003cbr\u003e - Se o foco estiver no último item, move o foco para o primeiro item.\u003cbr\u003e - Se o foco estiver em um item de submenu, abre o próximo submenu e coloca o foco no primeiro item. \u003cbr\u003e - Se o foco estiver em um item que não possui um submenu: Fecha o submenu; Move o foco para o próximo item na barra de menus; Abre o submenu do item da barra de menus recém-focado, mantendo o foco nesse item da barra de menus pai. |\n| ⬅ | - Move o foco para o item anterior na barra de menus.\u003cbr\u003e - Se o foco estiver no primeiro item, move o foco para o último item. |\n| ⬇ | - Abre o submenu e move o foco para o primeiro item no submenu.\u003cbr\u003e - Quando em um submenu, move o foco para o próximo item.\u003cbr\u003e - Se o foco estiver no último item de um submenu, move o foco para o primeiro item. |\n| ⬆ | - Abre o submenu e move o foco para o último item do submenu.\u003cbr\u003e - Quando em um submenu, move o foco para o item anterior.\u003cbr\u003e - Se o foco estiver no primeiro item de um submenu, move o foco para o último item. |\n| [**Home**] | Move o foco para o primeiro item na barra de menus/ submenu. |\n| [**End**] | Move o foco para o último item na barra de menus/ submenu. |\n\n\u003c/details\u003e\n\n\n## :octocat: Contributing\n\nThis project is for study purposes, so contact me and let me know your ideas.\n\nAll kinds of contributions are very welcome and appreciated!\n   - ⭐️ Star the project\n   - 🐛 Find and report issues\n   - 📥 Submit PRs to help solve issues or add features\n   - ✋ Influence the future of project with feature requests\n\n## 🔖 License\n\nThis project is licensed under the MIT License - see the [LICENSE](https://opensource.org/licenses/MIT) page for details.\n\n-------------------------------------\n\n🤍 Made by \u003cstrong\u003eMerieli Manzano\u003c/strong\u003e Ⓜ\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\u003c/details\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerieli%2Fmeri-menuacessible-dev","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmerieli%2Fmeri-menuacessible-dev","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerieli%2Fmeri-menuacessible-dev/lists"}