From a90aa06a7aab2df8afd86a14151b3118bdf87c4f Mon Sep 17 00:00:00 2001
From: Scott O'Hara <scottaohara@users.noreply.github.com>
Date: Mon, 15 Apr 2024 10:42:34 -0400
Subject: [PATCH 1/2] Addition: popovertarget guidance

Closes #513

the `aria-expanded` state is implicit when using the `popovertarget` attribute - and authors are not to use the ARIA attribute with this native HTML attribute.
---
 index.html | 57 +++++++++++++++++++++---------------------------------
 1 file changed, 22 insertions(+), 35 deletions(-)

diff --git a/index.html b/index.html
index 27ba149..43f2719 100644
--- a/index.html
+++ b/index.html
@@ -64,6 +64,10 @@
         the following substantive additions and/or corrections have been proposed:
       </p>
       <ul>
+        <!--<li>
+          <a href="https://github.com/w3c/html-aria/pull/...">15 April 2024 - Addition:</a>
+          Add author rules for the <a href="#att-popovertarget">`popovertarget`</a> attribute.
+        </li>-->
         <li>
           <a href="https://github.com/w3c/html-aria/pull/489">4 October 2023 - Addition:</a>
           Update the button element and input type=button,image,reset,submit elements to allow the `separator` role.
@@ -3618,10 +3622,6 @@ <h3 id="docconformance-attr">
               </td>
               <td>
                 <div class="correction">
-                  <p>
-                    Use the `checked` attribute on any element that is allowed the `checked` attribute in HTML. 
-                    Use the <a data-cite="html/input.html#dom-input-indeterminate">`indeterminate`</a> IDL attribute to indicate the "mixed" state for <a data-cite="html/input.html#checkbox-state-(type=checkbox)">`input type=checkbox`</a> elements.
-                  </p>
                   <p>
                     Authors MUST NOT use the <a data-cite="wai-aria-1.2#aria-checked">`aria-checked`</a> attribute on any element where the <a data-cite="html/form-control-infrastructure.html#concept-fe-checked">checkedness</a>, or the 
                     indeterminate checked value of the element can be in opposition to the current value of the `aria-checked` attribute.
@@ -3643,9 +3643,6 @@ <h3 id="docconformance-attr">
                 `aria-disabled="true"`
               </td>
               <td>
-                <p>
-                  Use the `disabled` attribute on any element that is allowed the `disabled` attribute in HTML.
-                </p>
                 <p>
                   Authors MAY use the <a data-cite="wai-aria-1.2#aria-disabled">`aria-disabled`</a> attribute on any element that is allowed the `disabled` attribute in HTML, or any element with a WAI-ARIA role which allows the `aria-disabled` attribute</a>.
                 </p>
@@ -3689,10 +3686,6 @@ <h3 id="docconformance-attr">
                 `aria-placeholder="..."`
               </td>
               <td>
-                <p>
-                  Use the `placeholder` attribute on any element that is allowed the
-                  `placeholder` attribute in HTML.
-                </p>
                 <p>
                   Authors MAY use the <a data-cite="wai-aria-1.2#aria-placeholder">`aria-placeholder`</a> attribute on any element that is allowed the `placeholder` attribute in HTML, or any element with a WAI-ARIA role which allows the `aria-placeholder` attribute.
                 </p>
@@ -3701,6 +3694,24 @@ <h3 id="docconformance-attr">
                 </p>
               </td>
             </tr>
+          <tr id="att-popovertarget" tabindex="-1">
+              <th>
+                Any element where the <a data-cite="html/popover.html#the-popover-target-attributes">`popovertarget`</a> attribute is allowed: 
+                [^button^], 
+                <a data-cite="html/input.html#button-state-(type=button)">`input type=button`</a>,
+                <a data-cite="html/input.html#button-state-(type=image)">`input type=image`</a>,
+                <a data-cite="html/input.html#reset-button-state-(type=reset)">`input type=reset`</a>
+                <a data-cite="html/input.html#submit-button-state-(type=submit)">`input type=submit`</a>
+              </th>
+              <td>
+                `aria-expanded="..."`
+              </td>
+              <td>
+                <p class="addition">
+                  Authors MUST NOT use the `aria-expanded` attribute on any element which also has a `popovertarget` attribute.
+                </p>
+              </td>
+            </tr>
             <tr id="att-max" tabindex="-1">
               <th>
                 Any element where the `max` attribute is allowed: `meter` [^meter/max^], `progress` [^progress/max^], and `input` [^input/max^]
@@ -3709,10 +3720,6 @@ <h3 id="docconformance-attr">
                 `aria-valuemax="..."`
               </td>
               <td>
-                <p>
-                  Use the `max` attribute on any element that is
-                  allowed the `max` attribute in HTML.
-                </p>
                 <p>
                   Authors MAY use the <a data-cite="wai-aria-1.2#aria-valuemax">`aria-valuemax`</a> attribute on any other element with a WAI-ARIA role which allows the `aria-valuemax` attribute.
                 </p>
@@ -3732,10 +3739,6 @@ <h3 id="docconformance-attr">
                 `aria-valuemin="..."`
               </td>
               <td>
-                <p>
-                  Use the `min` attribute on any element that is
-                  allowed the `min` attribute in HTML.
-                </p>
                 <p>
                   Authors MAY use the <a data-cite="wai-aria-1.2#aria-valuemax">`aria-valuemin`</a> attribute on any other element with a WAI-ARIA role which allows the `aria-valuemin` attribute.
                 </p>
@@ -3756,10 +3759,6 @@ <h3 id="docconformance-attr">
                 `aria-readonly="true"`
               </td>
               <td>
-                <p>
-                  Use the `readonly` attribute on any element that is
-                  allowed the `readonly` attribute in HTML.
-                </p>
                 <p>
                   Authors MAY use the <a data-cite="wai-aria-1.2#aria-readonly">`aria-readonly`</a> attribute on any element with a WAI-ARIA role which allows the attribute</a>.
                 </p>
@@ -3801,10 +3800,6 @@ <h3 id="docconformance-attr">
                 `aria-required="true"`
               </td>
               <td>
-                <p>
-                  Use the `required` attribute on any element
-                  that is allowed the `required` attribute in HTML.
-                </p>
                 <p>
                   Authors MAY use the <a data-cite="wai-aria-1.2#aria-required">`aria-required`</a> attribute on any element that is allowed the `required` attribute in HTML, or any element with a WAI-ARIA role which allows the `aria-required` attribute.
                 </p>
@@ -3824,10 +3819,6 @@ <h3 id="docconformance-attr">
                 `aria-colspan="..."`
               </td>
               <td>
-                <p>
-                  Use the `colspan` attribute on any element that is
-                  allowed the `colspan` attribute in HTML.
-                </p>
                 <!--
                   Removing per issue #338
                   Revised rules to be re-added
@@ -3852,10 +3843,6 @@ <h3 id="docconformance-attr">
                 `aria-rowspan="..."`
               </td>
               <td>
-                <p>
-                  Use the `rowspan` attribute on any element that is
-                  allowed the `rowspan` attribute in HTML.
-                </p>
                 <!--
                   Removing per issue #338
                   Revised rules to be re-added

From 5cb48c96be816a7a828c6339294ee8b6c1f43043 Mon Sep 17 00:00:00 2001
From: Scott O'Hara <scottaohara@users.noreply.github.com>
Date: Mon, 15 Apr 2024 11:46:14 -0400
Subject: [PATCH 2/2] Create popovertarget.html

adds test case for popovertarget author guidance
---
 tests/popovertarget.html | 99 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 tests/popovertarget.html

diff --git a/tests/popovertarget.html b/tests/popovertarget.html
new file mode 100644
index 0000000..e68f269
--- /dev/null
+++ b/tests/popovertarget.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+	<meta charset="UTF-8">
+	<title>ARIA in HTML - Test Cases</title>
+    <link rel="stylesheet" href="../results/styles.css">
+	<style>
+		body{
+			font-size: 1em;
+		}
+		.roleTest {
+			border: 2px solid black;
+			width: 1em;
+			height: 1em;
+			margin: 5px;
+		}
+		.flex {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: stretch;
+		}
+		.widgetDemo {
+			border: 1px solid #EEE;
+			margin: .5em;
+			padding: 5px;
+			flex: 1 0 0;
+			min-width: calc(300px - 1em);
+		}
+		.widgetDemo p {
+			color: #696969;
+			font-size: 1.125em;
+			padding: 0;
+			margin: .75em 0;
+		}
+		.testcase {
+			margin: 2em 0;
+		}
+		h3{
+			margin: .5em 0;
+			border: 0;
+			padding: 0;
+		}
+		h2 {font-size:2em}
+	</style>
+</head>
+<body>
+
+	<header>
+	<h1>ARIA in HTML - test cases for <code>popovertarget</code> and <code>aria-expanded</code></h1>
+	<p>last updated 15 April 2024</p>
+	<p>
+		<a href="https://html.spec.whatwg.org/multipage/popover.html#the-popover-target-attributes"><code>popovertarget</code></a> is allowed on 
+    <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-button"><code>button</code> elements</a>.
+	</p>
+	</header>
+	<main>
+		<h2>Tests:</h2>
+
+		<div class="flex">
+			<div class="widgetDemo">
+				<h3>Test 1</h3>
+				<p>
+          Authors MUST NOT use the <code>aria-expanded</code> attribute on any element which also has a <code>popovertarget</code> attribute.</p>
+
+				<div class="testcase">
+					<button popovertarget=f aria-expanded="false">test 1</button>
+          <div id=f popover>test 1 popover</div>
+				</div>
+
+				<p><strong>Expected result:</strong>
+				<br> error for inappropriate use of <code>aria-expanded</code> when element has <code>popovertarget</code> 
+          attribute which implicitly handles <code>aria-expanded</code> states.</p>
+			</div>
+
+			<div class="widgetDemo">
+				<h3>Test 2</h3>
+				<p>
+          Authors MUST NOT use the <code>aria-expanded</code> attribute on any element which will have a <code>popovertarget</code> attribute
+          set due to adding it via the <code>popoverTargetElement</code> IDL attribute.</p>
+
+				<p>The first <code>th</code> and <code>td</code> each have an <code>aria-colspan="1"</code> and <code>colspan="1"</code> attribute</p>
+
+				<div class="testcase">
+					<button aria-expanded=false id=t2>test 2</button>
+          <div id=g popover>test 2 popover</div>
+          <script>
+            const b = document.getElementById('t2');
+            const p = document.getElementById('g');
+            b.popoverTargetElement = p;
+          </script>
+				</div>
+
+				<p><strong>Expected result:</strong>
+				<br> error for inappropriate use of <code>aria-expanded</code> when element has <code>popovertarget</code> 
+          attribute which implicitly handles <code>aria-expanded</code> states.</p>
+			</div>
+		</div>
+	</main>
+</body>
+</html>