Add WAI-ARIA attributes to menu

This commit is contained in:
Kitaiti Makoto 2021-02-12 18:54:42 +09:00
parent 6599179174
commit 16b1337d67
2 changed files with 12 additions and 4 deletions

View File

@ -101,7 +101,11 @@ fn menu() {
let show_menu = Closure::wrap(Box::new(|_: TouchEvent| { let show_menu = Closure::wrap(Box::new(|_: TouchEvent| {
self::document() self::document()
.get_element_by_id("menu") .get_element_by_id("menu")
.map(|menu| menu.class_list().add_1("show")) .map(|menu| {
menu.set_attribute("aria-expanded", "true")
.map(|_| menu.class_list().add_1("show"))
})
.unwrap()
.unwrap() .unwrap()
.unwrap(); .unwrap();
}) as Box<dyn FnMut(TouchEvent)>); }) as Box<dyn FnMut(TouchEvent)>);
@ -113,7 +117,11 @@ fn menu() {
let close_menu = Closure::wrap(Box::new(|_: TouchEvent| { let close_menu = Closure::wrap(Box::new(|_: TouchEvent| {
self::document() self::document()
.get_element_by_id("menu") .get_element_by_id("menu")
.map(|menu| menu.class_list().remove_1("show")) .map(|menu| {
menu.set_attribute("aria-expanded", "false")
.map(|_| menu.class_list().remove_1("show"))
})
.unwrap()
.unwrap() .unwrap()
.unwrap() .unwrap()
}) as Box<dyn FnMut(TouchEvent)>); }) as Box<dyn FnMut(TouchEvent)>);

View File

@ -21,9 +21,9 @@
<body> <body>
<header> <header>
<nav id="menu"> <nav id="menu">
<a href="#" aria-label="@i18n!(ctx.1, "Menu")" title="@i18n!(ctx.1, "Menu")"><i class="icon icon-menu"></i></a> <a href="#" aria-label="@i18n!(ctx.1, "Menu")" title="@i18n!(ctx.1, "Menu")" role="button" aria-haspopup="true" aria-controls="content" aria-epanded="false"><i class="icon icon-menu"></i></a>
</nav> </nav>
<div id="content"> <div id="content" role="menu" aria-labelled-by="menu">
<nav> <nav>
<a href="@uri!(instance::index)" class="title"> <a href="@uri!(instance::index)" class="title">
<img src="@uri!(plume_static_files: file = CONFIG.logo.main.as_str(), build_id = CACHE_NAME)"> <img src="@uri!(plume_static_files: file = CONFIG.logo.main.as_str(), build_id = CACHE_NAME)">