mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-22 08:46:51 +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)
|
def initialize(tag_name, title, tokens)
|
||||||
super
|
super
|
||||||
@title = title
|
@title = title
|
||||||
|
@details_idx = 1
|
||||||
end
|
end
|
||||||
|
|
||||||
def render(context)
|
def render(context)
|
||||||
@ -15,25 +16,35 @@ module Jekyll
|
|||||||
end
|
end
|
||||||
title = title.to_s.delete("\"")
|
title = title.to_s.delete("\"")
|
||||||
|
|
||||||
|
idx = context["details_idx"]
|
||||||
|
if idx.nil? then
|
||||||
|
idx = 0
|
||||||
|
end
|
||||||
|
context["details_idx"] = idx + 1
|
||||||
|
|
||||||
<<~MARKUP
|
<<~MARKUP
|
||||||
<script>
|
<script>
|
||||||
function showDetails(el) {
|
function showDetails(el) {
|
||||||
const content = el.parentElement.querySelector(".details-block-content");
|
const content = el.parentElement.querySelector(".details-block-content");
|
||||||
const up = el.querySelector("svg#up");
|
const up = el.querySelector("svg#up");
|
||||||
const down = el.querySelector("svg#down");
|
const down = el.querySelector("svg#down");
|
||||||
up.style.display = up.style.display === "none" ? "block" : "none";
|
const shouldExpand = down.style.display === "block";
|
||||||
down.style.display = down.style.display === "none" ? "block" : "none";
|
up.style.display = shouldExpand ? "block" : "none";
|
||||||
content.hidden = !content.hidden;
|
down.style.display = !shouldExpand ? "block" : "none";
|
||||||
|
content.hidden = !shouldExpand;
|
||||||
|
el.ariaExpanded = shouldExpand;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<div class="details-block">
|
<div class="details-block">
|
||||||
<div class='details-block-item'>
|
<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}
|
#{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="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>
|
<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>
|
||||||
<div class='details-block-content' hidden>#{contents}</div>
|
</button>
|
||||||
|
<div class='details-block-content' id="content_#{idx}" hidden>#{contents}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
MARKUP
|
MARKUP
|
||||||
|
@ -18,6 +18,9 @@ div.details-block {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
background-color: white;
|
||||||
|
border: 0px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
.details-block-content {
|
.details-block-content {
|
||||||
margin: 4px 32px 12px 0;
|
margin: 4px 32px 12px 0;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user