[html] WEB-75367 Missing documentation for tag attributes during code completion

(cherry picked from commit 61216c93d26869218483c6ad8c779d601020aecd)

IJ-CR-179966

GitOrigin-RevId: e7bb7e549addb19e723065656b20fac9042a3ced
This commit is contained in:
Piotr Tomiak
2025-10-27 18:54:08 +00:00
committed by intellij-monorepo-bot
parent cc613702a4
commit 48da1d2d85
5 changed files with 53 additions and 0 deletions
@@ -251,6 +251,8 @@ public class HtmlDocumentationProvider implements DocumentationProvider {
PsiElement prevSibling = context.getPrevSibling();
if (prevSibling instanceof XmlTag) {
return (XmlTag)prevSibling;
} else if (prevSibling instanceof XmlDocument) {
context = PsiTreeUtil.prevLeaf(context);
}
}
@@ -24,6 +24,8 @@ import com.intellij.testFramework.fixtures.BasePlatformTestCase;
import com.intellij.polySymbols.testFramework.WebTestUtil;
import org.jetbrains.annotations.NotNull;
import java.util.Collections;
public class HtmlDocumentationTest extends BasePlatformTestCase {
public void testQuickDocumentationHtml5Tag() {
doTest("""
@@ -141,6 +143,15 @@ public class HtmlDocumentationTest extends BasePlatformTestCase {
);
}
public void testAttributeQuickDocAtTheEndOfFile() {
myFixture.configureByText("attributeQuickDocAtTheEndOfFile.html", "<button popovert<caret>");
WebTestUtil.checkLookupItems(
myFixture, false, false, false, false, false,
false, true, false, Collections.emptyList(), Collections.emptyList(),
"attributeQuickDocAtTheEndOfFile", "", (item) -> true
);
}
public void testLookupDocWordCompletions() {
myFixture.configureByText("test.html", "<html lang='en'>la<caret>n");
PsiElement originalElement = myFixture.getFile().findElementAt(myFixture.getEditor().getCaretModel().getOffset());
@@ -0,0 +1,14 @@
<div class='definition'><pre>popovertarget</pre></div>
<div class='content'><details class='mdn-baseline'><summary>
<table class='mdn-baseline'><tr><td width=2 valign=top class='mdn-baseline-icon'><icon src='com.intellij.xml.psi.impl.icons.XmlPsiImplIcons.BaselineLow'></icon>
<td class='mdn-baseline-info'>Newly available across major browsers
</td></tr></table></summary>
<p><span class='grayed'>Chrome&nbsp;114, Chrome Android&nbsp;114, Edge&nbsp;114, Firefox&nbsp;125, Firefox Android&nbsp;125, Opera&nbsp;100, Safari&nbsp;17, Safari iOS&nbsp;17</span>
<p class='grayed'>Baseline since 2024
</details>
Turns a <code>&lt;button&gt;</code> element into a popover control button; takes the ID of the popover element to control as its value. Establishing a relationship between a popover and its invoker button using the <code>popovertarget</code> attribute has two additional useful effects:
<ul>
<li>The browser creates an implicit <a href="https://developer.mozilla.org/en-us/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-details"><code>aria-details</code></a> and <a href="https://developer.mozilla.org/en-us/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-expanded"><code>aria-expanded</code></a> relationship between popover and invoker, and places the popover in a logical position in the keyboard focus navigation order when shown. This makes the popover more accessible to keyboard and assistive technology (AT) users (see also <a href="https://developer.mozilla.org/en-us/docs/Web/API/Popover_API/Using#popover_accessibility_features">Popover accessibility features</a>).</li>
<li>The browser creates an implicit anchor reference between the two, making it very convenient to position popovers relative to their controls using <a href="https://developer.mozilla.org/en-us/docs/Web/CSS/CSS_anchor_positioning">CSS anchor positioning</a>. See <a href="https://developer.mozilla.org/en-us/docs/Web/API/Popover_API/Using#popover_anchor_positioning">Popover anchor positioning</a> for more details.</li>
</ul></div>
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/html/reference/elements/button#popovertarget/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
@@ -0,0 +1,24 @@
<div class='definition'><pre>popovertargetaction</pre></div>
<div class='content'><details class='mdn-baseline'><summary>
<table class='mdn-baseline'><tr><td width=2 valign=top class='mdn-baseline-icon'><icon src='com.intellij.xml.psi.impl.icons.XmlPsiImplIcons.BaselineLow'></icon>
<td class='mdn-baseline-info'>Newly available across major browsers
</td></tr></table></summary>
<p><span class='grayed'>Chrome&nbsp;114, Chrome Android&nbsp;114, Edge&nbsp;114, Firefox&nbsp;125, Firefox Android&nbsp;125, Opera&nbsp;100, Safari&nbsp;17, Safari iOS&nbsp;17</span>
<p class='grayed'>Baseline since 2024
</details>
Specifies the action to be performed on a popover element being controlled by a control <code>&lt;button&gt;</code>. Possible values are:
<dl>
<dt id="hide"><a href="https://developer.mozilla.org/en-us/docs/web/html/reference/elements/button#popovertargetaction#hide"><code>"hide"</code></a></dt>
<dd>
<p>The button will hide a shown popover. If you try to hide an already hidden popover, no action will be taken.
</dd>
<dt id="show"><a href="https://developer.mozilla.org/en-us/docs/web/html/reference/elements/button#popovertargetaction#show"><code>"show"</code></a></dt>
<dd>
<p>The button will show a hidden popover. If you try to show an already showing popover, no action will be taken.
</dd>
<dt id="toggle"><a href="https://developer.mozilla.org/en-us/docs/web/html/reference/elements/button#popovertargetaction#toggle"><code>"toggle"</code></a></dt>
<dd>
<p>The button will toggle a popover between showing and hidden. If the popover is hidden, it will be shown; if the popover is showing, it will be hidden. If <code>popovertargetaction</code> is omitted, <code>"toggle"</code> is the default action that will be performed by the control button.
</dd>
</dl></div>
<div class='content'>By <a href='https://developer.mozilla.org/en-us/docs/web/html/reference/elements/button#popovertargetaction/contributors.txt'>Mozilla Contributors</a>, <a href='https://creativecommons.org/licenses/by-sa/2.5/'>CC BY-SA 2.5</a></div>
@@ -0,0 +1,2 @@
popovertarget
popovertargetaction