@spectrum-web-components/menu - npm Package Compare versions

Comparing version 0.8.4 to 0.8.5

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## [0.8.5](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/menu@0.8.4...@spectrum-web-components/menu@0.8.5) (2021-05-12)
+
+### Bug Fixes
+
+-   **menu:** pass current focus visibility to menu items ([2d3bf80](https://github.com/adobe/spectrum-web-components/commit/2d3bf8046379fe8caff926af81e62806e77f6a49))
+
 ## [0.8.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/menu@0.8.3...@spectrum-web-components/menu@0.8.4) (2021-04-15)
@@ -8,0 +14,0 @@

package.json

 {
     "name": "@spectrum-web-components/menu",
-    "version": "0.8.4",
+    "version": "0.8.5",
     "publishConfig": {
@@ -52,11 +52,11 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/action-button": "^0.4.6",
+        "@spectrum-web-components/action-button": "^0.4.7",
         "@spectrum-web-components/base": "^0.4.3",
-        "@spectrum-web-components/icon": "^0.9.5",
-        "@spectrum-web-components/icons-ui": "^0.6.5",
-        "@spectrum-web-components/shared": "^0.12.2",
+        "@spectrum-web-components/icon": "^0.9.6",
+        "@spectrum-web-components/icons-ui": "^0.6.6",
+        "@spectrum-web-components/shared": "^0.12.3",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/menu": "^3.0.1"
+        "@spectrum-css/menu": "^3.0.3"
     },
@@ -69,3 +69,3 @@ "types": "./src/index.d.ts",
     ],
-    "gitHead": "8acfee43ce3be5d4a6da4cf1179d3400bca77968"
+    "gitHead": "50e608e54fbf56132aeed4433299fbcf7f6893ac"
 }

src/Menu.d.ts

@@ -36,2 +36,3 @@ import { SpectrumElement, CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
     private prepItems;
+    private forwardFocusVisibleToitem;
     render(): TemplateResult;
@@ -38,0 +39,0 @@ protected firstUpdated(changed: PropertyValues): void;

src/Menu.js

@@ -37,3 +37,3 @@ /*
             if (this.getRootNode().activeElement === this) {
-                focusInItem.focused = true;
+                this.forwardFocusVisibleToitem(focusInItem);
             }
@@ -150,3 +150,3 @@ };
         if (!itemToFocus.disabled) {
-            itemToFocus.focused = true;
+            this.forwardFocusVisibleToitem(itemToFocus);
             this.setAttribute('aria-activedescendant', itemToFocus.id);
@@ -185,2 +185,18 @@ }
     }
+    forwardFocusVisibleToitem(item) {
+        let shouldFocus = false;
+        try {
+            // Browsers without support for the `:focus-visible`
+            // selector will throw on the following test (Safari, older things).
+            // Some won't throw, but will be focusing item rather than the menu and
+            // will rely on the polyfill to know whether focus is "visible" or not.
+            shouldFocus =
+                this.matches(':focus-visible') ||
+                    this.matches('.focus-visible');
+        }
+        catch (error) {
+            shouldFocus = this.matches('.focus-visible');
+        }
+        item.focused = shouldFocus;
+    }
     render() {
@@ -187,0 +203,0 @@ return html `

src/Menu.ts

@@ -170,3 +170,3 @@ /*
         if (!itemToFocus.disabled) {
-            itemToFocus.focused = true;
+            this.forwardFocusVisibleToitem(itemToFocus);
             this.setAttribute('aria-activedescendant', itemToFocus.id);
@@ -224,6 +224,22 @@ }
         if ((this.getRootNode() as Document).activeElement === this) {
-            focusInItem.focused = true;
+            this.forwardFocusVisibleToitem(focusInItem);
         }
     };
 
+    private forwardFocusVisibleToitem(item: MenuItem): void {
+        let shouldFocus = false;
+        try {
+            // Browsers without support for the `:focus-visible`
+            // selector will throw on the following test (Safari, older things).
+            // Some won't throw, but will be focusing item rather than the menu and
+            // will rely on the polyfill to know whether focus is "visible" or not.
+            shouldFocus =
+                this.matches(':focus-visible') ||
+                this.matches('.focus-visible');
+        } catch (error) {
+            shouldFocus = this.matches('.focus-visible');
+        }
+        item.focused = shouldFocus;
+    }
+
     public render(): TemplateResult {
@@ -230,0 +246,0 @@ return html`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

209034

increased by1.4%

Lines of code

2439

increased by1.33%

Dependency changes

• Updated@spectrum-web-components/action-button@^0.4.7

• Updated@spectrum-web-components/icon@^0.9.6

• Updated@spectrum-web-components/icons-ui@^0.6.6

• Updated@spectrum-web-components/shared@^0.12.3