jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-26 02:37:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve accessibility for expandable details (#24532)

Browse Source
This commit is contained in:
Allen Porter 2022-10-12 03:00:48 -07:00 committed by GitHub
parent 60a276b7fb
commit c90e491562
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
plugins/details.rb
View File

@ -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

3
sass/custom/_details.scss
View File

@ -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;