Merge pull request #68 from SaekiTominaga/footnote-reference-popover/…

…popover [footnote-reference-popover] Changed from `<dialog>` to Popover API
SaekiTominaga · Apr 25, 2024 · fcc1b5a · fcc1b5a
2 parents a334754 + a209bea
commit fcc1b5a
Show file tree

Hide file tree

Showing 8 changed files with 217 additions and 217 deletions.
diff --git a/packages/footnote-reference-popover/README.md b/packages/footnote-reference-popover/README.md
@@ -63,9 +63,9 @@
 <dt><code>href</code> [required]</dt>
 <dd>URL hash value of the element that contains the content to be displayed in the popover. (e.g. <code>#footnote-1</code> )</dd>
 <dt><code>data-popover-label</code> [optional]</dt>
-<dd>Label to be set on popover (<code>aria-label</code> attribute value). It is not required, but should be set as much as possible. In WAI-ARIA 1.2, accessible name is required for <a href="https://www.w3.org/TR/wai-aria-1.2/#dialog"><code>dialog</code> role</a>.</dd>
+<dd>Label to be set on popover (<code>aria-label</code> attribute value).</dd>
 <dt><code>data-popover-class</code> [optional]</dt>
-<dd>Set the class name (<code>class</code> attribute value) on the <code>&lt;dialog&gt;</code> element of the popover. It is mainly used to customize the appearance with CSS.</dd>
+<dd>Set the class name (<code>class</code> attribute value) on the popover element. It is mainly used to customize the appearance with CSS.</dd>
 <dt><code>data-popover-hide-text</code> [optional]</dt>
 <dd>The text of the close button in the popover. If omitted, the default value is 'Close'.</dd>
 <dt><code>data-popover-hide-image-src</code> [optional]</dt>
@@ -87,30 +87,30 @@ The popover markup looks like this.
 ```html
 <a class="js-footnote-reference-popover" href="#footnote" data-popover-class="my-popover">[1]</a>
 
-<x-popover class="my-popover">
+<x-popover popover="" class="my-popover">
   #shadow-root (open)
-  <span id="first-focusable" tabindex="0"></span>
+    <span id="first-focusable" tabindex="0"></span>
 
-  <dialog part="popover" autofocus="">
-    <slot>...</slot>
+    <div tabindex="-1" part="content">
+      <slot>...</slot>
 
-    <form method="dialog">
-      <button part="hide-button">Close</button>
-    </form>
-  </dialog>
+      <button type="button" popovertarget="" popovertargetaction="hide" part="hide-button">Close</button>
+    </div>
 
-  <span id="last-focusable" tabindex="0"></span>
+    <span id="last-focusable" tabindex="0"></span>
 </x-popover>
 ```
 
 Therefore, you can customize the style using [`::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) CSS pseudo-element.
 
 ```css
-.my-popover::part(popover) {
-  ...
-}
+.my-popover::part(content) {
+  &::part(content) {
+    ...
+  }
 
-.my-popover::part(hide-button) {
-  ...
+  &::part(hide-button) {
+    ...
+  }
 }
 ```
diff --git a/packages/footnote-reference-popover/__tests__/CustomElementPopover.test.js b/packages/footnote-reference-popover/__tests__/CustomElementPopover.test.js
@@ -4,10 +4,9 @@ import CustomElementPopover from '../dist/CustomElementPopover.js';
 customElements.define('x-popover', CustomElementPopover);
 
 beforeAll(() => {
-	HTMLDialogElement.prototype.close = jest.fn();
-	HTMLDialogElement.prototype.show = jest.fn();
-	HTMLDialogElement.prototype.showModal = jest.fn();
-}); // `jsdom` が `<dialog>` 要素をサポートするまでの暫定処理 https://github.com/jsdom/jsdom/issues/3294
+	CustomElementPopover.prototype.showPopover = jest.fn();
+	CustomElementPopover.prototype.hidePopover = jest.fn();
+}); // `jsdom` が Popover をサポートするまでの暫定処理 https://github.com/jsdom/jsdom/issues/3294
 
 describe('connected & disconnected', () => {
 	beforeAll(() => {
@@ -18,7 +17,7 @@ describe('connected & disconnected', () => {
 	});
 
 	test('connected', () => {
-		expect(document.body.innerHTML).toBe('<x-popover hidden="">text</x-popover>');
+		expect(document.body.innerHTML).toBe('<x-popover>text</x-popover>');
 	});
 
 	test('disconnected', () => {
@@ -79,7 +78,7 @@ describe('slot', () => {
 	test('id remove', () => {
 		document.body.insertAdjacentHTML('beforeend', '<x-popover><span id="ID">text</span></x-popover>');
 
-		expect(document.body.innerHTML).toBe('<x-popover hidden=""><span>text</span></x-popover>');
+		expect(document.body.innerHTML).toBe('<x-popover><span>text</span></x-popover>');
 	});
 });
 
@@ -114,7 +113,7 @@ describe('toggle event', () => {
 			}),
 		);
 
-		expect(document.body.innerHTML).toBe('<x-popover hidden="">text</x-popover>');
+		expect(document.body.innerHTML).toBe('<x-popover>text</x-popover>');
 	});
 });
 
@@ -143,6 +142,6 @@ describe('keydown event', () => {
 	test('Escape', () => {
 		document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
 
-		expect(document.body.innerHTML).toBe('<x-popover hidden="">text</x-popover>');
+		expect(document.body.innerHTML).toBe('<x-popover>text</x-popover>');
 	});
 });
diff --git a/packages/footnote-reference-popover/__tests__/FootnoteReferencePopover.test.js b/packages/footnote-reference-popover/__tests__/FootnoteReferencePopover.test.js
@@ -1,4 +1,5 @@
 import { describe, beforeAll, afterAll, afterEach, test, expect, jest } from '@jest/globals';
+import CustomElementPopover from '../dist/CustomElementPopover.js';
 import FootnoteReferencePopover from '../dist/FootnoteReferencePopover.js';
 
 const sleep = (ms) =>
@@ -7,9 +8,8 @@ const sleep = (ms) =>
 	});
 
 beforeAll(() => {
-	HTMLDialogElement.prototype.close = jest.fn();
-	HTMLDialogElement.prototype.show = jest.fn();
-	HTMLDialogElement.prototype.showModal = jest.fn();
+	CustomElementPopover.prototype.showPopover = jest.fn();
+	CustomElementPopover.prototype.hidePopover = jest.fn();
 }); // `jsdom` が `<dialog>` 要素をサポートするまでの暫定処理 https://github.com/jsdom/jsdom/issues/3294
 
 describe('HTML', () => {
@@ -253,7 +253,7 @@ describe('trigger mouse event', () => {
 		expect(document.body.innerHTML).toBe(`
 <a href="#footnote" class="js-footnote-reference-popover" role="button"></a>
 <p id="footnote"></p>
-<x-popover style="width: 0px; top: 0px; left: 0px;" hidden=""></x-popover>`);
+<x-popover style="width: 0px; top: 0px; left: 0px;"></x-popover>`);
 	});
 });
 
@@ -312,7 +312,7 @@ describe('popover mouse event', () => {
 		expect(document.body.innerHTML).toBe(`
 <a href="#footnote" class="js-footnote-reference-popover" role="button"></a>
 <p id="footnote"></p>
-<x-popover style="width: 0px; top: 0px; left: 0px;" hidden=""></x-popover>`);
+<x-popover style="width: 0px; top: 0px; left: 0px;"></x-popover>`);
 	});
 });
 

diff --git a/packages/footnote-reference-popover/demo/index.html b/packages/footnote-reference-popover/demo/index.html
@@ -10,39 +10,41 @@
 				padding-block-start: 1em;
 			}
 
-			.my-popover::part(popover) {
+			.my-popover {
 				--popover-hide-button-image-size: 18px;
 				--popover-hide-button-padding: 10px;
 
-				border: 1px solid #666;
-				border-radius: 0.25em;
-				box-shadow: 0 0 5px #ccc;
-				background: #fff;
-				padding: 10px;
-				max-inline-size: min(20em, 100%);
-				color: #000;
-			}
+				&::part(content) {
+					border: 1px solid #666;
+					border-radius: 0.25em;
+					box-shadow: 0 0 5px #ccc;
+					background: #fff;
+					padding: 10px;
+					max-inline-size: min(20em, 100%);
+					color: #000;
+				}
 
-			.my-popover::part(popover)::before {
-				display: block flow;
-				float: inline-end;
-				block-size: calc(var(--popover-hide-button-image-size) + var(--popover-hide-button-padding) * 2);
-				inline-size: calc(var(--popover-hide-button-image-size) + var(--popover-hide-button-padding) * 2);
-				content: '';
-			}
+				&::part(content)::before {
+					display: block flow;
+					float: inline-end;
+					block-size: calc(var(--popover-hide-button-image-size) + var(--popover-hide-button-padding) * 2);
+					inline-size: calc(var(--popover-hide-button-image-size) + var(--popover-hide-button-padding) * 2);
+					content: '';
+				}
 
-			.my-popover::part(hide-button) {
-				position: absolute;
-				inset-block-start: 0;
-				inset-inline-end: 0;
-				border: none;
-				border-radius: 0.25em;
-				background: transparent;
-				padding: var(--popover-hide-button-padding);
-			}
+				&::part(hide-button) {
+					position: absolute;
+					inset-block-start: 1px;
+					inset-inline-end: 1px;
+					border: none;
+					border-radius: 0.25em;
+					background: transparent;
+					padding: var(--popover-hide-button-padding);
+				}
 
-			.my-popover::part(hide-button):hover {
-				background-color: #eee;
+				&::part(hide-button):hover {
+					background-color: #eee;
+				}
 			}
 		</style>
 		<script type="importmap">
@@ -74,7 +76,7 @@ <h2>Required attributes only</h2>
 		</section>
 
 		<section>
-			<h2>All attributes</h2>
+			<h2>All attributes &amp; Style customization</h2>
 
 			<pre><code>&lt;a
   class="js-footnote-reference-popover"

diff --git a/packages/footnote-reference-popover/dist/CustomElementPopover.js b/packages/footnote-reference-popover/dist/CustomElementPopover.js