fix(form): leave accessible role to native form
This commit is contained in:
parent
ce0630f32b
commit
1310bd491e
2 changed files with 25 additions and 5 deletions
|
|
@ -13,6 +13,9 @@ export class LionForm extends LionFieldset {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
}
|
}
|
||||||
this.__registerEventsForLionForm();
|
this.__registerEventsForLionForm();
|
||||||
|
|
||||||
|
// @override LionFieldset: makes sure a11y is handled by ._formNode
|
||||||
|
this.removeAttribute('role');
|
||||||
}
|
}
|
||||||
|
|
||||||
disconnectedCallback() {
|
disconnectedCallback() {
|
||||||
|
|
@ -34,11 +37,6 @@ export class LionForm extends LionFieldset {
|
||||||
this._formNode.reset();
|
this._formNode.reset();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* As we use a native form there is no need for a role
|
|
||||||
*/
|
|
||||||
_setRole() {} // eslint-disable-line class-methods-use-this
|
|
||||||
|
|
||||||
__registerEventsForLionForm() {
|
__registerEventsForLionForm() {
|
||||||
this._submit = ev => {
|
this._submit = ev => {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,10 @@ import {
|
||||||
} from '@open-wc/testing';
|
} from '@open-wc/testing';
|
||||||
import { spy } from 'sinon';
|
import { spy } from 'sinon';
|
||||||
import { LionField } from '@lion/field';
|
import { LionField } from '@lion/field';
|
||||||
|
import { LionFieldset } from '@lion/fieldset';
|
||||||
import '@lion/field/lion-field.js';
|
import '@lion/field/lion-field.js';
|
||||||
import '@lion/fieldset/lion-fieldset.js';
|
import '@lion/fieldset/lion-fieldset.js';
|
||||||
|
|
||||||
import '../lion-form.js';
|
import '../lion-form.js';
|
||||||
|
|
||||||
const childTagString = defineCE(
|
const childTagString = defineCE(
|
||||||
|
|
@ -27,6 +29,26 @@ const formTagString = 'lion-form';
|
||||||
const formTag = unsafeStatic(formTagString);
|
const formTag = unsafeStatic(formTagString);
|
||||||
|
|
||||||
describe('<lion-form>', () => {
|
describe('<lion-form>', () => {
|
||||||
|
it('is an instance of LionFieldSet', async () => {
|
||||||
|
const el = await fixture(html`
|
||||||
|
<${formTag}>
|
||||||
|
<form>
|
||||||
|
</form>
|
||||||
|
</${formTag}>
|
||||||
|
`);
|
||||||
|
expect(el).to.be.instanceOf(LionFieldset);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('relies on the native form for its accessible role', async () => {
|
||||||
|
const el = await fixture(html`
|
||||||
|
<${formTag}>
|
||||||
|
<form>
|
||||||
|
</form>
|
||||||
|
</${formTag}>
|
||||||
|
`);
|
||||||
|
expect(el.getAttribute('role')).to.be.null;
|
||||||
|
});
|
||||||
|
|
||||||
it('has a custom reset that gets triggered by native reset', async () => {
|
it('has a custom reset that gets triggered by native reset', async () => {
|
||||||
const withDefaults = await fixture(html`
|
const withDefaults = await fixture(html`
|
||||||
<${formTag}>
|
<${formTag}>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue