making L2 keyboard focusable

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"
+}

packages/c2pa-wc/src/components/L2/L2.ts

@@ -0,0 +1,74 @@
+/**
+ * Copyright 2023 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 { L2ManifestStore } from 'c2pa';
+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
+   */
+  static get styles() {
+    return [
+      defaultStyles,
+      css`
+        .popover {
+          position: absolute;
+          top: 10px;
+          right: 10px;
+        }
+      `,
+    ];
+  }
+
+  manifestStore: L2ManifestStore | undefined;
+
+  viewMoreURL: string | undefined;
+
+  render() {
+    if (!this.manifestStore) {
+      return null;
+    }
+    console.log('this.manifeststore', this.manifestStore);
+    return html`
+      <cai-popover
+        class="popover"
+        interactive
+        class="theme-spectrum"
+        placement="left-start"
+        tab
+      >
+        <button slot="trigger"><cai-indicator></cai-indicator></button>
+        <cai-manifest-summary
+          tabindex="0"
+          .manifestStore=${this.manifestStore}
+          .viewMoreUrl=${this.viewMoreURL}
+          slot="content"
+        >
+        </cai-manifest-summary>
+      </cai-popover>
+    `;
+  }
+}

packages/c2pa-wc/src/components/L2/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright 2023 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';

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}

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">
+
+      <div id="trigger" ${this.tab && `tabindex="0"`}>
         <div class="hidden-layer"></div>
         <slot name="trigger"></slot>
       </div>

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';