mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-21 16:27:19 +00:00
Improve accessibility for expandable details (#24532)
This commit is contained in:
parent
60a276b7fb
commit
c90e491562
@ -4,6 +4,7 @@ module Jekyll
|
||||
def initialize(tag_name, title, tokens)
|
||||
super
|
||||
@title = title
|
||||
@details_idx = 1
|
||||
end
|
||||
|
||||
def render(context)
|
||||
@ -15,25 +16,35 @@ module Jekyll
|
||||
end
|
||||
title = title.to_s.delete("\"")
|
||||
|
||||
idx = context["details_idx"]
|
||||
if idx.nil? then
|
||||
idx = 0
|
||||
end
|
||||
context["details_idx"] = idx + 1
|
||||
|
||||
<<~MARKUP
|
||||
<script>
|
||||
function showDetails(el) {
|
||||
const content = el.parentElement.querySelector(".details-block-content");
|
||||
const up = el.querySelector("svg#up");
|
||||
const down = el.querySelector("svg#down");
|
||||
up.style.display = up.style.display === "none" ? "block" : "none";
|
||||
down.style.display = down.style.display === "none" ? "block" : "none";
|
||||
content.hidden = !content.hidden;
|
||||
const shouldExpand = down.style.display === "block";
|
||||
up.style.display = shouldExpand ? "block" : "none";
|
||||
down.style.display = !shouldExpand ? "block" : "none";
|
||||
content.hidden = !shouldExpand;
|
||||
el.ariaExpanded = shouldExpand;
|
||||
}
|
||||
</script>
|
||||
<div class="details-block">
|
||||
<div class='details-block-item'>
|
||||
<div class='details-block-title' onclick='showDetails(this)'>
|
||||
<button class='details-block-title' onclick='showDetails(this)' aria-controls="content_#{idx}" aria-expanded="false">
|
||||
#{title}
|
||||
<div class='details-block-arrow'>
|
||||
<svg id="down" style="display: block;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
|
||||
<svg id="up" style="display: none;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>
|
||||
</div>
|
||||
<div class='details-block-content' hidden>#{contents}</div>
|
||||
</div>
|
||||
</button>
|
||||
<div class='details-block-content' id="content_#{idx}" hidden>#{contents}</div>
|
||||
</div>
|
||||
</div>
|
||||
MARKUP
|
||||
|
@ -18,6 +18,9 @@ div.details-block {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
border: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
.details-block-content {
|
||||
margin: 4px 32px 12px 0;
|
||||
|
Loading…
x
Reference in New Issue
Block a user