From bd1ba18f9883e6fe7c80b3eb0e112c51e4524427 Mon Sep 17 00:00:00 2001
From: Massy Mahamli <mmahamli@adobe.com>
Date: Tue, 14 Feb 2023 11:38:29 -0500
Subject: [PATCH 1/7] making L2 keyboard focusable

---
 packages/c2pa-wc/src/components/Popover/Popover.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/c2pa-wc/src/components/Popover/Popover.ts b/packages/c2pa-wc/src/components/Popover/Popover.ts
index 0eeab352..08913f70 100644
--- a/packages/c2pa-wc/src/components/Popover/Popover.ts
+++ b/packages/c2pa-wc/src/components/Popover/Popover.ts
@@ -356,7 +356,7 @@ export class Popover extends LitElement {
         <slot name="content"></slot>
         ${this.arrow ? html`<div id="arrow"></div>` : null}
       </div>
-      <div id="trigger">
+      <div id="trigger" tabindex="0">
         <div class="hidden-layer"></div>
         <slot name="trigger"></slot>
       </div>

From f718190f2ee6bcdae27970926a9ea505b541a9c6 Mon Sep 17 00:00:00 2001
From: Massy Mahamli <mmahamli@adobe.com>
Date: Tue, 14 Feb 2023 11:42:52 -0500
Subject: [PATCH 2/7] change log

---
 common/changes/c2pa-wc/CAI-3405_2023-02-14-16-41.json | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 common/changes/c2pa-wc/CAI-3405_2023-02-14-16-41.json

diff --git a/common/changes/c2pa-wc/CAI-3405_2023-02-14-16-41.json b/common/changes/c2pa-wc/CAI-3405_2023-02-14-16-41.json
new file mode 100644
index 00000000..74734024
--- /dev/null
+++ b/common/changes/c2pa-wc/CAI-3405_2023-02-14-16-41.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "c2pa-wc",
+      "comment": "making L2 keyboard focusable",
+      "type": "patch"
+    }
+  ],
+  "packageName": "c2pa-wc"
+}
\ No newline at end of file

From fd01cc56dcbde1b2f09ea59232737ab2a46239bd Mon Sep 17 00:00:00 2001
From: Massy Mahamli <mmahamli@adobe.com>
Date: Sat, 4 Mar 2023 11:41:29 -0500
Subject: [PATCH 3/7] popover

---
 packages/c2pa-wc/src/components/L2/L2.ts      | 67 +++++++++++++++++++
 packages/c2pa-wc/src/components/L2/index.ts   | 10 +++
 .../c2pa-wc/src/components/Popover/Popover.ts |  2 +-
 packages/c2pa-wc/src/index.ts                 |  3 +-
 4 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 packages/c2pa-wc/src/components/L2/L2.ts
 create mode 100644 packages/c2pa-wc/src/components/L2/index.ts

diff --git a/packages/c2pa-wc/src/components/L2/L2.ts b/packages/c2pa-wc/src/components/L2/L2.ts
new file mode 100644
index 00000000..bbe1c942
--- /dev/null
+++ b/packages/c2pa-wc/src/components/L2/L2.ts
@@ -0,0 +1,67 @@
+/**
+ * Copyright 2022 Adobe
+ * All Rights Reserved.
+ *
+ * NOTICE: Adobe permits you to use, modify, and distribute this file in
+ * accordance with the terms of the Adobe license agreement accompanying
+ * it.
+ */
+
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '../../../assets/svg/color/info.svg';
+import { defaultStyles } from '../../styles';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cai-l2': L2;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'cai-l2': any;
+    }
+  }
+}
+
+@customElement('cai-l2')
+export class L2 extends LitElement {
+  /**
+   * Image source - if set to undefined/null it will show a broken image icon
+   */
+  @property({ type: String })
+  static get styles() {
+    return [
+      defaultStyles,
+      css`
+        :host {
+          display: inline-block;
+          width: var(--cai-indicator-size, 24px);
+          height: var(--cai-indicator-size, 24px);
+        }
+        .icon {
+          --cai-icon-width: var(--cai-indicator-size, 24px);
+          --cai-icon-height: var(--cai-indicator-size, 24px);
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html` <div class="wrapper">
+      <cai-popover
+        interactive
+        class="theme-spectrum"
+        placement="left-start"
+        style:z-index="{placement}"
+      >
+        <cai-indicator slot="trigger" />
+        <cai-manifest-summary
+          use:setManifest="{manifest}"
+          view-more-url="{viewMoreURL}"
+          slot="content"
+        />
+      </cai-popover>
+    </div>`;
+  }
+}
diff --git a/packages/c2pa-wc/src/components/L2/index.ts b/packages/c2pa-wc/src/components/L2/index.ts
new file mode 100644
index 00000000..956be46e
--- /dev/null
+++ b/packages/c2pa-wc/src/components/L2/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright 2022 Adobe
+ * All Rights Reserved.
+ *
+ * NOTICE: Adobe permits you to use, modify, and distribute this file in
+ * accordance with the terms of the Adobe license agreement accompanying
+ * it.
+ */
+
+export * from './L2';
diff --git a/packages/c2pa-wc/src/components/Popover/Popover.ts b/packages/c2pa-wc/src/components/Popover/Popover.ts
index 08913f70..0eeab352 100644
--- a/packages/c2pa-wc/src/components/Popover/Popover.ts
+++ b/packages/c2pa-wc/src/components/Popover/Popover.ts
@@ -356,7 +356,7 @@ export class Popover extends LitElement {
         <slot name="content"></slot>
         ${this.arrow ? html`<div id="arrow"></div>` : null}
       </div>
-      <div id="trigger" tabindex="0">
+      <div id="trigger">
         <div class="hidden-layer"></div>
         <slot name="trigger"></slot>
       </div>
diff --git a/packages/c2pa-wc/src/index.ts b/packages/c2pa-wc/src/index.ts
index 9b748e49..a8d4550e 100644
--- a/packages/c2pa-wc/src/index.ts
+++ b/packages/c2pa-wc/src/index.ts
@@ -7,11 +7,11 @@
  * it.
  */
 
-export * as utils from './utils';
 export * from './components/AssetsUsed';
 export * from './components/EditsAndActivity';
 export * from './components/Icon';
 export * from './components/Indicator';
+export * from './components/L2';
 export * from './components/ManifestSummary';
 export * from './components/MinimumViableProvenance';
 export * from './components/PanelSection';
@@ -21,3 +21,4 @@ export * from './components/ProducedWith';
 export * from './components/SocialMedia';
 export * from './components/Thumbnail';
 export * from './components/Tooltip';
+export * as utils from './utils';

From d340b670e388ee5870a6508a2374da3f3d62e6ec Mon Sep 17 00:00:00 2001
From: Massy Mahamli <mmahamli@adobe.com>
Date: Wed, 8 Mar 2023 11:30:36 -0500
Subject: [PATCH 4/7] create l2 component

---
 packages/c2pa-wc/src/components/L2/L2.ts | 26 ++++++++++++++----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/c2pa-wc/src/components/L2/L2.ts b/packages/c2pa-wc/src/components/L2/L2.ts
index bbe1c942..ce60e5c2 100644
--- a/packages/c2pa-wc/src/components/L2/L2.ts
+++ b/packages/c2pa-wc/src/components/L2/L2.ts
@@ -7,6 +7,7 @@
  * it.
  */
 
+import { L2ManifestStore } from 'c2pa';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import '../../../assets/svg/color/info.svg';
@@ -34,31 +35,34 @@ export class L2 extends LitElement {
     return [
       defaultStyles,
       css`
-        :host {
-          display: inline-block;
-          width: var(--cai-indicator-size, 24px);
-          height: var(--cai-indicator-size, 24px);
-        }
-        .icon {
-          --cai-icon-width: var(--cai-indicator-size, 24px);
-          --cai-icon-height: var(--cai-indicator-size, 24px);
+        #popover {
+          position: absolute;
+          top: 10px;
+          right: 10px;
         }
       `,
     ];
   }
 
+  manifestStore: L2ManifestStore | undefined;
+
+  viewMoreURL: string | undefined;
+
   render() {
+    if (!this.manifestStore) {
+      return null;
+    }
     return html` <div class="wrapper">
       <cai-popover
+        id="popover"
         interactive
         class="theme-spectrum"
         placement="left-start"
-        style:z-index="{placement}"
       >
         <cai-indicator slot="trigger" />
         <cai-manifest-summary
-          use:setManifest="{manifest}"
-          view-more-url="{viewMoreURL}"
+          .manifestStore=${this.manifestStore}
+          .viewMoreUrl=${this.viewMoreURL}
           slot="content"
         />
       </cai-popover>

From 745764eaecd56523442b57842c3777d499ceabf7 Mon Sep 17 00:00:00 2001
From: Massy Mahamli <mmahamli@adobe.com>
Date: Thu, 9 Mar 2023 16:53:25 -0500
Subject: [PATCH 5/7] changes

---
 packages/c2pa-wc/src/components/L2/L2.ts    | 32 ++++++++++-----------
 packages/c2pa-wc/src/components/L2/index.ts |  2 +-
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/c2pa-wc/src/components/L2/L2.ts b/packages/c2pa-wc/src/components/L2/L2.ts
index ce60e5c2..37a0f2a6 100644
--- a/packages/c2pa-wc/src/components/L2/L2.ts
+++ b/packages/c2pa-wc/src/components/L2/L2.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright 2022 Adobe
+ * Copyright 2023 Adobe
  * All Rights Reserved.
  *
  * NOTICE: Adobe permits you to use, modify, and distribute this file in
@@ -31,19 +31,18 @@ export class L2 extends LitElement {
    * Image source - if set to undefined/null it will show a broken image icon
    */
   @property({ type: String })
-  static get styles() {
-    return [
-      defaultStyles,
-      css`
-        #popover {
-          position: absolute;
-          top: 10px;
-          right: 10px;
-        }
-      `,
-    ];
-  }
-
+  // static get styles() {
+  //   return [
+  //     defaultStyles,
+  //     css`
+  //       // #popover {
+  //       //   position: absolute;
+  //       //   top: 10px;
+  //       //   right: 10px;
+  //       // }
+  //     `,
+  //   ];
+  // }
   manifestStore: L2ManifestStore | undefined;
 
   viewMoreURL: string | undefined;
@@ -52,7 +51,8 @@ export class L2 extends LitElement {
     if (!this.manifestStore) {
       return null;
     }
-    return html` <div class="wrapper">
+
+    return html`
       <cai-popover
         id="popover"
         interactive
@@ -66,6 +66,6 @@ export class L2 extends LitElement {
           slot="content"
         />
       </cai-popover>
-    </div>`;
+    `;
   }
 }
diff --git a/packages/c2pa-wc/src/components/L2/index.ts b/packages/c2pa-wc/src/components/L2/index.ts
index 956be46e..9c80f73f 100644
--- a/packages/c2pa-wc/src/components/L2/index.ts
+++ b/packages/c2pa-wc/src/components/L2/index.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright 2022 Adobe
+ * Copyright 2023 Adobe
  * All Rights Reserved.
  *
  * NOTICE: Adobe permits you to use, modify, and distribute this file in

From 5f526093ee656255afb1570bf0b966cbdd5e25f0 Mon Sep 17 00:00:00 2001
From: Massy Mahamli <mmahamli@adobe.com>
Date: Mon, 10 Apr 2023 09:46:16 -0400
Subject: [PATCH 6/7] finished adding L2

---
 packages/c2pa-wc/src/components/L2/L2.ts      | 36 ++++++++++---------
 .../c2pa-wc/src/components/Popover/Popover.ts |  2 +-
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/c2pa-wc/src/components/L2/L2.ts b/packages/c2pa-wc/src/components/L2/L2.ts
index 37a0f2a6..90726ee1 100644
--- a/packages/c2pa-wc/src/components/L2/L2.ts
+++ b/packages/c2pa-wc/src/components/L2/L2.ts
@@ -30,19 +30,19 @@ export class L2 extends LitElement {
   /**
    * Image source - if set to undefined/null it will show a broken image icon
    */
-  @property({ type: String })
-  // static get styles() {
-  //   return [
-  //     defaultStyles,
-  //     css`
-  //       // #popover {
-  //       //   position: absolute;
-  //       //   top: 10px;
-  //       //   right: 10px;
-  //       // }
-  //     `,
-  //   ];
-  // }
+  static get styles() {
+    return [
+      defaultStyles,
+      css`
+        .popover {
+          position: absolute;
+          top: 10px;
+          right: 10px;
+        }
+      `,
+    ];
+  }
+
   manifestStore: L2ManifestStore | undefined;
 
   viewMoreURL: string | undefined;
@@ -51,20 +51,22 @@ export class L2 extends LitElement {
     if (!this.manifestStore) {
       return null;
     }
-
+    console.log('this.manifeststore', this.manifestStore);
     return html`
       <cai-popover
-        id="popover"
+        class="popover"
         interactive
         class="theme-spectrum"
         placement="left-start"
       >
-        <cai-indicator slot="trigger" />
+        <cai-indicator slot="trigger"></cai-indicator>
         <cai-manifest-summary
+          tabindex="0"
           .manifestStore=${this.manifestStore}
           .viewMoreUrl=${this.viewMoreURL}
           slot="content"
-        />
+        >
+        </cai-manifest-summary>
       </cai-popover>
     `;
   }
diff --git a/packages/c2pa-wc/src/components/Popover/Popover.ts b/packages/c2pa-wc/src/components/Popover/Popover.ts
index 0eeab352..08913f70 100644
--- a/packages/c2pa-wc/src/components/Popover/Popover.ts
+++ b/packages/c2pa-wc/src/components/Popover/Popover.ts
@@ -356,7 +356,7 @@ export class Popover extends LitElement {
         <slot name="content"></slot>
         ${this.arrow ? html`<div id="arrow"></div>` : null}
       </div>
-      <div id="trigger">
+      <div id="trigger" tabindex="0">
         <div class="hidden-layer"></div>
         <slot name="trigger"></slot>
       </div>

From 7f3abadfcd24ba9d639e7500e9f49770989801f8 Mon Sep 17 00:00:00 2001
From: Massy Mahamli <mmahamli@adobe.com>
Date: Mon, 10 Apr 2023 15:25:17 -0400
Subject: [PATCH 7/7] finished l2 button work on indicator

---
 packages/c2pa-wc/src/components/L2/L2.ts             |  3 ++-
 .../components/ManifestSummary/ManifestSummary.ts    | 12 ++++++------
 packages/c2pa-wc/src/components/Popover/Popover.ts   |  7 ++++++-
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/c2pa-wc/src/components/L2/L2.ts b/packages/c2pa-wc/src/components/L2/L2.ts
index 90726ee1..c634a267 100644
--- a/packages/c2pa-wc/src/components/L2/L2.ts
+++ b/packages/c2pa-wc/src/components/L2/L2.ts
@@ -58,8 +58,9 @@ export class L2 extends LitElement {
         interactive
         class="theme-spectrum"
         placement="left-start"
+        tab
       >
-        <cai-indicator slot="trigger"></cai-indicator>
+        <button slot="trigger"><cai-indicator></cai-indicator></button>
         <cai-manifest-summary
           tabindex="0"
           .manifestStore=${this.manifestStore}
diff --git a/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts b/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts
index 345f3c9b..4c9c4b93 100644
--- a/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts
+++ b/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts
@@ -7,22 +7,22 @@
  * it.
  */
 
+import { L2ManifestStore } from 'c2pa';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { Configurable } from '../../mixins/configurable';
 import { defaultStyles } from '../../styles';
 import { defaultDateFormatter, hasChanged } from '../../utils';
-import { L2ManifestStore } from 'c2pa';
 import type { EditsAndActivityConfig } from '../EditsAndActivity';
 import type { MinimumViableProvenanceConfig } from '../MinimumViableProvenance';
-import { Configurable } from '../../mixins/configurable';
 import defaultStringMap from './ManifestSummary.str.json';
 
 import '../AssetsUsed';
+import '../EditsAndActivity';
+import '../MinimumViableProvenance';
 import '../ProducedBy';
 import '../ProducedWith';
 import '../SocialMedia';
-import '../EditsAndActivity';
-import '../MinimumViableProvenance';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -156,8 +156,8 @@ export class ManifestSummary extends Configurable(LitElement, defaultConfig) {
       return null;
     }
 
-    return html`<div id="container">
-      <div id="content-container">
+    return html`<div id="container" tabindex="0">
+      <div id="content-container" tabindex="0">
         <cai-minimum-viable-provenance
           .manifestStore=${this.manifestStore}
           .config=${this._config}
diff --git a/packages/c2pa-wc/src/components/Popover/Popover.ts b/packages/c2pa-wc/src/components/Popover/Popover.ts
index 08913f70..78b663c2 100644
--- a/packages/c2pa-wc/src/components/Popover/Popover.ts
+++ b/packages/c2pa-wc/src/components/Popover/Popover.ts
@@ -83,6 +83,9 @@ export class Popover extends LitElement {
   @property({ type: Boolean })
   interactive = false;
 
+  @property({ type: Boolean })
+  tab = false;
+
   @property({ type: String })
   trigger: string = 'mouseenter:mouseleave focus:blur';
 
@@ -327,6 +330,7 @@ export class Popover extends LitElement {
     const contentClassMap = {
       shown: this._isShown,
       interactive: this.interactive,
+      tab: this.tab,
     };
     const contentStyleMap = {
       'z-index': this.zIndex.toString(),
@@ -356,7 +360,8 @@ export class Popover extends LitElement {
         <slot name="content"></slot>
         ${this.arrow ? html`<div id="arrow"></div>` : null}
       </div>
-      <div id="trigger" tabindex="0">
+
+      <div id="trigger" ${this.tab && `tabindex="0"`}>
         <div class="hidden-layer"></div>
         <slot name="trigger"></slot>
       </div>