Checkbox与label绑定后行为不一致，求Firefox环境下原因分析

已将代码精简至保留功能的最小版本，需在Firefox中运行（Chrome存在已上报并确认的bug）。点击第二个菜单项「click here first」可展开子菜单，点击非复选框项时子菜单会自动关闭；点击复选框项时子菜单应保持展开，目前点击复选框可正常生效，但点击与之绑定的label时无法勾选复选框，且子菜单会关闭。二者已通过id与for属性绑定，理论上应表现一致，恳请分析原因。

代码片段 #

CSS 代码 #

:root {
  --menu-padding:0.5em;
  --menu-checkmargin:0.5em;
  --menu-checksize:1em;
}

nav ul {
  position:absolute; white-space:nowrap;
  display:flex; width:fit-content;
  list-style-type:none; margin:0; padding:0;
}
nav ul > li:has(> a) {
  padding: 0;
}
nav ul > li:has(> a) > a {
  display: inline-block;
  padding: var(--menu-padding);
}
nav ul li:focus-within > ul {
  display: flex;
}
nav ul li:focus-within > ul:focus {
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  content-visibility: hidden;
}

nav li {
  position: relative;
  align-items: left;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  line-height: 1;
  padding: var(--menu-padding);
}

ul.qm-tiled {
  position: relative;
  text-align: left;
  flex-direction: column;
  white-space-collapse: collapse;
  left: 0;
}
ul.qm-tiled > li:focus-within:has(ul) {
  flex-direction: column;
  justify-content: space-between;
}
ul.qm-tiled > li:has(> ul:focus) {
  flex-direction: row;
}
ul.qm-tiled > li {
  display: flex;
}
ul.qm-tiled > li > ul {
  bottom: calc(-1 * var(--menu-padding));
}
ul.qm-tiled ul {
  position: relative;
  margin: 0 calc(-1 * var(--menu-padding));
  width: auto;
}
ul.qm-tiled li:not(:has(ul)):hover:focus {
  visibility: hidden;
}
ul.qm-tiled:has(> li > label) > li:not(ul.qm-tiled:has(> li > label) > li:has(> label)) {
  padding-left: calc(var(--menu-checkmargin) + var(--menu-checksize) + var(--menu-padding));
}
ul.qm-tiled:has(> li > label) > li label {
  padding-left: var(--menu-checkmargin);
}
ul.qm-tiled > li {
  width: 100%;
}
ul.qm-tiled ul {
  display: none;
  position: relative;
  text-align: left;
  flex-direction: column;
  white-space-collapse: collapse;
}
ul.qm-tiled ul > li:focus-within:has(ul) {
  flex-direction: column;
  justify-content: space-between;
}
ul.qm-tiled ul > li:has(> ul:focus) {
  flex-direction: row;
}
ul.qm-tiled ul > li {
  display: flex;
}
ul.qm-tiled ul > li > ul {
  bottom: calc(-1 * var(--menu-padding));
}
ul.qm-tiled ul ul {
  position: relative;
  margin: 0 calc(-1 * var(--menu-padding));
  width: auto;
}
ul.qm-tiled ul li:not(:has(ul)):hover:focus {
  visibility: hidden;
}
ul.qm-tiled ul:has(> li > label) > li:not(ul.qm-tiled ul:has(> li > label) > li:has(> label)) {
  padding-left: calc(var(--menu-checkmargin) + var(--menu-checksize) + var(--menu-padding));
}
ul.qm-tiled ul:has(> li > label) > li label {
  padding-left: var(--menu-checkmargin);
}

nav input[type=checkbox], nav input[type=radio] {
  display: inline-flex;
  line-height: 1;
  font-size: 100%;
  min-width: var(--menu-checksize);
  height: 0.75em;
  margin: 0;
  padding: 0;
}

HTML 代码 #

<nav>
<ul class="qm-tiled">
<li tabindex="0">[Item 1]</li>
<li tabindex="0">[click here first]
<ul tabindex="-1">
<li tabindex="0">[Subitem]</li>
<li><input type="checkbox" id="chk22a" name="chk22a" /><label for="chk22a">[LABEL]</label></li>
</ul>
<li tabindex="0">[Item 3]</li>
</ul>
</nav>

内容的提问来源于stack exchange，提问作者rhavin