Fix/cleanup and background interactability (keyboard navigation, focus/hover) (#4503) * refactor: remove unused background styles * feat: add support for nested @media, @supports, and @container rules in dynamic focus styles * fix: add keyboard focus support for background menu buttons back * fix: move "custom" background copy functionality to unified button UI and make it work again * refactor: simplify CSSContainerRule instance check using window global * fix: update hover and focus selector placeholder replacements to handle multiple occurrences in selector * Fix focused outline offset of background samples * Fix locked background outline color * Add a11y roles to background menu items * Add mobile-only button selector * fix: update button and list item selectors * Improve keyboard navigation in narrow layout * Hide rename button for custom=true backgrounds --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

dcc6ddf7ad303b4de68f2db09d842f373b05d063

Wolfsblvt <wolfsblvt@gmail.com>

Signed

Parents: 40a46bee9d3aec4c909ff2e8efa114ed693983af

public/css/backgrounds.css+15 -4 Viewed

@@ -59,8 +59,8 @@ body.reduced-motion #bg_custom {
59	z-index: -2;	59	z-index: -2;
60	}	60	}
61		61
62	.bg_example.locked {	62	.bg_example.flex-container.locked:not(:focus-visible) {
63	outline: 2px solid var(--golden);	63	outline-color: var(--golden);
64	}	64	}
65		65
66	/* This is the main flex container for the entire drawer */	66	/* This is the main flex container for the entire drawer */

     outline-offset: -1px;
+}
+.bg_example.flex-container:focus-visible {
+    outline-offset: inherit;
+}
 .bg_example_img {
     position: absolute;
     top: -2px;

     transition: opacity var(--animation-duration) ease-out, visibility var(--animation-duration) ease-out, transform var(--animation-duration) ease-out;
+}
-.bg_example:hover .jg-menu {
+.bg_example:hover .jg-menu,
+.bg_example:focus-within .jg-menu {
     opacity: 1;
     visibility: visible;
     transform: scale(1);

     display: flex;
+}
+.bg_example:not([custom="true"]) .jg-copy,
+.bg_example[custom="true"] .jg-edit {
+    display: none;
+}
 /* Thumbnail Title */
 .bg_example .BGSampleTitle {
     position: absolute;

@@ -209,6 +219,7 @@ body.reduced-motion #bg_custom {
209	border-radius: 0 0 8px 8px;	219	border-radius: 0 0 8px 8px;
210	}	220	}
211		221
212	.bg_example:hover .BGSampleTitle {	222	.bg_example:hover .BGSampleTitle,
		223	.bg_example:focus-within .BGSampleTitle {
213	opacity: 1;	224	opacity: 1;
214	}	225	}

public/css/mobile-styles.css+2 -1 Viewed

@@ -30,7 +30,8 @@
30	bottom: 0px;	30	bottom: 0px;
31	}	31	}
32		32
33	.bg_example:hover .jg-menu {	33	.bg_example:hover .jg-menu,
		34	.bg_example:focus-within .jg-menu {
34	display: none;	35	display: none;
35	}	36	}
36		37

public/index.html+4 -4 Viewed

         <div id="background_template" class="template_element">
             <div class="bg_example flex-container" bgfile="" title="">
                 <div class="bg_example_img"></div>
-                <div title="Copy to system backgrounds" data-i18n="[title]Copy to system backgrounds" class="bg_button bg_example_copy fa-solid fa-file-arrow-up"></div>
+                <div class="mobile-only-menu-toggle">
+                    <i class="fa-solid fa-ellipsis-vertical"></i>
+                </div>
                 <div class="jg-menu">
+                    <div data-action="copy" class="jg-button jg-copy fa-solid fa-file-arrow-up" data-i18n="[title]Copy to system backgrounds" title="Copy to system backgrounds"></div>
                     <!-- temporarily moved lock icon here (will be moved to header) -->
                     <div data-action="lock" class="jg-button jg-lock fa-solid fa-lock fa-fw pointer" data-i18n="[title]Lock" title="Lock"></div>
                     <div data-action="unlock" class="jg-button jg-unlock fa-solid fa-lock-open fa-fw pointer" data-i18n="[title]Unlock" title="Unlock"></div>
                     <div data-action="edit" class="jg-button jg-edit fa-solid fa-pen-to-square fa-fw pointer" data-i18n="[title]Rename Background" title="Rename Background"></div>
                     <div data-action="delete" class="jg-button jg-delete fa-solid fa-trash-can fa-fw pointer" data-i18n="[title]Delete Background" title="Delete Background"></div>
                 </div>
-                <div class="mobile-only-menu-toggle">
-                    <i class="fa-solid fa-ellipsis-vertical"></i>
-                </div>
                 <div class="BGSampleTitle"></div>
             </div>
         </div>

public/scripts/a11y.js+13 -1 Viewed

     '.swipe_right',
     '.character_select',
     '.tags .tag',
+    '.jg-menu .jg-button',
+    '.bg_example .mobile-only-menu-toggle',
+    '.paginationjs-pages li a',
 ].join(', ');
 const listSelectors = [

     '.recentChatList',
     '.dataMaidCategoryContent',
     '#userList',
+    '.bg_list',
 ].join(', ');
 const listItemSelectors = [
-    '.options-content .interactable',
+    '.options-content .list-group-item',
     '.list-group .list-group-item',
     '#rm_print_characters_block .entity_block',
     '#rm_group_members .group_member',

     '.recentChatList .recentChat',
     '.dataMaidCategoryContent .dataMaidItem',
     '#userList .userSelect',
+    '.bg_list .bg_example',
+].join(', ');
+const toolbarSelectors = [
+    '.jg-menu',
 ].join(', ');
 /** @type {Record<string, (element: Element) => void>} */

     [listItemSelectors]: (element) => {
         element.setAttribute('role', 'listitem');
     },
+    [toolbarSelectors]: (element) => {
+        element.setAttribute('role', 'toolbar');
+    },
     '#toast-container .toast-message': (element) => {
         element.setAttribute('role', 'alert');
     },

public/scripts/backgrounds.js+3 -1 Viewed

     $(document)
         .off('click', '.bg_example').on('click', '.bg_example', onSelectBackgroundClick)
-        .off('click', '.bg_example_copy').on('click', '.bg_example_copy', onCopyToSystemBackgroundClick)
         .off('click', '.bg_example .mobile-only-menu-toggle').on('click', '.bg_example .mobile-only-menu-toggle', function (e) {
             e.stopPropagation();
             const $context = $(this).closest('.bg_example');

                 case 'delete':
                     onDeleteBackgroundClick.call(this, e.originalEvent);
                     break;
+                case 'copy':
+                    onCopyToSystemBackgroundClick.call(this, e.originalEvent);
+                    break;
+            }
         });

public/scripts/dynamic-styles.js+52 -16 Viewed

  * @param {boolean} [options.fromExtension=false] - Indicates if the styles are from an extension
  */
 function applyDynamicFocusStyles(styleSheet, { fromExtension = false } = {}) {
-    /** @type {{baseSelector: string, rule: CSSStyleRule}[]} */
+    /** @typedef {{ type: 'media'|'supports'|'container', conditionText: string }} WrapperCond */
+    /** @type {{baseSelector: string, rule: CSSStyleRule, wrappers: WrapperCond[]}[]} */
     const hoverRules = [];
     /** @type {Set<string>} */
     const focusRules = new Set();

     const PLACEHOLDER = ':__PLACEHOLDER__';
     /**
+     * Builds a stable signature string for a chain of wrapper conditions so we can distinguish
+     * identical selectors under different contexts (e.g., different @media queries)
+     * @param {WrapperCond[]} wrappers
+     * @returns {string}
+     */
+    function wrapperSignature(wrappers) {
+        return wrappers.map(w => `${w.type}:${w.conditionText}`).join(';');
+    }
+    /**
      * Processes the CSS rules and separates selectors for hover and focus
      * @param {CSSRuleList} rules - The CSS rules to process
+     * @param {WrapperCond[]} wrappers - Current chain of wrapper conditions (@media/@supports/etc.)
      */
-    function processRules(rules) {
+    function processRules(rules, wrappers = []) {
         Array.from(rules).forEach(rule => {
             if (rule instanceof CSSImportRule) {
                 // Make sure that @import rules are processed recursively
-                processImportedStylesheet(rule.styleSheet);
+                // If the @import has media conditions, treat them as wrappers as well
+                /** @type {WrapperCond[]} */
+                const extra = (rule.media && rule.media.mediaText) ? [{ type: 'media', conditionText: rule.media.mediaText }] : [];
+                processImportedStylesheet(rule.styleSheet, [...wrappers, ...extra]);
             } else if (rule instanceof CSSStyleRule) {
                 // Separate multiple selectors on a rule
                 const selectors = rule.selectorText.split(',').map(s => s.trim());

                         // We currently do nothing here. Rules containing both hover and focus are very specific and should never be automatically touched
+                    }
                     else if (isHover) {
-                        const baseSelector = selector.replace(':hover', PLACEHOLDER).trim();
+                        const baseSelector = selector.replace(/:hover/g, PLACEHOLDER).trim();
-                        hoverRules.push({ baseSelector, rule });
+                        hoverRules.push({ baseSelector, rule, wrappers: [...wrappers] });
                     } else if (isFocus) {
                         // We need to make sure that we remember all existing :focus, :focus-within and :focus-visible rules
-                        const baseSelector = selector.replace(':focus-within', PLACEHOLDER).replace(':focus-visible', PLACEHOLDER).replace(':focus', PLACEHOLDER).trim();
+                        const baseSelector = selector.replace(/:focus(-within|-visible)?/g, PLACEHOLDER).trim();
-                        focusRules.add(baseSelector);
+                        focusRules.add(`${baseSelector}|${wrapperSignature(wrappers)}`);
+                    }
                 });
-            } else if (rule instanceof CSSMediaRule || rule instanceof CSSSupportsRule) {
+            } else if (rule instanceof CSSMediaRule) {
-                // Recursively process nested rules
+                // Recursively process nested @media rules
-                processRules(rule.cssRules);
+                processRules(rule.cssRules, [...wrappers, { type: 'media', conditionText: rule.conditionText }]);
+            } else if (rule instanceof CSSSupportsRule) {
+                // Recursively process nested @supports rules
+                processRules(rule.cssRules, [...wrappers, { type: 'supports', conditionText: rule.conditionText }]);
+            } else if (rule instanceof window.CSSContainerRule) {
+                // Recursively process nested @container rules (if supported by the browser)
+                // Note: conditionText contains the query like "(min-width: 300px)" or "style(color)"
+                // Using 'container' as the type ensures uniqueness separate from @media/@supports
+                processRules(rule.cssRules, [...wrappers, { type: 'container', conditionText: rule.conditionText }]);
+            }
         });
+    }

     /**
      * Processes the CSS rules of an imported stylesheet recursively
      * @param {CSSStyleSheet} sheet - The imported stylesheet to process
+     * @param {WrapperCond[]} wrappers - Wrapper conditions inherited from (at)import media
      */
-    function processImportedStylesheet(sheet) {
+    function processImportedStylesheet(sheet, wrappers = []) {
         if (sheet && sheet.cssRules) {
-            processRules(sheet.cssRules);
+            processRules(sheet.cssRules, wrappers);
+        }
+    }
-    processRules(styleSheet.cssRules);
+    processRules(styleSheet.cssRules, []);
     /** @type {CSSStyleSheet} */
     let targetStyleSheet = null;
     // Now finally create the dynamic focus rules
-    hoverRules.forEach(({ baseSelector, rule }) => {
+    hoverRules.forEach(({ baseSelector, rule, wrappers }) => {
-        if (!focusRules.has(baseSelector)) {
+        if (!focusRules.has(`${baseSelector}|${wrapperSignature(wrappers)}`)) {
             // Only initialize the dynamic stylesheet if needed
             targetStyleSheet ??= getDynamicStyleSheet({ fromExtension });

             // If something like :focus-within or a more specific selector like `.blah:has(:focus-visible)` for elements inside,
             // it should be manually defined in CSS.
             const focusSelector = rule.selectorText.replace(/:hover/g, ':focus-visible');
-            const focusRule = `${focusSelector} { ${rule.style.cssText} }`;
+            let focusRule = `${focusSelector} { ${rule.style.cssText} }`;
+            // Wrap the generated rule into the same @media/@supports/@container chain (if any)
+            if (wrappers.length > 0) {
+                // Build nested blocks from outermost to innermost
+                // Example: @media (x) { @supports (y) { <rule> } }
+                focusRule = wrappers.reduceRight((inner, w) => {
+                    if (w.type === 'media') return `@media ${w.conditionText} { ${inner} }`;
+                    if (w.type === 'supports') return `@supports ${w.conditionText} { ${inner} }`;
+                    if (w.type === 'container') return `@container ${w.conditionText} { ${inner} }`;
+                    return inner;
+                }, focusRule);
+            }
             try {
                 targetStyleSheet.insertRule(focusRule, targetStyleSheet.cssRules.length);

public/scripts/keyboard.js+1 -1 Viewed

     '.avatar-container', // Persona list blocks
     '.tag .tag_remove', // Remove button in removable tags
     '.bg_example', // Background elements in the background menu
-    '.bg_example .bg_button', // The inline buttons on the backgrounds
+    '.bg_example .jg-button, .bg_example .mobile-only-menu-toggle', // The inline buttons on the backgrounds
     '#options a', // Option entries in the popup options menu
     '.mes_buttons .mes_button', // Small inline buttons on the chat messages
     '.extraMesButtons>div:not(.mes_button)', // The extra/extension buttons inline on the chat messages

public/style.css+0 -74 Viewed

     justify-content: space-evenly;
+}
-.bg_example.locked {
-    outline: 2px solid var(--golden);
-}
-.bg_example:hover.locked .bg_example_lock,
-.bg_example:focus-within.locked .bg_example_lock {
-    display: none;
-}
-.bg_example:hover:not(.locked) .bg_example_unlock,
-.bg_example:focus-within:not(.locked) .bg_example_unlock {
-    display: none;
-}
-.bg_example:hover[custom="true"] .bg_example_edit,
-.bg_example:focus-within[custom="true"] .bg_example_edit {
-    display: none;
-}
-.bg_example:hover[custom="false"] .bg_example_copy,
-.bg_example:focus-within[custom="false"] .bg_example_copy {
-    display: none;
-}
-.bg_button {
-    padding: 4px;
-    position: absolute;
-    top: 5px;
-    cursor: pointer;
-    opacity: 0.8;
-    border-radius: 3px;
-    font-size: 20px;
-    color: var(--black70a);
-    text-shadow: none;
-    margin: 0;
-    filter: drop-shadow(0px 0px 3px white);
-    transition: opacity var(--animation-duration-2x) ease-in-out;
-    display: none;
-}
-.bg_example:hover .bg_button,
-.bg_example:focus-within .bg_button {
-    display: block;
-}
-.bg_button:hover {
-    opacity: 1;
-}
-.bg_example_cross {
-    right: 6px;
-}
-.bg_example_edit {
-    left: 6px;
-}
-.bg_example_copy {
-    left: 6px;
-}
-.bg_example_lock,
-.bg_example_unlock {
-    left: 50%;
-    transform: translateX(-50%);
-}
-.add_bg_but {
-    cursor: pointer;
-    opacity: 0.1;
-    height: 100%;
-    width: 100%;
-}
 .input-file {
     display: flex;
     justify-content: center;