chore: do not disable fieldset legend (#35063)

This commit is contained in:
Pavel Feldman 2025-03-06 11:46:53 -08:00 committed by GitHub
parent ad0581fafb
commit a52ad0743e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 47 additions and 6 deletions

View File

@ -1005,13 +1005,12 @@ function isNativelyDisabled(element: Element) {
return isNativeFormControl && (element.hasAttribute('disabled') || belongsToDisabledFieldSet(element));
}
function belongsToDisabledFieldSet(element: Element | null): boolean {
if (!element)
function belongsToDisabledFieldSet(element: Element): boolean {
const fieldSetElement = element?.closest('FIELDSET[DISABLED]');
if (!fieldSetElement)
return false;
if (elementSafeTagName(element) === 'FIELDSET' && element.hasAttribute('disabled'))
return true;
// fieldset does not work across shadow boundaries.
return belongsToDisabledFieldSet(element.parentElement);
const legendElement = fieldSetElement.querySelector(':scope > LEGEND');
return !legendElement || !legendElement.contains(element);
}
function hasExplicitAriaDisabled(element: Element | undefined): boolean {

View File

@ -243,6 +243,48 @@ test('should support disabled', async ({ page }) => {
]);
});
test('should support disabled fieldset', async ({ page }) => {
await page.setContent(`
<fieldset disabled>
<input></input>
<button data-testid="inside-fieldset-element">x</button>
<legend>
<button data-testid="inside-legend-element">legend</button>
</legend>
</fieldset>
<fieldset disabled>
<legend>
<div>
<button data-testid="nested-inside-legend-element">x</button>
</div>
</legend>
</fieldset>
<fieldset disabled>
<div></div>
<legend>
<button data-testid="first-legend-element">x</button>
</legend>
<legend>
<button data-testid="second-legend-element">x</button>
</legend>
</fieldset>
<fieldset disabled>
<fieldset>
<button data-testid="deep-button">x</button>
</fieldset>
</fieldset>
`);
await expect.soft(page.getByTestId('inside-legend-element')).toBeEnabled();
await expect.soft(page.getByTestId('nested-inside-legend-element')).toBeEnabled();
await expect.soft(page.getByTestId('first-legend-element')).toBeEnabled();
await expect.soft(page.getByTestId('second-legend-element')).toBeDisabled();
await expect.soft(page.getByTestId('deep-button')).toBeDisabled();
});
test('should support level', async ({ page }) => {
await page.setContent(`
<h1>Hello</h1>