@crowdstrike/glide-core 0.13.1 → 0.14.0

package/dist/radio-group.test.basics.js

@@ -1,324 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './radio-group.js';
-import './radio.js';
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import GlideCoreRadio from './radio.js';
-import GlideCoreRadioGroup from './radio-group.js';
-import expectArgumentError from './library/expect-argument-error.js';
-GlideCoreRadio.shadowRootOptions.mode = 'open';
-GlideCoreRadioGroup.shadowRootOptions.mode = 'open';
-it('registers', async () => {
-    expect(window.customElements.get('glide-core-radio-group')).to.equal(GlideCoreRadioGroup);
-    expect(window.customElements.get('glide-core-radio')).to.equal(GlideCoreRadio);
-});
-it('is accessible', async () => {
-    const component = await fixture(html `
-    <glide-core-radio-group label="label" name="name" value="value-1">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
-      <span slot="tooltip">Tooltip</span>
-      <div slot="description">Description</div>
-    </glide-core-radio-group>
-  `);
-    await expect(component).to.be.accessible();
-});
-it('renders appropriate attributes on glide-core-radio', async () => {
-    await fixture(html `
-    <glide-core-radio-group label="label" name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two" checked></glide-core-radio>
-    </glide-core-radio-group>
-  `);
-    const radios = document.querySelectorAll('glide-core-radio');
-    expect(radios[0].getAttribute('value')).to.equal('value-1');
-    expect(radios[0].getAttribute('tabindex')).to.equal('-1');
-    expect(radios[0]).to.not.have.attribute('checked');
-    expect(radios[0].getAttribute('role')).to.equal('radio');
-    expect(radios[0].getAttribute('aria-checked')).to.equal('false');
-    expect(radios[0].getAttribute('aria-disabled')).to.equal('false');
-    expect(radios[0].getAttribute('aria-invalid')).to.equal('false');
-    expect(radios[0].getAttribute('aria-required')).to.equal('false');
-    expect(radios[1].getAttribute('value')).to.equal('value-2');
-    expect(radios[1].getAttribute('tabindex')).to.equal('0');
-    expect(radios[1].hasAttribute('checked')).to.be.true;
-    expect(radios[1].getAttribute('role')).to.equal('radio');
-    expect(radios[1].getAttribute('aria-checked')).to.equal('true');
-    expect(radios[1].getAttribute('aria-disabled')).to.equal('false');
-    expect(radios[1].getAttribute('aria-invalid')).to.equal('false');
-    expect(radios[1].getAttribute('aria-required')).to.equal('false');
-});
-it('renders a label, radio group, description, and tooltip when given', async () => {
-    const component = await fixture(html `
-    <glide-core-radio-group label="label" name="name" value="value-1">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <span slot="tooltip" data-test="tooltip">Tooltip</span>
-      <div slot="description" data-test="description">Description</div>
-    </glide-core-radio-group>
-  `);
-    const label = component.shadowRoot?.querySelector('[data-test="label"]');
-    const radioGroup = component?.shadowRoot?.querySelector('[role="radiogroup"]');
-    const tooltip = document.querySelector('[data-test="tooltip"]');
-    const description = document?.querySelector('[data-test="description"]');
-    expect(component).to.not.be.null;
-    expect(label).to.not.be.null;
-    expect(radioGroup).to.not.be.null;
-    expect(tooltip).to.not.be.null;
-    expect(description).to.not.be.null;
-});
-it('does not render a required symbol when a "label" is given and "required" is not set', async () => {
-    await fixture(html `
-    <glide-core-radio-group label="label" name="name" value="value-1">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-    </glide-core-radio-group>
-  `);
-    const group = document.querySelector('glide-core-radio-group');
-    const requiredSymbol = group?.shadowRoot?.querySelector('[data-test="label-required"]');
-    expect(requiredSymbol).to.be.null;
-});
-it('sets "required" attributes on radios when "required" is set on the group', async () => {
-    await fixture(html `
-    <glide-core-radio-group label="label" name="name" value="value-1" required>
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-    </glide-core-radio-group>
-  `);
-    const radios = document.querySelectorAll('glide-core-radio');
-    expect(radios[0].hasAttribute('required')).to.be.true;
-    expect(radios[0].getAttribute('aria-required')).to.equal('true');
-    expect(radios[1].hasAttribute('required')).to.be.true;
-    expect(radios[1].getAttribute('aria-required')).to.equal('true');
-});
-it('does not set "required" attributes on radios when "required" is not set on the group', async () => {
-    await fixture(html `
-    <glide-core-radio-group label="label" name="name" value="value-1">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-    </glide-core-radio-group>
-  `);
-    const radios = document.querySelectorAll('glide-core-radio');
-    expect(radios[0]).to.not.have.attribute('required');
-    expect(radios[0].getAttribute('aria-required')).to.equal('false');
-    expect(radios[1]).to.not.have.attribute('required');
-    expect(radios[1].getAttribute('aria-required')).to.equal('false');
-});
-it('renders radios as "disabled" when "disabled" is set on the group', async () => {
-    await fixture(html `
-    <glide-core-radio-group label="label" name="name" value="value-1" disabled>
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-    </glide-core-radio-group>
-  `);
-    const radio = document.querySelector('glide-core-radio');
-    expect(radio?.hasAttribute('disabled')).to.be.true;
-    expect(radio?.getAttribute('aria-disabled')).to.equal('true');
-    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.not.null;
-});
-it('does not render radios as "disabled" when "disabled" is not set on the group', async () => {
-    await fixture(html `
-    <glide-core-radio-group label="label" name="name" value="value-1">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-    </glide-core-radio-group>
-  `);
-    const radio = document.querySelector('glide-core-radio');
-    expect(radio).to.not.have.attribute('disabled');
-    expect(radio?.getAttribute('aria-disabled')).to.equal('false');
-    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.null;
-});
-it('renders radios as "disabled" when "disabled" is dynamically set and removed on the group', async () => {
-    const component = await fixture(html `
-    <glide-core-radio-group label="label" name="name" value="value-1">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-    </glide-core-radio-group>
-  `);
-    const radio = document.querySelector('glide-core-radio');
-    expect(radio).to.not.have.attribute('disabled');
-    expect(radio?.getAttribute('aria-disabled')).to.equal('false');
-    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.null;
-    component.disabled = true;
-    await elementUpdated(component);
-    expect(radio?.hasAttribute('disabled')).to.be.true;
-    expect(radio?.getAttribute('aria-disabled')).to.equal('true');
-    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.not.null;
-    component.disabled = false;
-    await elementUpdated(component);
-    expect(radio).to.not.have.attribute('disabled');
-    expect(radio?.getAttribute('aria-disabled')).to.equal('false');
-    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.null;
-});
-it('sets the radio group to an empty value when no radio is "checked"', async () => {
-    const component = await fixture(html `
-    <glide-core-radio-group label="label" name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-    </glide-core-radio-group>
-  `);
-    const radios = document.querySelectorAll('glide-core-radio');
-    expect(component.value).to.equal('');
-    expect(radios.length).to.equal(2);
-    expect(radios[0]).to.not.have.attribute('checked');
-    expect(radios[0]?.getAttribute('aria-checked')).to.equal('false');
-    expect(radios[1]).to.not.have.attribute('checked');
-    expect(radios[1]?.getAttribute('aria-checked')).to.equal('false');
-});
-it('sets the group "value" when a radio is set as "checked"', async () => {
-    await fixture(html `
-    <glide-core-radio-group label="label" name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" checked label="Two"></glide-core-radio>
-    </glide-core-radio-group>
-  `);
-    const group = document.querySelector('glide-core-radio-group');
-    expect(group?.getAttribute('value')).to.equal('value-2');
-});
-it('throws an error when an component other than `glide-core-radio` is a child of the default slot', async () => {
-    await expectArgumentError(() => {
-        return fixture(html `
-      <glide-core-radio-group label="label" name="name">
-        <div>Option 1</div>
-        <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-      </glide-core-radio-group>
-    `);
-    });
-});
-it('throws an error when the group has no children', async () => {
-    await expectArgumentError(() => {
-        return fixture(html `<glide-core-radio-group label="label" name="name">
-      </glide-core-radio-group>`);
-    });
-});
-it('sets the first radio to be tabbable when none are checked', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    expect(radios.length).to.equal(3);
-    expect(radios[0]?.getAttribute('tabindex')).to.equal('0');
-    expect(radios[1]?.getAttribute('tabindex')).to.equal('-1');
-    expect(radios[2]?.getAttribute('tabindex')).to.equal('-1');
-});
-it('sets the first non-disabled radio as tabbable when none are checked', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" disabled label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    expect(radios.length).to.equal(3);
-    expect(radios[0]?.getAttribute('tabindex')).to.equal('-1');
-    expect(radios[1]?.getAttribute('tabindex')).to.equal('0');
-    expect(radios[2]?.getAttribute('tabindex')).to.equal('-1');
-});
-it('no radios are tabbable when the group is "disabled"', async () => {
-    await fixture(html `<glide-core-radio-group name="name" disabled>
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-      <glide-core-radio
-        value="value-3"
-        checked
-        label="Three"
-      ></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    expect(radios.length).to.equal(3);
-    expect(radios[0]?.getAttribute('tabindex')).to.equal('-1');
-    expect(radios[1]?.getAttribute('tabindex')).to.equal('-1');
-    expect(radios[2]?.getAttribute('tabindex')).to.equal('-1');
-});
-it('disabled radios are not tabbable', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" disabled label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" disabled label="Two"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    expect(radios.length).to.equal(2);
-    expect(radios[0]?.getAttribute('tabindex')).to.equal('-1');
-    expect(radios[1]?.getAttribute('tabindex')).to.equal('-1');
-});
-it('sets only the "checked" radio as tabbable', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-      <glide-core-radio
-        value="value-3"
-        label="Three"
-        checked
-      ></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    expect(radios.length).to.equal(3);
-    expect(radios[0]?.getAttribute('tabindex')).to.equal('-1');
-    expect(radios[1]?.getAttribute('tabindex')).to.equal('-1');
-    expect(radios[2]?.getAttribute('tabindex')).to.equal('0');
-});
-it('has reactive radio attribute "aria-checked"', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radio = document.querySelector('glide-core-radio');
-    expect(radio).to.not.be.null;
-    expect(radio?.getAttribute('aria-checked')).to.equal('false');
-    radio?.setAttribute('checked', '');
-    await elementUpdated(radio);
-    expect(radio?.getAttribute('aria-checked')).to.equal('true');
-    radio?.removeAttribute('checked');
-    await elementUpdated(radio);
-    expect(radio?.getAttribute('aria-checked')).to.equal('false');
-});
-it('has reactive radio attribute "aria-disabled"', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radio = document.querySelector('glide-core-radio');
-    expect(radio).to.not.be.null;
-    expect(radio?.getAttribute('aria-disabled')).to.equal('false');
-    radio?.setAttribute('disabled', '');
-    await elementUpdated(radio);
-    expect(radio?.getAttribute('aria-disabled')).to.equal('true');
-    radio?.removeAttribute('disabled');
-    await elementUpdated(radio);
-    expect(radio?.getAttribute('aria-disabled')).to.equal('false');
-});
-it('has reactive radio attribute "aria-required"', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radio = document.querySelector('glide-core-radio');
-    expect(radio).to.not.be.null;
-    expect(radio?.getAttribute('aria-required')).to.equal('false');
-    radio?.setAttribute('required', '');
-    await elementUpdated(radio);
-    expect(radio?.getAttribute('aria-required')).to.equal('true');
-    radio?.removeAttribute('required');
-    await elementUpdated(radio);
-    expect(radio?.getAttribute('aria-required')).to.equal('false');
-});
-it('has reactive radio attribute "aria-invalid"', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radio = document.querySelector('glide-core-radio');
-    expect(radio).to.not.be.null;
-    expect(radio?.getAttribute('aria-invalid')).to.equal('false');
-    radio?.setAttribute('invalid', '');
-    await elementUpdated(radio);
-    expect(radio?.getAttribute('aria-invalid')).to.equal('true');
-    radio?.removeAttribute('invalid');
-    await elementUpdated(radio);
-    expect(radio?.getAttribute('aria-invalid')).to.equal('false');
-});
-it('adds a label to radio when given', async () => {
-    const component = await fixture(html `<glide-core-radio value="value-1" label="One"></glide-core-radio>`);
-    const label = component.shadowRoot.querySelector('.component')?.textContent;
-    expect(label).to.contain('One');
-    expect(component.ariaLabel).to.equal('One');
-});
-it('changes the radio label dynamically as when given', async () => {
-    const component = await fixture(html `<glide-core-radio value="value-1" label="One"></glide-core-radio>`);
-    component.label = 'Two';
-    await elementUpdated(component);
-    const label = component.shadowRoot.querySelector('.component')?.textContent;
-    expect(label).to.contain('Two');
-    expect(component.ariaLabel).to.equal('Two');
-});

package/dist/radio-group.test.events.d.ts

@@ -1,2 +0,0 @@
-import './radio-group.js';
-import './radio.js';

package/dist/radio-group.test.events.js

@@ -1,278 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './radio-group.js';
-import './radio.js';
-import { elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import GlideCoreRadio from './radio.js';
-import GlideCoreRadioGroup from './radio-group.js';
-GlideCoreRadio.shadowRootOptions.mode = 'open';
-GlideCoreRadioGroup.shadowRootOptions.mode = 'open';
-it('emits a change event when arrow keys are pressed', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" checked label="Two"></glide-core-radio>
-      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    await sendKeys({ press: 'Tab' });
-    // This pattern is adopted from https://open-wc.org/docs/testing/helpers/#testing-events
-    // Without the setTimeout the test fails. An `await` is used since `sendKeys` returns a
-    // promise, however the test seems to work without it. Keeping `await` here until this can
-    // be investigated further.
-    setTimeout(async () => await sendKeys({ press: 'ArrowLeft' }));
-    const changeEventLeft = await oneEvent(radios[0], 'change');
-    expect(changeEventLeft instanceof Event).to.be.true;
-    expect(changeEventLeft.bubbles).to.be.true;
-    setTimeout(async () => await sendKeys({ press: 'ArrowRight' }));
-    const changeEventRight = await oneEvent(radios[1], 'change');
-    expect(changeEventRight instanceof Event).to.be.true;
-    expect(changeEventRight.bubbles).to.be.true;
-    setTimeout(async () => await sendKeys({ press: 'ArrowUp' }));
-    const changeEventUp = await oneEvent(radios[0], 'change');
-    expect(changeEventUp instanceof Event).to.be.true;
-    expect(changeEventUp.bubbles).to.be.true;
-    setTimeout(async () => await sendKeys({ press: 'ArrowDown' }));
-    const changeEventDown = await oneEvent(radios[1], 'change');
-    expect(changeEventDown instanceof Event).to.be.true;
-    expect(changeEventDown.bubbles).to.be.true;
-});
-it('emits an input event when arrow keys are pressed', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" checked label="Two"></glide-core-radio>
-      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    await sendKeys({ press: 'Tab' });
-    setTimeout(async () => await sendKeys({ press: 'ArrowLeft' }));
-    const inputEventLeft = await oneEvent(radios[0], 'input');
-    expect(inputEventLeft instanceof Event).to.be.true;
-    expect(inputEventLeft.bubbles).to.be.true;
-    setTimeout(async () => await sendKeys({ press: 'ArrowRight' }));
-    const inputEventRight = await oneEvent(radios[1], 'input');
-    expect(inputEventRight instanceof Event).to.be.true;
-    expect(inputEventRight.bubbles).to.be.true;
-    setTimeout(async () => await sendKeys({ press: 'ArrowUp' }));
-    const inputEventUp = await oneEvent(radios[0], 'input');
-    expect(inputEventUp instanceof Event).to.be.true;
-    expect(inputEventUp.bubbles).to.be.true;
-    setTimeout(async () => await sendKeys({ press: 'ArrowDown' }));
-    const inputEventDown = await oneEvent(radios[1], 'input');
-    expect(inputEventDown instanceof Event).to.be.true;
-    expect(inputEventDown.bubbles).to.be.true;
-});
-it('moves focus to previous radio when left or up arrow keys are pressed', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-      <glide-core-radio
-        value="value-3"
-        checked
-        label="Three"
-      ></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowLeft' });
-    expect(radios[1]).to.have.focus;
-    await sendKeys({ press: 'ArrowUp' });
-    expect(radios[0]).to.have.focus;
-});
-it('moves focus to last radio when left or up arrow keys are pressed on the first radio', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" checked label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowLeft' });
-    expect(radios[2]).to.have.focus;
-    radios[0].focus();
-    await sendKeys({ press: ' ' });
-    await sendKeys({ press: 'ArrowUp' });
-    expect(radios[2]).to.have.focus;
-});
-it('moves focus to next radio when right or down arrow keys are pressed', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" checked label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowRight' });
-    expect(radios[1]).to.have.focus;
-    await sendKeys({ press: 'ArrowDown' });
-    expect(radios[2]).to.have.focus;
-});
-it('moves focus to first radio when right or down arrow keys are pressed on the last radio', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-      <glide-core-radio
-        value="value-3"
-        checked
-        label="Three"
-      ></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowRight' });
-    expect(radios[0]).to.have.focus;
-    radios[2].focus();
-    await sendKeys({ press: ' ' });
-    expect(radios[2]).to.have.focus;
-    await sendKeys({ press: 'ArrowDown' });
-    expect(radios[0]).to.have.focus;
-});
-it('moves focus to previous enabled radio when pressing left or up arrow keys', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" disabled label="Two"></glide-core-radio>
-      <glide-core-radio
-        value="value-3"
-        checked
-        label="Three"
-      ></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowLeft' });
-    expect(radios[0]).to.have.focus;
-    radios[2].focus();
-    await sendKeys({ press: ' ' });
-    expect(radios[2]).to.have.focus;
-    await sendKeys({ press: 'ArrowUp' });
-    expect(radios[0]).to.have.focus;
-});
-it('moves focus to next enabled radio when pressing right or down arrow keys', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" checked label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" disabled label="Two"></glide-core-radio>
-      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowRight' });
-    expect(radios[2]).to.have.focus;
-    radios[0].focus();
-    await sendKeys({ press: ' ' });
-    expect(radios[0]).to.have.focus;
-    await sendKeys({ press: 'ArrowDown' });
-    expect(radios[2]).to.have.focus;
-});
-it('does not move focus if there is only one button when pressing arrow keys', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" label="One"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radio = document.querySelector('glide-core-radio');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowLeft' });
-    expect(radio).to.have.focus;
-    await sendKeys({ press: 'ArrowRight' });
-    expect(radio).to.have.focus;
-    await sendKeys({ press: 'ArrowUp' });
-    expect(radio).to.have.focus;
-    await sendKeys({ press: 'ArrowDown' });
-    expect(radio).to.have.focus;
-});
-it('changes the "checked" attribute when clicking', async () => {
-    const component = await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" checked label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    expect(radios.length).to.equal(3);
-    radios[2].click();
-    await elementUpdated(component);
-    expect(radios[2]).to.have.focus;
-    expect(radios[2]?.hasAttribute('checked')).to.be.true;
-    expect(radios[0]).to.not.have.attribute('checked');
-});
-it('does not change focus nor the "checked" attribute when clicking a disabled radio', async () => {
-    const component = await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" checked label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" disabled label="Two"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    expect(radios.length).to.equal(2);
-    radios[1].click();
-    await elementUpdated(component);
-    expect(radios[0]).to.have.focus;
-    expect(radios[0]?.hasAttribute('checked')).to.be.true;
-    expect(radios[1]).to.not.have.attribute('checked');
-});
-it('does not change focus nor the "checked" attribute when clicking a disabled group', async () => {
-    const component = await fixture(html `<glide-core-radio-group name="name" disabled>
-      <glide-core-radio value="value-1" checked label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    expect(radios.length).to.equal(2);
-    radios[1].click();
-    await elementUpdated(component);
-    expect(radios[0]).to.not.have.focus;
-    expect(radios[0]?.hasAttribute('checked')).to.be.true;
-    expect(radios[1]).to.not.have.attribute('checked');
-});
-it('changes the "checked" attribute when pressing arrow and space keys', async () => {
-    await fixture(html `<glide-core-radio-group name="name">
-      <glide-core-radio value="value-1" checked label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ press: 'ArrowRight' });
-    expect(radios[1]).to.have.focus;
-    expect(radios[1]?.hasAttribute('checked')).to.be.true;
-    expect(radios[0]).to.not.have.attribute('checked');
-    await sendKeys({ press: 'ArrowDown' });
-    expect(radios[2]).to.have.focus;
-    expect(radios[2]?.hasAttribute('checked')).to.be.true;
-    expect(radios[1]).to.not.have.attribute('checked');
-    await sendKeys({ press: 'ArrowUp' });
-    expect(radios[1]).to.have.focus;
-    expect(radios[1]?.hasAttribute('checked')).to.be.true;
-    expect(radios[2]).to.not.have.attribute('checked');
-    await sendKeys({ press: 'ArrowLeft' });
-    expect(radios[0]).to.have.focus;
-    expect(radios[0]?.hasAttribute('checked')).to.be.true;
-    expect(radios[1]).to.not.have.attribute('checked');
-    radios[2].focus();
-    await sendKeys({ press: ' ' });
-    expect(radios[2]).to.have.focus;
-    expect(radios[2]?.hasAttribute('checked')).to.be.true;
-    expect(radios[0]).to.not.have.attribute('checked');
-});
-it('does not change the "checked" attribute nor focus when pressing arrow and space keys when the group is disabled', async () => {
-    await fixture(html `<glide-core-radio-group name="name" disabled>
-      <glide-core-radio value="value-1" checked label="One"></glide-core-radio>
-      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
-      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
-    </glide-core-radio-group>`);
-    const radios = document.querySelectorAll('glide-core-radio');
-    radios[0].focus();
-    await sendKeys({ press: 'ArrowRight' });
-    expect(radios[0]).to.have.focus;
-    expect(radios[0]?.hasAttribute('checked')).to.be.true;
-    expect(radios[2]).to.not.have.attribute('checked');
-    await sendKeys({ press: 'ArrowDown' });
-    expect(radios[0]).to.have.focus;
-    expect(radios[0]?.hasAttribute('checked')).to.be.true;
-    expect(radios[2]).to.not.have.attribute('checked');
-    await sendKeys({ press: 'ArrowUp' });
-    expect(radios[0]).to.have.focus;
-    expect(radios[0]?.hasAttribute('checked')).to.be.true;
-    expect(radios[1]).to.not.have.attribute('checked');
-    await sendKeys({ press: 'ArrowLeft' });
-    expect(radios[0]).to.have.focus;
-    expect(radios[0]?.hasAttribute('checked')).to.be.true;
-    expect(radios[1]).to.not.have.attribute('checked');
-    radios[1].focus();
-    await sendKeys({ press: ' ' });
-    expect(radios[0]?.hasAttribute('checked')).to.be.true;
-    expect(radios[1]).to.not.have.attribute('checked');
-});

package/dist/radio-group.test.focus.d.ts

@@ -1,2 +0,0 @@
-import './radio-group.js';
-import './radio.js';