fix(form): leave accessible role to native form

This commit is contained in:
Thijs Louisse 2020-02-27 11:27:25 +01:00
parent ce0630f32b
commit 1310bd491e
2 changed files with 25 additions and 5 deletions

View file

@ -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();

View file

@ -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}>