From afb7e4886b97c65115cd3c225d4957727f310d5a Mon Sep 17 00:00:00 2001
From: bananarama92 <bananarama921@outlook.com>
Date: Sun, 30 Mar 2025 21:12:22 +0200
Subject: [PATCH] MAINT: Use DOM lists for the crafted dialog panel
---
BondageClub/CSS/dialog.css | 6 ++++++
BondageClub/Scripts/Dialog.js | 31 +++++++++++++++++++++----------
2 files changed, 27 insertions(+), 10 deletions(-)
diff --git a/BondageClub/CSS/dialog.css b/BondageClub/CSS/dialog.css
index 59b36a1643..3425554484 100644
--- a/BondageClub/CSS/dialog.css
+++ b/BondageClub/CSS/dialog.css
@@ -222,6 +222,12 @@
"dialog-crafted-footer dialog-crafted-footer dialog-crafted-footer dialog-crafted-footer" minmax(auto, min-content) / auto var(--gap) min(100%, calc(0.8 * var(--button-height))) var(--scrollbar-gutter)
}
+#dialog-crafted ul {
+ padding: unset;
+ margin: unset;
+ list-style-type: none;
+}
+
.dialog-crafted-info {
font: inherit;
overflow-wrap: break-word;
diff --git a/BondageClub/Scripts/Dialog.js b/BondageClub/Scripts/Dialog.js
index b1c85b242b..995ed05327 100644
--- a/BondageClub/Scripts/Dialog.js
+++ b/BondageClub/Scripts/Dialog.js
@@ -4066,6 +4066,7 @@ class _DialogCraftedMenu extends _DialogFocusMenu {
const ids = this.ids;
return document.getElementById(ids.root) ?? ElementCreate({
tag: "div",
+ attributes: { "aria-owns": ids.icon },
children: [
{
tag: "span",
@@ -4073,23 +4074,33 @@ class _DialogCraftedMenu extends _DialogFocusMenu {
classList: ["dialog-status", "scroll-box"],
},
{
- tag: "div",
+ tag: "ul",
attributes: { id: ids.info, "aria-labelledby": ids.status },
children: [
- { tag: "span", attributes: { id: ids.name }, classList: [ids.info] },
- { tag: "span", attributes: { id: ids.crafter }, classList: [ids.info] },
- { tag: "span", attributes: { id: ids.property }, classList: [ids.info] },
- { tag: "span", attributes: { id: ids.private }, classList: [ids.info] },
- { tag: "div", attributes: { id: ids.gap } },
- { tag: "div", classList: ["button", "blank-button", "button-styling", "dialog-grid-button", "dialog-icon"], attributes: { id: ids.icon } },
+ { tag: "li", attributes: { id: ids.name }, classList: [ids.info] },
+ { tag: "li", attributes: { id: ids.crafter }, classList: [ids.info] },
+ { tag: "li", attributes: { id: ids.property }, classList: [ids.info] },
+ { tag: "li", attributes: { id: ids.private }, classList: [ids.info] },
+ { tag: "div", attributes: { id: ids.gap, "aria-hidden": "true" } },
{
tag: "div",
+ classList: ["button", "blank-button", "button-styling", "dialog-grid-button", "dialog-icon"],
+ attributes: { id: ids.icon, role: "img", "aria-labelledby": `${ids.icon}-label` },
+ },
+ {
+ tag: "li",
attributes: { id: ids.footer },
classList: [ids.info, "scroll-box"],
children: [
- { tag: "span", attributes: { id: ids.description } },
- ],
- },
+ {
+ tag: "ul",
+ children: [
+ { tag: "li", attributes: { id: ids.description } },
+ ],
+ },
+ ]
+ }
+
],
},
],