oss/miniflux-v2
oss/miniflux-v2
1
0
Fork 0
mirror of https://github.com/miniflux/v2.git synced 2025-08-01 17:38:37 +00:00
Code Wiki Activity

fix macOS VoiceOver didn't announce details and summary expand

Browse source
This commit is contained in:
krvpb024 2024-02-14 17:07:56 +08:00 • committed by Frédéric Guillot
parent c9cbe8afd5
commit 5c97771e61
4 changed files with 35 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

6
internal/template/templates/common/layout.html
View file

@ -116,10 +116,10 @@
</ul> </ul>
</nav> </nav>
<search role="search" class="search"> <search role="search" class="search">
<details {{ if $.searchQuery }}open{{ end }}> <details class="search-details" {{ if $.searchQuery }}open{{ end }}>
<summary> <summary class="search-summary">
<span>{{ t "search.label" }}</span> <span>{{ t "search.label" }}</span>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"> <svg class="bi bi-chevron-down search-summary-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/> <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
</svg> </svg>
</summary> </summary>

14
internal/ui/static/css/common.css
View file

@ -233,18 +233,21 @@ a:hover {
margin-right: 5px; margin-right: 5px;
} }
.search details svg { .search-summary-icon {
padding: 5px; padding: 5px;
inline-size: 24px; inline-size: 24px;
block-size: 24px; block-size: 24px;
translate: 0 -3px; translate: 0 -3px;
} }
.search details[open] svg { .search-details {
&[open] .search-summary-icon {
rotate: 180deg; rotate: 180deg;
} }
}
.search details > summary { .search-summary {
list-style: none; list-style: none;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -252,12 +255,11 @@ a:hover {
margin-inline: auto; margin-inline: auto;
} }
.search details > summary::marker, /* Latest Chrome, Edge, Firefox */ .search-summary::marker, /* Latest Chrome, Edge, Firefox */
.search details > summary::-webkit-details-marker /* Safari */ { .search-summary::-webkit-details-marker /* Safari */ {
display: none; display: none;
} }
.search-toggle-switch { .search-toggle-switch {
display: none; display: none;
} }

21
internal/ui/static/js/app.js
View file

@ -54,6 +54,27 @@ function checkMenuToggleModeByLayout() {
} }
} }
function fixVoiceOverDetailsSummaryBug() {
const detailsElements = document.querySelectorAll("details")
detailsElements.forEach((details) => {
const summaryElement = details.querySelector("summary")
summaryElement.setAttribute("role", "button")
setSummaryAriaExpandedByDetails(details, summaryElement)
details.addEventListener("toggle", () => {
setSummaryAriaExpandedByDetails(details, summaryElement)
})
})
function setSummaryAriaExpandedByDetails(details, summary) {
if (details.open) {
summary.setAttribute("aria-expanded", "true")
} else {
summary.setAttribute("aria-expanded", "false")
}
}
}
// Show and hide the main menu on mobile devices. // Show and hide the main menu on mobile devices.
function toggleMainMenu(event) { function toggleMainMenu(event) {
if (event.type === "keydown" && !(event.key === "Enter" || event.key === " ")) { if (event.type === "keydown" && !(event.key === "Enter" || event.key === " ")) {

2
internal/ui/static/js/bootstrap.js vendored
View file

@ -114,6 +114,8 @@ document.addEventListener("DOMContentLoaded", () => {
checkMenuToggleModeByLayout() checkMenuToggleModeByLayout()
window.addEventListener("resize", checkMenuToggleModeByLayout, { passive: true }) window.addEventListener("resize", checkMenuToggleModeByLayout, { passive: true })
fixVoiceOverDetailsSummaryBug()
const logoElement = document.querySelector(".logo") const logoElement = document.querySelector(".logo")
logoElement.addEventListener("click", (event) => toggleMainMenu(event)); logoElement.addEventListener("click", (event) => toggleMainMenu(event));
logoElement.addEventListener("keydown", (event) => toggleMainMenu(event)); logoElement.addEventListener("keydown", (event) => toggleMainMenu(event));