From 8e720d1c60eed838abbfa82976a5ed9e30d29a54 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Wed, 8 Jul 2026 22:06:00 -0500 Subject: [PATCH 01/11] Set html structure to `ul`/`li`. Set roles. The snippets are a `menubar` in terms of role, and is a list of items (`menitem`, `li`). Note for myself: submenus are `menu` roles that immediately follow their triggering `menuitem` and are direct children of the parent `menu`, per WCAG. This is done in this commit. --- client/components/dropdown/dropdown.jsx | 8 ++++---- .../homebrew/editor/snippetbar/snippetbar.jsx | 18 ++++++++++-------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/client/components/dropdown/dropdown.jsx b/client/components/dropdown/dropdown.jsx index 0848f3fdd..b074f7b49 100644 --- a/client/components/dropdown/dropdown.jsx +++ b/client/components/dropdown/dropdown.jsx @@ -92,7 +92,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c }; return ( -
+
    • + ); }; diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index b4e7b311b..fad692193 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -188,7 +188,7 @@ const Snippetbar = createReactClass({ const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view); if(snippets.length === 0) return null; - return
    + return
    ; + ; }, replaceContent : function(item){ @@ -327,12 +327,14 @@ const SnippetGroup = createReactClass({ return _.map(snippets, (snippet)=>{ if(!snippet.subsnippets){ return ( - +
  • + +
    • ); } else if(snippet.subsnippets){ return ( From 2e3f69b478f1839c66a6e31e4f268889fe88c469 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Wed, 8 Jul 2026 22:09:25 -0500 Subject: [PATCH 02/11] Remove unnecessary styling on .menu-wrapper The styling in the dropdown.less file targeting `.menu-wrapper` was not doing anything. Double checked on old firefox, too, in case it was needed for oddbird polyfill. --- client/components/dropdown/dropdown.less | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/client/components/dropdown/dropdown.less b/client/components/dropdown/dropdown.less index 28a26954c..bf9a65cff 100644 --- a/client/components/dropdown/dropdown.less +++ b/client/components/dropdown/dropdown.less @@ -1,9 +1,4 @@ -.menu-wrapper { - position: relative; - &:is(.menu-bar > .menu-section > .menu-wrapper){ - display: inline-block; - } -} + .menu-list { position : fixed; @@ -12,13 +7,10 @@ left : anchor(left); position-try: flip-inline flip-block; color: inherit; // [popover] gets a `canvastext` color value from useragent. - > .menu-wrapper { - position:relative; - > .menu-list { + li > .menu-list { margin: 0 0px; top : anchor(top); left : anchor(right); position-try: flip-inline; } - } } \ No newline at end of file From 5c4d498a995866dfcaffd6207249ffcca145f1df Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Wed, 8 Jul 2026 22:26:37 -0500 Subject: [PATCH 03/11] add `contain: content` tiny change for tiny performance --- client/components/dropdown/dropdown.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/dropdown/dropdown.less b/client/components/dropdown/dropdown.less index bf9a65cff..edaa5935a 100644 --- a/client/components/dropdown/dropdown.less +++ b/client/components/dropdown/dropdown.less @@ -1,6 +1,6 @@ - .menu-list { + contain : content; position : fixed; z-index : 1000; top : anchor(bottom); From 6f1ad354928738f8e6c728bb6f63224127d0d58c Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Wed, 8 Jul 2026 23:35:45 -0500 Subject: [PATCH 04/11] add aria labels to items --- client/components/dropdown/dropdown.jsx | 2 ++ client/homebrew/editor/snippetbar/snippetbar.jsx | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/client/components/dropdown/dropdown.jsx b/client/components/dropdown/dropdown.jsx index b074f7b49..b6ea37d13 100644 --- a/client/components/dropdown/dropdown.jsx +++ b/client/components/dropdown/dropdown.jsx @@ -98,6 +98,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c className={['menu-item', color].join(' ')} popoverTarget={menuId} aria-haspopup='menu' + aria-label={groupName} role='menuitem' disabled={!React.Children.count(children)} ref={triggerRef} @@ -111,6 +112,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c className='menu-list' popover='auto' role='menu' + aria-label={`${groupName} Submenu`} onClick={handleMenuActionClick} > {children} diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index fad692193..255bea3fa 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -188,7 +188,7 @@ const Snippetbar = createReactClass({ const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view); if(snippets.length === 0) return null; - return
      + return
        {_.map(snippets, (snippetGroup)=>{ return - ); diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index 88cdcbc00..a004195e6 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -214,8 +214,7 @@ } } .name { margin-right : auto; } - .disabled { text-decoration : line-through; } - .beta { + .status { align-self : center; padding : 4px 6px; margin-left : 5px; From 5d67d48436c48d1f25959bda45083a71016eaefb Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Thu, 9 Jul 2026 14:13:22 -0500 Subject: [PATCH 07/11] Add custom properties to dropdown.less Adds registered custom properties to the dropdown menus, which can be set in another stylesheet at any level (either on the direct element or on an ancestor) or use the default values given. --- client/components/dropdown/dropdown.less | 16 +++++++++++++--- .../homebrew/editor/snippetbar/snippetbar.less | 5 ----- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/client/components/dropdown/dropdown.less b/client/components/dropdown/dropdown.less index 0d6666f73..3fc491323 100644 --- a/client/components/dropdown/dropdown.less +++ b/client/components/dropdown/dropdown.less @@ -1,10 +1,20 @@ +@property --menuColor { + syntax: ''; + inherits: true; + initial-value: #DDD; +} + +@property --activeTriggerColor { + syntax: ''; + inherits: true; +} + :root{ - --menuColor : var(--menu-color, #DDD); + --activeTriggerColor : var(--activeTriggerColor); } .menu-list { contain : content; position : fixed; - z-index : 1000; top : anchor(bottom); left : anchor(left); position-try: flip-inline flip-block; @@ -18,5 +28,5 @@ } } .menu-wrapper:has(:popover-open) > button { // if menu is open... - background-color: hsl(from var(--menuColor) h s calc(l * .85)); // tint menu triggers based on menu color + background-color: var(--activeTriggerColor, hsl(from var(--menuColor) h s calc(l * .85))); // tint menu triggers based on menu color } \ No newline at end of file diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index a004195e6..b2bf49011 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -150,11 +150,6 @@ display: none; } } - .menu-list { - padding : 0px; - background-color : #DDDDDD; - - } } .menu-item { From fe297a47b2d0ee679d82ce00e2f09bf5f4dea6e3 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Thu, 9 Jul 2026 14:14:21 -0500 Subject: [PATCH 08/11] cleanup extra css Remove some unused css rules that weren't cut before, and a little bit of rearranging to group "dropdown" stuff together and "tools" together. --- .../editor/snippetbar/snippetbar.less | 50 ++++--------------- 1 file changed, 11 insertions(+), 39 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index b2bf49011..53e5044ce 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -16,12 +16,6 @@ text-transform: uppercase; font-weight: 800; - .snippets { - display : flex; - justify-content : flex-start; - min-width : 499.35px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied - } - .editors { display : flex; justify-content : flex-end; @@ -118,23 +112,7 @@ } } } - .snippetBarButton { - display : inline-block; - height : @menuHeight; - padding : 0px 5px; - font-size : 0.625em; - font-weight : 800; - line-height : @menuHeight; - text-transform : uppercase; - text-wrap : nowrap; - cursor : pointer; - &:hover, &.selected { background-color : #999999; } - i { - margin-right : 3px; - font-size : 1.4em; - vertical-align : middle; - } - } + .toggleMeta { position : absolute; top : 0px; @@ -143,15 +121,17 @@ .tooltipLeft('Edit Brew Properties'); } - - .menu-wrapper { - .menu-item:is(.snippets > .menu-wrapper > .menu-item):first-child { - .caret { - display: none; - } - } + .snippets { + --activeTriggerColor: blue; + --menuColor : red; + display : flex; + justify-content : flex-start; + min-width : 499.35px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied } + // removed caret for top level items, by request (makes buttons too wide). + .menu-wrapper .menu-item:is(.snippets > .menu-wrapper > .menu-item):first-child .caret { display: none; } + .menu-item { position : relative; display : flex; @@ -161,9 +141,8 @@ padding : 5px; cursor : pointer; width: 100%; - .animate(background-color); &:is(.menu-list .menu-item) [class*="name"] { - padding-inline: 8px; + padding-inline: 8px; // additional space between icon and name (helpful in Fonts menu especially). } .menu-name { flex: 1; @@ -228,13 +207,6 @@ &:hover { background-color: unset; } } } - .disabledSnippets { - color: grey; - cursor: not-allowed; - - &:hover { background-color: #DDDDDD;} - } - } @container editor (width < 750px) { .snippetBar { From caeeabc7351421966f23e2638659d3bf6a262d52 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Mon, 27 Jul 2026 21:47:58 -0500 Subject: [PATCH 09/11] fixes to colors, and editor wrapping breakpoint. --- client/homebrew/editor/snippetbar/snippetbar.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index 53e5044ce..d7b32702b 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -3,6 +3,8 @@ @import (less) '@themes/fonts/5e/fonts.less'; .snippetBar { + --activeTriggerColor: inherit; + --menuColor : #DDDDDD; @menuHeight : 25px; position : relative; display : flex; @@ -122,8 +124,6 @@ } .snippets { - --activeTriggerColor: blue; - --menuColor : red; display : flex; justify-content : flex-start; min-width : 499.35px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied @@ -208,7 +208,7 @@ } } } -@container editor (width < 750px) { +@container editor (width < 818px) { .snippetBar { .editors { flex : 1; From 88720aadce494d3344da69ce5877b92cbe1688d9 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 15 Aug 2026 12:02:58 -0500 Subject: [PATCH 10/11] add initial-value --- client/components/dropdown/dropdown.less | 1 + package-lock.json | 46 +++++++++--------------- 2 files changed, 17 insertions(+), 30 deletions(-) diff --git a/client/components/dropdown/dropdown.less b/client/components/dropdown/dropdown.less index 3fc491323..8148a7c85 100644 --- a/client/components/dropdown/dropdown.less +++ b/client/components/dropdown/dropdown.less @@ -7,6 +7,7 @@ @property --activeTriggerColor { syntax: ''; inherits: true; + initial-value: #DDD; } :root{ diff --git a/package-lock.json b/package-lock.json index 7687faa24..a5f14ecfc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3907,9 +3907,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -3926,9 +3923,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -3945,9 +3939,6 @@ "cpu": [ "ppc64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -3964,9 +3955,6 @@ "cpu": [ "s390x" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -3983,9 +3971,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4002,9 +3987,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -9945,9 +9927,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -9968,9 +9947,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -9991,9 +9967,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -10014,9 +9987,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -10561,6 +10531,22 @@ "url": "https://opencollective.com/mongoose" } }, + "node_modules/mongoose/node_modules/gcp-metadata": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-7.0.1.tgz", + "integrity": "sha512-UcO3kefx6dCcZkgcTGgVOTFb7b1LlQ02hY1omMjjrrBzkajRMCFgYOjs7J71WqnuG1k2b+9ppGL7FsOfhZMQKQ==", + "license": "Apache-2.0", + "optional": true, + "peer": true, + "dependencies": { + "gaxios": "^7.0.0", + "google-logging-utils": "^1.0.0", + "json-bigint": "^1.0.0" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/mongoose/node_modules/mongodb": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-7.5.0.tgz", From 3442c877f881f66762412aa7032e525cda05d342 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 16 Aug 2026 10:41:27 +0200 Subject: [PATCH 11/11] final touches to snippetbar breakpoints --- client/homebrew/editor/snippetbar/snippetbar.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index d7b32702b..e49e02044 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -126,7 +126,7 @@ .snippets { display : flex; justify-content : flex-start; - min-width : 499.35px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied + min-width : 565.95px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied } // removed caret for top level items, by request (makes buttons too wide). @@ -208,7 +208,7 @@ } } } -@container editor (width < 818px) { +@container editor (width < 816px) { .snippetBar { .editors { flex : 1;