merge main to my branch

lerna.json

@@ -1,5 +1,11 @@
 {
-    "packages": ["packages/*", "projects/*", "tools/*"],
+    "packages": [
+        "linters/*",
+        "packages/*",
+        "projects/*",
+        "tools/*",
+        "react/*"
+    ],
     "version": "0.34.0",
     "granularPathspec": false,
     "npmClient": "yarn",

package.json

@@ -121,7 +121,7 @@
         "@web/dev-server-storybook": "^0.7.1",
         "@web/rollup-plugin-copy": "^0.4.0",
         "@web/rollup-plugin-html": "^2.0.0",
-        "@web/test-runner": "^0.16.1",
+        "@web/test-runner": "^0.17.0",
         "@web/test-runner-commands": "^0.7.0",
         "@web/test-runner-junit-reporter": "^0.6.0",
         "@web/test-runner-playwright": "^0.10.0",
@@ -158,7 +158,7 @@
         "lit": "^2.5.0",
         "lit-analyzer": "^1.2.1",
         "mocha-junit-reporter": "^2.0.2",
-        "netlify-cli": "^12.9.2",
+        "netlify-cli": "^15.9.0",
         "next": "^13.4.1",
         "node-fetch": "^3.1.0",
         "npm-run-all": "^4.1.5",
@@ -386,6 +386,7 @@
         }
     },
     "workspaces": [
+        "linters/*",
         "packages/*",
         "projects/*",
         "tools/*",

packages/menu/src/MenuItem.ts

@@ -329,7 +329,10 @@ export class MenuItem extends LikeAnchor(Focusable) {
         const assignedElements = event.target.assignedElements({
             flatten: true,
         });
-        this.hasSubmenu = this.open || !!assignedElements.length;
+        this.hasSubmenu = this.open || !!assignedElements;
+        if (this.hasSubmenu) {
+            this.setAttribute('aria-haspopup', 'true');
+        }
     }
 
     private handleRemoveActive(event: Event): void {
@@ -415,6 +418,7 @@ export class MenuItem extends LikeAnchor(Focusable) {
         }
         this.open = true;
         this.active = true;
+        this.setAttribute('aria-expanded', 'true');
         const submenu = (
             this.shadowRoot.querySelector(
                 'slot[name="submenu"]'
@@ -425,6 +429,10 @@ export class MenuItem extends LikeAnchor(Focusable) {
             this.handleSubmenuPointerenter
         );
         submenu.addEventListener('change', this.handleSubmenuChange);
+        if (!submenu.id) {
+            submenu.setAttribute('id', `${this.id}-submenu`);
+        }
+        this.setAttribute('aria-controls', submenu.id);
         const popover = document.createElement('sp-popover');
         const returnSubmenu = reparentChildren([submenu], popover, {
             position: 'beforeend',
@@ -446,6 +454,7 @@ export class MenuItem extends LikeAnchor(Focusable) {
             root: this.menuData.focusRoot,
         });
         const closeSubmenu = async (): Promise<void> => {
+            this.setAttribute('aria-expanded', 'false');
             delete this.closeOverlay;
             (await closeOverlay)();
         };

packages/meter/src/Meter.ts

@@ -85,7 +85,7 @@ export class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, '')) {
 
     protected override firstUpdated(changes: PropertyValues): void {
         super.firstUpdated(changes);
-        this.setAttribute('role', 'progressbar');
+        this.setAttribute('role', 'meter progressbar');
     }
 
     protected override updated(changes: PropertyValues): void {

packages/swatch/README.md

@@ -201,7 +201,7 @@ The `disabled` attribute/property determines prevents interaction on the `<sp-sw
 The `mixed-value` attribute and `mixedValue` property outline when an `<sp-swatch>` element represents more than one color.
 
 ```html
-<sp-swatch-group>
+<sp-swatch-group selects="multiple">
     <sp-swatch mixed-value></sp-swatch>
     <sp-swatch mixed-value rounding="full"></sp-swatch>
     <sp-swatch mixed-value shape="rectangle"></sp-swatch>

packages/textfield/src/textfield.css

@@ -44,7 +44,7 @@ textarea {
     forced-color-adjust: var(--swc-test-forced-color-adjust);
 }
 
-:host([grows]) .input {
+:host([grows]:not([quiet])) .input {
     position: absolute;
     top: 0;
     left: 0;
@@ -53,7 +53,7 @@ textarea {
     overflow: hidden;
 }
 
-:host([grows]) #textfield:after {
+:host([grows]:not([quiet])) #textfield:after {
     grid-area: unset;
     min-block-size: calc(
         var(

projects/css-custom-vars-viewer/package.json

@@ -54,7 +54,7 @@
         "@typescript-eslint/parser": "^5.35.0",
         "@web/dev-server": "^0.2.1",
         "@web/dev-server-storybook": "^0.7.1",
-        "@web/test-runner": "^0.16.1",
+        "@web/test-runner": "^0.17.0",
         "concurrently": "^5.3.0",
         "tslib": "^2.3.1",
         "typescript": "^4.7.2"