diff --git a/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts b/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts
index 86860ef69..865e04b0b 100644
--- a/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts
+++ b/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts
@@ -46,11 +46,12 @@ describe('modus-switch', () => {
await page.setContent('');
const component = await page.find('modus-switch');
+ const input = await page.find('modus-switch >>> input');
+ expect(await input.getProperty('checked')).toBeFalsy();
component.setProperty('checked', 'true');
await page.waitForChanges();
- const input = await page.find('modus-switch >>> input');
expect(await input.getProperty('checked')).toBeTruthy();
});
@@ -94,14 +95,12 @@ describe('modus-switch', () => {
const input = await page.find('modus-switch >>> input');
expect(await modusSwitch.getProperty('checked')).toBeTruthy();
expect(await input.getProperty('checked')).toBeTruthy();
- expect(await input.getAttribute('aria-checked').toLowerCase()).toEqual('true');
await element.click();
await page.waitForChanges();
expect(await modusSwitch.getProperty('checked')).toBeFalsy();
expect(await input.getProperty('checked')).toBeFalsy();
- expect(await input.getAttribute('aria-checked').toLowerCase()).toEqual('false');
});
it('renders with medium size', async () => {
const page = await newE2EPage();
@@ -119,6 +118,28 @@ describe('modus-switch', () => {
expect(element).toHaveClass('small');
});
+ it('sets tabindex to -1 when disabled', async () => {
+ const page = await newE2EPage();
+ await page.setContent('');
+
+ const element = await page.find('modus-switch >>> .modus-switch');
+ expect(element).toHaveAttribute('tabindex');
+ expect(element.getAttribute('tabindex')).toEqual('-1');
+ });
+
+ it('renders with "for" on label equal to "id" on input', async () => {
+ const page = await newE2EPage();
+ await page.setContent('');
+
+ const input = await page.find('modus-switch >>> input');
+ const id = await input.getAttribute('id');
+
+ const label = await page.find('modus-switch >>> label');
+ const forAttr = await label.getAttribute('for');
+
+ expect(id).toEqual(forAttr);
+ });
+
it('renders aria-label on input when set', async () => {
const page = await newE2EPage();
diff --git a/stencil-workspace/src/components/modus-switch/modus-switch.spec.tsx b/stencil-workspace/src/components/modus-switch/modus-switch.spec.tsx
index 7beba3317..7a9473248 100644
--- a/stencil-workspace/src/components/modus-switch/modus-switch.spec.tsx
+++ b/stencil-workspace/src/components/modus-switch/modus-switch.spec.tsx
@@ -14,26 +14,7 @@ describe('modus-switch', () => {
-
-
-
-
- `);
- });
-
- it('sets tabindex to -1 when disabled', async () => {
- const page = await newSpecPage({
- components: [ModusSwitch],
- html: '',
- });
- expect(page.root).toEqualHtml(`
-
-
-
diff --git a/stencil-workspace/src/components/modus-switch/modus-switch.tsx b/stencil-workspace/src/components/modus-switch/modus-switch.tsx
index ed3aea018..92bb345dd 100644
--- a/stencil-workspace/src/components/modus-switch/modus-switch.tsx
+++ b/stencil-workspace/src/components/modus-switch/modus-switch.tsx
@@ -1,4 +1,6 @@
// eslint-disable-next-line
+import { generateElementId } from '../../utils/utils';
+// eslint-disable-next-line
import { Component, Prop, h, Event, EventEmitter, Listen } from '@stencil/core';
@Component({
@@ -25,6 +27,7 @@ export class ModusSwitch {
/** An event that fires on switch click. */
@Event() switchClick: EventEmitter;
+ private generatedId = generateElementId() + '_switch_input';
checkboxInput: HTMLInputElement;
@Listen('keydown')
@@ -69,15 +72,15 @@ export class ModusSwitch {
(this.checkboxInput = el as HTMLInputElement)}
role="switch"
type="checkbox">
- {this.label ? : null}
+ {this.label ? : null}
);
}