@ewc-lib/ewc-popovers 2.0.0-beta → 2.0.3-beta

package/ewc-popover/src/element.js

@@ -14,7 +14,7 @@ export default class Element extends HTMLElement {
 	
 	connectedCallback(ignoreCheck) {
 		if(this.#isInitialized) { return } else { this.#isInitialized=true }
-    this.setAttribute("ewc-version", "2.0.0-beta")		// please always keep in sync with version in package.json
+    this.setAttribute("ewc-version", "2.0.3-beta")		// please always keep in sync with version in package.json
 		if(ignoreCheck || this.childElementCount===2) {
 			// please see also comment in html.js
 

package/ewc-popover/src/markup.js

@@ -21,7 +21,7 @@ function main() {
   return `
   <div class="main_container">
     <slot name="toggle"></slot>
-    <div class="ewc-popover__container" aria-expanded="false" role="dialog">
+    <div class="ewc-popover__container" role="dialog">
         <div part="contentContainer" class="ewc-popover__scrollable">
           <slot class="ewc-popover__content" name="content"></slot>
       </div>

package/ewc-popover/src/popover.js

@@ -372,7 +372,7 @@ export class Popover {
   }
 
   setFocusToToggleElement() {
-    this.element.children[0].focus()
+    this.element.firstElementChild.assignedElements()[0].focus()
   }
 
   /**

package/ewc-popover-sharing/readme.md

@@ -26,6 +26,8 @@ Note: can be modified at runtime.
 This implements creating URLs and opening websites, email client or invoking an ewc-dialog (for embed).
 It's usage is **optional**.
 
+TODO: better description
+
 # Details
 
 The ewc-popover-sharing derives from ewc-popover.

package/ewc-popover-sharing/src/element.js

@@ -16,11 +16,8 @@ export default class Element extends Popover {
     } else {
       this.#isInitialized = true;
     }
+    super.connectedCallback(true);
     if (this.childElementCount === 1) {
-      super.connectedCallback(true);
-
-      this.setAttribute("ewc-version", "2.0.0-beta")		// please always keep in sync with version in package.json
-
       this.shadowRoot.appendChild( CSS().cloneNode(true) )
       this.shadowRoot.appendChild( MARKUP.getSvg() )
 
@@ -32,7 +29,7 @@ export default class Element extends Popover {
       this.#enableFocusWrap();
       this.#enableFocusFirstMenuItem()
     } else {
-      console.error("popover-sharing: Must have exactly 1 child, which is an clickable element to toggle visibility of the popover.");
+      console.error("popover-sharing: Must have exactly 1 child (some clickable element) to toggle visibility of the popover.");
     }
   }
 
@@ -70,26 +67,25 @@ export default class Element extends Popover {
     this.shadowRoot.querySelector(".ewc-popover__container").addEventListener(
       "keydown",
       (e) => {
-        handle(
-          "ArrowDown",
-          (e) => e.nextElementSibling,
-          (e) => e.parentNode.firstElementChild,
-        );
-        handle(
-          "ArrowUp",
-          (e) => e.previousElementSibling,
-          (e) => e.parentNode.lastElementChild,
-        );
-
-        function handle(key, direction, direction2) {
-          if (e.key === key) {
-            e.preventDefault();
-            const el = direction(e.target.closest("li"));
-            if (el) {
-              el.focus();
-            } else {
-              direction2(e.target.closest("li")).focus();
-            }
+        if(e.key==="ArrowDown" || (e.key==="Tab" && !e.shiftKey)) {
+          handle(
+            (e) => e.nextElementSibling,
+            (e) => e.parentNode.firstElementChild,
+          );
+        }
+        if(e.key==="ArrowUp" || (e.key==="Tab" && e.shiftKey)) {
+          handle(
+            (e) => e.previousElementSibling,
+            (e) => e.parentNode.lastElementChild,
+          );
+        }
+        function handle(directionNext, wrapTo) {
+          e.preventDefault();
+          const el = directionNext(e.target.closest("li"));
+          if (el) {
+            el.focus();
+          } else {
+            wrapTo(e.target.closest("li")).focus();
           }
         }
       },

package/ewc-popover-sharing/src/markup.js

@@ -24,7 +24,7 @@ export function html(enabledItems) {
 
   function getMenuItemHtml(included, classId, label) {
     return included?`<li class="ewc-popover-sharing__item ${classId}" tabindex="0">
-      <a class="ewc-link ewc-link--standalone ewc-popover-sharing__link" role="menuitem" tabindex="-1">
+      <a class="ewc-link ewc-link--standalone ewc-popover-sharing__link" tabindex="-1">
         <svg class="ewc-icon ewc-icon--m ewc-button__icon" focusable="false" aria-hidden="true">
           <use href="#svg-${classId}"></use>
         </svg>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ewc-lib/ewc-popovers",
   "description": "Monorepo for EWCL popover WebComponents",
   "//": "please always keep version in sync with version info in the sourcecode",
-  "version": "2.0.0-beta",
+  "version": "2.0.3-beta",
   "workspaces": [
     "ewc-popover",
     "ewc-popover-sharing"

package/readme.md

@@ -99,3 +99,14 @@ Before the 2 popover components were grouped together into this monorepo, they e
 
 - 2.0.0-beta
   - initial version of monorepo, containing 2 former singlerepos
+
+- 2.0.1-beta
+  - bugfix: wrong focus after escape-key close
+  - a11y markup
+  - adapt tests
+
+- 2.0.2-beta
+  - version info
+
+- 2.0.3-beta
+  - focus wrap for tab key