npm - q2-tecton-elements - Versions diffs - 1.50.1 → 1.51.0 - Mend

q2-tecton-elements 1.50.1 → 1.51.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (578) hide show

package/dist/collection/components/q2-message/test/q2-message-test.e2e.js CHANGED Viewed

@@ -4,15 +4,6 @@ describe('q2-message', () => {
         const page = await setup({ html: '<q2-message></q2-message>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-message')).toHaveLength(0);
     });
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations with only label', async () => {
-            const page = await setup({
-                html: '<q2-message type="success"></q2-message>',
-            });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-    });
     describe('@Props', () => {
         describe('type', () => {
             describe('when omitted', () => {
@@ -155,6 +146,20 @@ describe('q2-message', () => {
             expect(containsClass).toBe(true);
         });
     });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({
+                    html: '<q2-message type="success"></q2-message>',
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+        });
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => { });
+        describe('Other', () => { });
+    });
 });
 async function expectScreenReaderMessageLabel(type) {
     const page = await setup({

package/dist/collection/components/q2-message/test/q2-message-test.e2e.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-message-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-message/test/q2-message-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { setTestStrings, setup, dispatchEvent, getListOfStyleCompilationIssues, evaluateA11y } from '@/utils/helpers';\n\ndescribe('q2-message', () => {\n it('properly compiles CSS vars and functions', async () => {\n const page = await setup({ html: '<q2-message></q2-message>' });\n expect(await getListOfStyleCompilationIssues(page, 'q2-message')).toHaveLength(0);\n });\n\n describe('[A11y] guideline compliance', () => {\n it('Does not have accessibility violations with only label', async () => {\n const page = await setup({\n html: '<q2-message type=\"success\"></q2-message>',\n });\n const hasViolations = await evaluateA11y(page);\n expect(hasViolations).toBe(false);\n });\n });\n\n describe('@Props', () => {\n describe('type', () => {\n describe('when omitted', () => {\n it('defaults to \"info\" type and icon', async () => {\n const page = await setup({\n html: '<q2-message></q2-message>',\n });\n const messageElement = await page.find('q2-message');\n const messageIcon = await page.find('q2-message >>> .message-icon');\n\n expect(await messageElement.getAttribute('type')).toEqual('info');\n expect(await messageIcon.getAttribute('type')).toEqual('info');\n });\n\n it('defaults to \"info\" message type label', async () => {\n const ariaLabel = 'q2-message aria-label';\n const page = await setup({ html: '' });\n await setTestStrings(page, {\n 'tecton.element.message.type.info': ariaLabel,\n });\n await page.setContent('<q2-message></q2-message>');\n await page.waitForChanges();\n const typeLabel = await page.find('q2-message >>> .sr.message-label');\n\n expect(typeLabel).toEqualText(ariaLabel);\n });\n });\n\n describe('when value is \"success\"', () => {\n it('renders with \"success\" icon', async () => {\n const page = await setup({\n html: '<q2-message type=\"success\"></q2-message>',\n });\n const messageIcon = await page.find('q2-message >>> .message-icon');\n\n expect(await messageIcon.getAttribute('type')).toEqual('success');\n });\n\n it('renders with \"success\" message type label', async () => {\n await expectScreenReaderMessageLabel('success');\n });\n });\n\n describe('when value is \"warning\"', () => {\n it('renders with \"warning\" icon', async () => {\n const page = await setup({\n html: '<q2-message type=\"warning\"></q2-message>',\n });\n const messageIcon = await page.find('q2-message >>> .message-icon');\n\n expect(await messageIcon.getAttribute('type')).toEqual('warning');\n });\n\n it('renders with \"warning\" message type label', async () => {\n await expectScreenReaderMessageLabel('warning');\n });\n });\n\n describe('when value is \"danger\"', () => {\n it('renders with \"error\" icon', async () => {\n const page = await setup({\n html: '<q2-message type=\"danger\"></q2-message>',\n });\n const messageIcon = await page.find('q2-message >>> .message-icon');\n\n expect(await messageIcon.getAttribute('type')).toEqual('error');\n });\n\n it('renders with \"danger\" message type label', async () => {\n await expectScreenReaderMessageLabel('danger');\n });\n });\n\n describe('when value is \"error\"', () => {\n it('renders with \"error\" icon', async () => {\n const page = await setup({\n html: '<q2-message type=\"error\"></q2-message>',\n });\n const messageIcon = await page.find('q2-message >>> .message-icon');\n\n expect(await messageIcon.getAttribute('type')).toEqual('error');\n });\n\n it('renders with \"error\" message type label', async () => {\n await expectScreenReaderMessageLabel('error');\n });\n });\n });\n\n describe('appearance', () => {\n describe('when value is \"minimal\"', () => {\n it('does not render icon', async () => {\n const page = await setup({\n html: '<q2-message appearance=\"minimal\">Hipster script</q2-message>',\n });\n const messageIcon = await page.find('q2-message >>> .message-icon');\n\n expect(messageIcon).toBeNull();\n });\n });\n\n describe('when omitted', () => {\n it('defaults to \"standard\" and renders icon', async () => {\n const page = await setup({\n html: '<q2-message>Hipster script</q2-message>',\n });\n const messageElement = await page.find('q2-message');\n const messageIcon = await page.find('q2-message >>> .message-icon');\n\n expect(await messageElement.getAttribute('appearance')).toEqual('standard');\n expect(messageIcon).toBeDefined();\n });\n });\n });\n\n describe('description', () => {\n describe('when provided', () => {\n it('does not add aria-attributes and role', async () => {\n const page = await setup({\n html: '<q2-message description>Tony Stark</q2-message>',\n });\n const messageBlock = await page.find('q2-message >>> .message');\n\n expect(await messageBlock.getAttribute('role')).toBeNull();\n expect(await messageBlock.getAttribute('aria-live')).toBeNull();\n expect(await messageBlock.getAttribute('aria-atomic')).toBeNull();\n });\n });\n\n describe('when omitted', () => {\n it('adds aria-attributes and role', async () => {\n const page = await setup({\n html: '<q2-message>Tony Stark</q2-message>',\n });\n const messageBlock = await page.find('q2-message >>> .message');\n\n expect(await messageBlock.getAttribute('role')).toEqual('alert');\n expect(await messageBlock.getAttribute('aria-live')).toEqual('assertive');\n expect(await messageBlock.getAttribute('aria-atomic')).toEqual('true');\n expect(await messageBlock.getAttribute('aria-relevant')).toEqual('all');\n });\n });\n });\n });\n\n describe('focus transferring', () => {\n const html = '<q2-message type=\"info\" appearance=\"standard\">Tony Stark</q2-message>';\n\n it('focuses when focus event dispatched ', async function (): Promise<void> {\n const page = await setup({ html });\n await dispatchEvent(page, ['q2-message'], 'focus');\n const containsClass = await page.$eval('q2-message', el => {\n return el.shadowRoot.activeElement.classList.contains('message');\n });\n expect(containsClass).toBe(true);\n });\n\n it('focuses when focus event method called ', async function (): Promise<void> {\n const page = await setup({ html });\n const message = await page.find('q2-message');\n await message.triggerEvent('focus');\n await page.waitForChanges();\n const containsClass = await page.$eval('q2-message', el => {\n return el.shadowRoot.activeElement.classList.contains('message');\n });\n expect(containsClass).toBe(true);\n });\n });\n});\n\nasync function expectScreenReaderMessageLabel(type: string): Promise<void> {\n const page = await setup({\n html: '<q2-message></q2-message>',\n });\n const screenReaderLabel = 'q2-message aria-label';\n await setTestStrings(page, {\n [`tecton.element.message.type.${type}`]: screenReaderLabel,\n });\n const messageElement = await page.find('q2-message');\n messageElement.setAttribute('type', type);\n await page.waitForChanges();\n const typeLabel = await page.find('q2-message >>> .sr.message-label');\n\n expect(typeLabel).toEqualText(screenReaderLabel);\n}\n"]}
1	+ {"version":3,"file":"q2-message-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-message/test/q2-message-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { setTestStrings, setup, dispatchEvent, getListOfStyleCompilationIssues, evaluateA11y } from '@/utils/helpers';\n\ndescribe('q2-message', () => {\n it('properly compiles CSS vars and functions', async () => {\n const page = await setup({ html: '<q2-message></q2-message>' });\n expect(await getListOfStyleCompilationIssues(page, 'q2-message')).toHaveLength(0);\n });\n\n describe('@Props', () => {\n describe('type', () => {\n describe('when omitted', () => {\n it('defaults to \"info\" type and icon', async () => {\n const page = await setup({\n html: '<q2-message></q2-message>',\n });\n const messageElement = await page.find('q2-message');\n const messageIcon = await page.find('q2-message >>> .message-icon');\n\n expect(await messageElement.getAttribute('type')).toEqual('info');\n expect(await messageIcon.getAttribute('type')).toEqual('info');\n });\n\n it('defaults to \"info\" message type label', async () => {\n const ariaLabel = 'q2-message aria-label';\n const page = await setup({ html: '' });\n await setTestStrings(page, {\n 'tecton.element.message.type.info': ariaLabel,\n });\n await page.setContent('<q2-message></q2-message>');\n await page.waitForChanges();\n const typeLabel = await page.find('q2-message >>> .sr.message-label');\n\n expect(typeLabel).toEqualText(ariaLabel);\n });\n });\n\n describe('when value is \"success\"', () => {\n it('renders with \"success\" icon', async () => {\n const page = await setup({\n html: '<q2-message type=\"success\"></q2-message>',\n });\n const messageIcon = await page.find('q2-message >>> .message-icon');\n\n expect(await messageIcon.getAttribute('type')).toEqual('success');\n });\n\n it('renders with \"success\" message type label', async () => {\n await expectScreenReaderMessageLabel('success');\n });\n });\n\n describe('when value is \"warning\"', () => {\n it('renders with \"warning\" icon', async () => {\n const page = await setup({\n html: '<q2-message type=\"warning\"></q2-message>',\n });\n const messageIcon = await page.find('q2-message >>> .message-icon');\n\n expect(await messageIcon.getAttribute('type')).toEqual('warning');\n });\n\n it('renders with \"warning\" message type label', async () => {\n await expectScreenReaderMessageLabel('warning');\n });\n });\n\n describe('when value is \"danger\"', () => {\n it('renders with \"error\" icon', async () => {\n const page = await setup({\n html: '<q2-message type=\"danger\"></q2-message>',\n });\n const messageIcon = await page.find('q2-message >>> .message-icon');\n\n expect(await messageIcon.getAttribute('type')).toEqual('error');\n });\n\n it('renders with \"danger\" message type label', async () => {\n await expectScreenReaderMessageLabel('danger');\n });\n });\n\n describe('when value is \"error\"', () => {\n it('renders with \"error\" icon', async () => {\n const page = await setup({\n html: '<q2-message type=\"error\"></q2-message>',\n });\n const messageIcon = await page.find('q2-message >>> .message-icon');\n\n expect(await messageIcon.getAttribute('type')).toEqual('error');\n });\n\n it('renders with \"error\" message type label', async () => {\n await expectScreenReaderMessageLabel('error');\n });\n });\n });\n\n describe('appearance', () => {\n describe('when value is \"minimal\"', () => {\n it('does not render icon', async () => {\n const page = await setup({\n html: '<q2-message appearance=\"minimal\">Hipster script</q2-message>',\n });\n const messageIcon = await page.find('q2-message >>> .message-icon');\n\n expect(messageIcon).toBeNull();\n });\n });\n\n describe('when omitted', () => {\n it('defaults to \"standard\" and renders icon', async () => {\n const page = await setup({\n html: '<q2-message>Hipster script</q2-message>',\n });\n const messageElement = await page.find('q2-message');\n const messageIcon = await page.find('q2-message >>> .message-icon');\n\n expect(await messageElement.getAttribute('appearance')).toEqual('standard');\n expect(messageIcon).toBeDefined();\n });\n });\n });\n\n describe('description', () => {\n describe('when provided', () => {\n it('does not add aria-attributes and role', async () => {\n const page = await setup({\n html: '<q2-message description>Tony Stark</q2-message>',\n });\n const messageBlock = await page.find('q2-message >>> .message');\n\n expect(await messageBlock.getAttribute('role')).toBeNull();\n expect(await messageBlock.getAttribute('aria-live')).toBeNull();\n expect(await messageBlock.getAttribute('aria-atomic')).toBeNull();\n });\n });\n\n describe('when omitted', () => {\n it('adds aria-attributes and role', async () => {\n const page = await setup({\n html: '<q2-message>Tony Stark</q2-message>',\n });\n const messageBlock = await page.find('q2-message >>> .message');\n\n expect(await messageBlock.getAttribute('role')).toEqual('alert');\n expect(await messageBlock.getAttribute('aria-live')).toEqual('assertive');\n expect(await messageBlock.getAttribute('aria-atomic')).toEqual('true');\n expect(await messageBlock.getAttribute('aria-relevant')).toEqual('all');\n });\n });\n });\n });\n\n describe('focus transferring', () => {\n const html = '<q2-message type=\"info\" appearance=\"standard\">Tony Stark</q2-message>';\n\n it('focuses when focus event dispatched ', async function (): Promise<void> {\n const page = await setup({ html });\n await dispatchEvent(page, ['q2-message'], 'focus');\n const containsClass = await page.$eval('q2-message', el => {\n return el.shadowRoot.activeElement.classList.contains('message');\n });\n expect(containsClass).toBe(true);\n });\n\n it('focuses when focus event method called ', async function (): Promise<void> {\n const page = await setup({ html });\n const message = await page.find('q2-message');\n await message.triggerEvent('focus');\n await page.waitForChanges();\n const containsClass = await page.$eval('q2-message', el => {\n return el.shadowRoot.activeElement.classList.contains('message');\n });\n expect(containsClass).toBe(true);\n });\n });\n\n describe('Accessibility', () => {\n describe('aXe DevTools', () => {\n it('does not have accessibility violations', async () => {\n const page = await setup({\n html: '<q2-message type=\"success\"></q2-message>',\n });\n const hasViolations = await evaluateA11y(page);\n expect(hasViolations).toBe(false);\n });\n });\n describe('Accessibility Tree', () => {});\n describe('Keyboard Controls', () => {});\n describe('Other', () => {});\n });\n});\n\nasync function expectScreenReaderMessageLabel(type: string): Promise<void> {\n const page = await setup({\n html: '<q2-message></q2-message>',\n });\n const screenReaderLabel = 'q2-message aria-label';\n await setTestStrings(page, {\n [`tecton.element.message.type.${type}`]: screenReaderLabel,\n });\n const messageElement = await page.find('q2-message');\n messageElement.setAttribute('type', type);\n await page.waitForChanges();\n const typeLabel = await page.find('q2-message >>> .sr.message-label');\n\n expect(typeLabel).toEqualText(screenReaderLabel);\n}\n"]}

package/dist/collection/components/q2-optgroup/q2-optgroup.js CHANGED Viewed

@@ -43,7 +43,7 @@ export class Q2Optgroup {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'a814883de8b62bc48a1345fb94d6936e43ca3827', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '0186214c5c7c2a578591c257b905514e84173a3e', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'dbab9d660f63f6c370b127646467ae7f2e27a077', class: "q2-optgroup-options" }, h("slot", { key: 'a8c9a881869bf9da26223f75283b026d0ea7d277' }))));
+        return (h("div", { key: '2c58c18d1f6d5b7886d12a0c5ae99975912fe41b', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '7852309fb1c677c76931f630b6f975379450f5d1', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '4481127fec8a882f0bfcaf3d2047ec2f9b4eb059', class: "q2-optgroup-options" }, h("slot", { key: '03425c1d351eb91b0956c03ef3584a978578db37' }))));
     }
     static get is() { return "q2-optgroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-optgroup/test/q2-optgroup-test.e2e.js CHANGED Viewed

@@ -1,18 +1,5 @@
 import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup } from "../../../utils/helpers";
 describe('q2-select', () => {
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations with only label', async () => {
-            const page = await setup({
-                html: `<q2-select label="My Select">
-                            <q2-optgroup label="Option Group" >
-                                <q2-option value="option1" display="Option Text">Option Text</q2-option>
-                            </q2-optgroup>
-                        </q2-select>`,
-            });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-    });
     it('properly compiles CSS vars and functions', async () => {
         const page = await setup({ html: '<q2-select></q2-select>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-select')).toHaveLength(0);
@@ -85,5 +72,25 @@ describe('q2-select', () => {
         const optGroupLabel = await page.find('q2-optgroup >>> .q2-optgroup-header');
         expect(optGroupLabel.textContent).toEqual('My Option Group Label');
     });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-select label="My Select">
+                            <q2-optgroup label="Option Group" >
+                                <q2-option value="option1" display="Option Text">Option Text</q2-option>
+                            </q2-optgroup>
+                        </q2-select>
+                    `,
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+        });
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => { });
+        describe('Other', () => { });
+    });
 });
 //# sourceMappingURL=q2-optgroup-test.e2e.js.map

package/dist/collection/components/q2-optgroup/test/q2-optgroup-test.e2e.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-optgroup-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-optgroup/test/q2-optgroup-test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,+BAA+B,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAEvG,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACvB,~~QAAQ,CAAC,6BAA6B,~~EAAE,~~GAAG,EAAE;QACzC,EAAE,~~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","sourcesContent":["import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup } from '@/utils/helpers';\n\ndescribe('q2-select', () => {\n ~~describe('[A11y] guideline compliance', () => {\n~~ it('Does not have accessibility violations with only label', async () => {\n const page = await setup({\n html: `<q2-select label=\"My Select\">\n <q2-optgroup label=\"Option Group\" >\n <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n </q2-optgroup>\n </q2-select>`,\n });\n const hasViolations = await evaluateA11y(page);\n expect(hasViolations).toBe(false);\n });\n });\n\n it('properly compiles CSS vars and functions', async () => {\n const page = await setup({ html: '<q2-select></q2-select>' });\n expect(await getListOfStyleCompilationIssues(page, 'q2-select')).toHaveLength(0);\n });\n\n it('renders base state', async function (): Promise<void> {\n const page = await setup({\n html: `<q2-optgroup label=\"Option Group\" >\n <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n </q2-optgroup>\n `,\n });\n\n const optGroup = await page.find('q2-optgroup');\n\n // the component renders\n expect(optGroup.tagName).toEqual('Q2-OPTGROUP');\n\n const optGroupLabel = await page.find('q2-optgroup >>> .q2-optgroup-header');\n // label text is rendered in header\n expect(optGroupLabel.textContent).toEqual('Option Group');\n\n const optGroupContainer = await page.find('q2-optgroup >>> .q2-optgroup-container');\n\n // label header id matches container aria-labelledby\n expect(optGroupLabel.id).toEqual(optGroupContainer.getAttribute('aria-labelledby'));\n\n const assignedNodesLocalName = await page.$eval('q2-optgroup', group => {\n return group.shadowRoot.querySelector('slot').assignedElements()[0].localName;\n });\n\n // slot renders with provided options\n expect(assignedNodesLocalName).toEqual('q2-option');\n });\n\n it('propagates disabled state to child options', async function () {\n const page = await setup({\n html: `<q2-optgroup label=\"Option Group\" disabled>\n <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n </q2-optgroup>\n `,\n });\n\n const option = await page.find('q2-option');\n const optionDisabledByGroup = await option.getProperty('disabledGroup');\n\n expect(optionDisabledByGroup).toEqual(true);\n });\n\n it('hides the container if all children are hidden', async function () {\n const page = await setup({\n html: `<q2-optgroup label=\"Option Group\" >\n <q2-option value=\"option1\" display=\"Option Text\" hidden>Option Text</q2-option>\n </q2-optgroup>\n `,\n });\n\n const optGroupContainer = await page.find('q2-optgroup >>> .q2-optgroup-container');\n let containerHidden = await optGroupContainer.getProperty('hidden');\n\n // container hidden if all options hidden\n expect(containerHidden).toEqual(true);\n\n const option = await page.find('q2-option');\n\n await option.setProperty('hidden', false);\n\n await page.waitForChanges();\n\n // container no longer hidden once option isn't hidden\n // tests mutation observer fires\n containerHidden = await optGroupContainer.getProperty('hidden');\n expect(containerHidden).toEqual(false);\n });\n\n it('localizes label string', async function () {\n const page = await setup({\n html: `<q2-optgroup >\n <q2-option value=\"option1\" display=\"Option Text\" hidden>Option Text</q2-option>\n </q2-optgroup>\n `,\n });\n\n await setTestStrings(page, {\n 'q2-optGroup.label': 'My Option Group Label',\n });\n\n const optGroup = await page.find('q2-optgroup');\n await optGroup.setProperty('label', 'q2-optGroup.label');\n\n await page.waitForChanges();\n\n const optGroupLabel = await page.find('q2-optgroup >>> .q2-optgroup-header');\n\n expect(optGroupLabel.textContent).toEqual('My Option Group Label');\n });\n});\n"]}
1	+ {"version":3,"file":"q2-optgroup-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-optgroup/test/q2-optgroup-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup } from '@/utils/helpers';\n\ndescribe('q2-select', () => {\n it('properly compiles CSS vars and functions', async () => {\n const page = await setup({ html: '<q2-select></q2-select>' });\n expect(await getListOfStyleCompilationIssues(page, 'q2-select')).toHaveLength(0);\n });\n\n it('renders base state', async function (): Promise<void> {\n const page = await setup({\n html: `<q2-optgroup label=\"Option Group\" >\n <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n </q2-optgroup>\n `,\n });\n\n const optGroup = await page.find('q2-optgroup');\n\n // the component renders\n expect(optGroup.tagName).toEqual('Q2-OPTGROUP');\n\n const optGroupLabel = await page.find('q2-optgroup >>> .q2-optgroup-header');\n // label text is rendered in header\n expect(optGroupLabel.textContent).toEqual('Option Group');\n\n const optGroupContainer = await page.find('q2-optgroup >>> .q2-optgroup-container');\n\n // label header id matches container aria-labelledby\n expect(optGroupLabel.id).toEqual(optGroupContainer.getAttribute('aria-labelledby'));\n\n const assignedNodesLocalName = await page.$eval('q2-optgroup', group => {\n return group.shadowRoot.querySelector('slot').assignedElements()[0].localName;\n });\n\n // slot renders with provided options\n expect(assignedNodesLocalName).toEqual('q2-option');\n });\n\n it('propagates disabled state to child options', async function () {\n const page = await setup({\n html: `<q2-optgroup label=\"Option Group\" disabled>\n <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n </q2-optgroup>\n `,\n });\n\n const option = await page.find('q2-option');\n const optionDisabledByGroup = await option.getProperty('disabledGroup');\n\n expect(optionDisabledByGroup).toEqual(true);\n });\n\n it('hides the container if all children are hidden', async function () {\n const page = await setup({\n html: `<q2-optgroup label=\"Option Group\" >\n <q2-option value=\"option1\" display=\"Option Text\" hidden>Option Text</q2-option>\n </q2-optgroup>\n `,\n });\n\n const optGroupContainer = await page.find('q2-optgroup >>> .q2-optgroup-container');\n let containerHidden = await optGroupContainer.getProperty('hidden');\n\n // container hidden if all options hidden\n expect(containerHidden).toEqual(true);\n\n const option = await page.find('q2-option');\n\n await option.setProperty('hidden', false);\n\n await page.waitForChanges();\n\n // container no longer hidden once option isn't hidden\n // tests mutation observer fires\n containerHidden = await optGroupContainer.getProperty('hidden');\n expect(containerHidden).toEqual(false);\n });\n\n it('localizes label string', async function () {\n const page = await setup({\n html: `<q2-optgroup >\n <q2-option value=\"option1\" display=\"Option Text\" hidden>Option Text</q2-option>\n </q2-optgroup>\n `,\n });\n\n await setTestStrings(page, {\n 'q2-optGroup.label': 'My Option Group Label',\n });\n\n const optGroup = await page.find('q2-optgroup');\n await optGroup.setProperty('label', 'q2-optGroup.label');\n\n await page.waitForChanges();\n\n const optGroupLabel = await page.find('q2-optgroup >>> .q2-optgroup-header');\n\n expect(optGroupLabel.textContent).toEqual('My Option Group Label');\n });\n\n describe('Accessibility', () => {\n describe('aXe DevTools', () => {\n it('does not have accessibility violations', async () => {\n const page = await setup({\n html: `\n <q2-select label=\"My Select\">\n <q2-optgroup label=\"Option Group\" >\n <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n </q2-optgroup>\n </q2-select>\n `,\n });\n const hasViolations = await evaluateA11y(page);\n expect(hasViolations).toBe(false);\n });\n });\n describe('Accessibility Tree', () => {});\n describe('Keyboard Controls', () => {});\n describe('Other', () => {});\n });\n});\n"]}

package/dist/collection/components/q2-option/q2-option.js CHANGED Viewed

@@ -56,7 +56,7 @@ export class Q2Option {
     render() {
         const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (h(Host, { key: '7b4a32ea1eec13bfbeca88e038d052ba88b109a0', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: '9fb687709d27e1ce24ced445d4f9d9e9c19a69e7', type: "checkmark" }), h("div", { key: '1fd40d00eaa09f012bba8afbe915cd53b1194cb6', class: "content" }, h("slot", { key: 'fa4756793e55a1152fdace4c80531d54a7e41bdc' }))));
+        return (h(Host, { key: '31957c36e0836d1f4936d8af97beb51335b4c6b9', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: 'c5e9eac9b66bb975b303c1184b06fd71718096f7', type: "checkmark" }), h("div", { key: 'c0ea2c0acd37626d90ad07908f7697fe7c1edc1e', class: "content" }, h("slot", { key: '7b19d2f5977b67cace150e51956121011e28c138' }))));
     }
     static get is() { return "q2-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-option/test/q2-option-test.e2e.js CHANGED Viewed

@@ -14,18 +14,6 @@ describe('q2-option', () => {
         const page = await setup({ html: '<q2-option></q2-option>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-option')).toHaveLength(0);
     });
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations with only label', async () => {
-            const page = await setup({
-                html: `<q2-select label="Test" value="option-1">
-                            <q2-option value="option-1" display="Option Text">Option Text</q2-option>
-                            <q2-option value="option-2" display="Option Text">Option Text</q2-option>
-                        </q2-select>`,
-            });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-    });
     describe('@Props', () => {
         describe('selected', () => {
             describe('when not provided', () => {
@@ -141,5 +129,33 @@ describe('q2-option', () => {
             });
         });
     });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({
+                    html: `<q2-select label="Test" value="option-1">
+                            <q2-option value="option-1" display="Option Text">Option Text</q2-option>
+                            <q2-option value="option-2" display="Option Text">Option Text</q2-option>
+                        </q2-select>`,
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+        });
+        describe('Accessibility Tree', () => {
+            it('is correctly represented in the accessibility tree', async () => {
+                page = await setup({
+                    html: `<q2-option>My Option</q2-option>`,
+                });
+                const accessibilitySnapshot = await page.accessibility.snapshot({
+                    root: await page.$('q2-option'),
+                });
+                expect(accessibilitySnapshot.role).toBe('option');
+                expect(accessibilitySnapshot.name).toBe('My Option');
+            });
+        });
+        describe('Keyboard Controls', () => { });
+        describe('Other', () => { });
+    });
 });
 //# sourceMappingURL=q2-option-test.e2e.js.map

package/dist/collection/components/q2-option/test/q2-option-test.e2e.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-option-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-option/test/q2-option-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { evaluateA11y, getListOfStyleCompilationIssues, setup } from '@/utils/helpers';\n\ndescribe('q2-option', () => {\n let page: E2EPage;\n let option: E2EElement;\n it('renders with default attributes', async () => {\n page = await setup({\n html: `<q2-option>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n expect(option).toEqualAttribute('role', 'option');\n expect(option).toEqualAttribute('tabindex', '-1');\n });\n\n it('properly compiles CSS vars and functions', async () => {\n const page = await setup({ html: '<q2-option></q2-option>' });\n expect(await getListOfStyleCompilationIssues(page, 'q2-option')).toHaveLength(0);\n });\n\n describe('[A11y] guideline compliance', () => {\n it('Does not have accessibility violations with only label', async () => {\n const page = await setup({\n html: `<q2-select label=\"Test\" value=\"option-1\">\n <q2-option value=\"option-1\" display=\"Option Text\">Option Text</q2-option>\n <q2-option value=\"option-2\" display=\"Option Text\">Option Text</q2-option>\n </q2-select>`,\n });\n const hasViolations = await evaluateA11y(page);\n expect(hasViolations).toBe(false);\n });\n });\n\n describe('@Props', () => {\n describe('selected', () => {\n describe('when not provided', () => {\n it('does not render checkmark icon and adds aria-selected=\"false\"', async () => {\n page = await setup({\n html: `<q2-option>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n const optionIcon = await page.find('q2-option >>> q2-icon[type=checkmark]');\n\n expect(option).toEqualAttribute('aria-selected', 'false');\n expect(optionIcon).toBeNull();\n });\n });\n\n describe('when provided', () => {\n it('renders with checkmark icon and adds aria-selected=\"true\"', async () => {\n page = await setup({\n html: `<q2-option selected>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n const optionIcon = await page.find('q2-option >>> q2-icon[type=checkmark]');\n\n expect(option).toEqualAttribute('aria-selected', 'true');\n expect(optionIcon).toBeTruthy();\n });\n });\n });\n\n describe('disabled', () => {\n describe('when not provided', () => {\n it('renders without aria-disabled attribute', async () => {\n page = await setup({\n html: `<q2-option>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n\n expect(option).not.toHaveAttribute('aria-disabled');\n });\n });\n\n describe('when provided', () => {\n it('renders with aria-disabled attribute', async () => {\n page = await setup({\n html: `<q2-option disabled>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n\n expect(option).toEqualAttribute('aria-disabled', 'true');\n });\n });\n });\n\n describe('disabledGroup', () => {\n describe('when not provided', () => {\n it('renders without aria-disabled attribute', async () => {\n page = await setup({\n html: `<q2-option>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n\n expect(option).not.toHaveAttribute('aria-disabled');\n });\n });\n\n describe('when provided', () => {\n it('renders with aria-disabled attribute', async () => {\n page = await setup({\n html: `<q2-option disabled-group>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n\n expect(option).toEqualAttribute('aria-disabled', 'true');\n });\n });\n });\n\n describe('_multiSelectHidden', () => {\n describe('when not provided', () => {\n it('renders without aria-hidden attribute', async () => {\n page = await setup({\n html: `<q2-option>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n\n expect(option).not.toHaveAttribute('aria-hidden');\n });\n });\n\n describe('when provided', () => {\n it('renders with aria-hidden attribute', async () => {\n page = await setup({\n html: `<q2-option _multiSelectHidden>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n\n expect(option).toEqualAttribute('aria-hidden', 'true');\n });\n });\n });\n\n describe('display', () => {\n describe('when not provided', () => {\n it('uses the text content as the display value', async () => {\n page = await setup({\n html: `<q2-option>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n expect(await option.getProperty('display')).toEqual('My Option');\n });\n\n describe('when multiline is provided', () => {\n it('does not use the text content as the display value', async () => {\n page = await setup({\n html: `<q2-option multiline>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n expect(await option.getProperty('display')).toBeUndefined();\n });\n });\n });\n\n describe('when provided', () => {\n it('renders with the provided display value', async () => {\n page = await setup({\n html: `<q2-option display=\"Foo\">My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n expect(await option.getProperty('display')).toEqual('Foo');\n });\n });\n });\n });\n});\n"]}
1	+ {"version":3,"file":"q2-option-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-option/test/q2-option-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { evaluateA11y, getListOfStyleCompilationIssues, setup } from '@/utils/helpers';\n\ndescribe('q2-option', () => {\n let page: E2EPage;\n let option: E2EElement;\n it('renders with default attributes', async () => {\n page = await setup({\n html: `<q2-option>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n expect(option).toEqualAttribute('role', 'option');\n expect(option).toEqualAttribute('tabindex', '-1');\n });\n\n it('properly compiles CSS vars and functions', async () => {\n const page = await setup({ html: '<q2-option></q2-option>' });\n expect(await getListOfStyleCompilationIssues(page, 'q2-option')).toHaveLength(0);\n });\n\n describe('@Props', () => {\n describe('selected', () => {\n describe('when not provided', () => {\n it('does not render checkmark icon and adds aria-selected=\"false\"', async () => {\n page = await setup({\n html: `<q2-option>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n const optionIcon = await page.find('q2-option >>> q2-icon[type=checkmark]');\n\n expect(option).toEqualAttribute('aria-selected', 'false');\n expect(optionIcon).toBeNull();\n });\n });\n\n describe('when provided', () => {\n it('renders with checkmark icon and adds aria-selected=\"true\"', async () => {\n page = await setup({\n html: `<q2-option selected>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n const optionIcon = await page.find('q2-option >>> q2-icon[type=checkmark]');\n\n expect(option).toEqualAttribute('aria-selected', 'true');\n expect(optionIcon).toBeTruthy();\n });\n });\n });\n\n describe('disabled', () => {\n describe('when not provided', () => {\n it('renders without aria-disabled attribute', async () => {\n page = await setup({\n html: `<q2-option>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n\n expect(option).not.toHaveAttribute('aria-disabled');\n });\n });\n\n describe('when provided', () => {\n it('renders with aria-disabled attribute', async () => {\n page = await setup({\n html: `<q2-option disabled>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n\n expect(option).toEqualAttribute('aria-disabled', 'true');\n });\n });\n });\n\n describe('disabledGroup', () => {\n describe('when not provided', () => {\n it('renders without aria-disabled attribute', async () => {\n page = await setup({\n html: `<q2-option>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n\n expect(option).not.toHaveAttribute('aria-disabled');\n });\n });\n\n describe('when provided', () => {\n it('renders with aria-disabled attribute', async () => {\n page = await setup({\n html: `<q2-option disabled-group>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n\n expect(option).toEqualAttribute('aria-disabled', 'true');\n });\n });\n });\n\n describe('_multiSelectHidden', () => {\n describe('when not provided', () => {\n it('renders without aria-hidden attribute', async () => {\n page = await setup({\n html: `<q2-option>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n\n expect(option).not.toHaveAttribute('aria-hidden');\n });\n });\n\n describe('when provided', () => {\n it('renders with aria-hidden attribute', async () => {\n page = await setup({\n html: `<q2-option _multiSelectHidden>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n\n expect(option).toEqualAttribute('aria-hidden', 'true');\n });\n });\n });\n\n describe('display', () => {\n describe('when not provided', () => {\n it('uses the text content as the display value', async () => {\n page = await setup({\n html: `<q2-option>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n expect(await option.getProperty('display')).toEqual('My Option');\n });\n\n describe('when multiline is provided', () => {\n it('does not use the text content as the display value', async () => {\n page = await setup({\n html: `<q2-option multiline>My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n expect(await option.getProperty('display')).toBeUndefined();\n });\n });\n });\n\n describe('when provided', () => {\n it('renders with the provided display value', async () => {\n page = await setup({\n html: `<q2-option display=\"Foo\">My Option</q2-option>`,\n });\n option = await page.find('q2-option');\n expect(await option.getProperty('display')).toEqual('Foo');\n });\n });\n });\n });\n\n describe('Accessibility', () => {\n describe('aXe DevTools', () => {\n it('does not have accessibility violations', async () => {\n const page = await setup({\n html: `<q2-select label=\"Test\" value=\"option-1\">\n <q2-option value=\"option-1\" display=\"Option Text\">Option Text</q2-option>\n <q2-option value=\"option-2\" display=\"Option Text\">Option Text</q2-option>\n </q2-select>`,\n });\n const hasViolations = await evaluateA11y(page);\n expect(hasViolations).toBe(false);\n });\n });\n describe('Accessibility Tree', () => {\n it('is correctly represented in the accessibility tree', async () => {\n page = await setup({\n html: `<q2-option>My Option</q2-option>`,\n });\n const accessibilitySnapshot = await page.accessibility.snapshot({\n root: await page.$('q2-option'),\n });\n expect(accessibilitySnapshot.role).toBe('option');\n expect(accessibilitySnapshot.name).toBe('My Option');\n });\n });\n describe('Keyboard Controls', () => {});\n describe('Other', () => {});\n });\n});\n"]}

package/dist/collection/components/q2-option-list/q2-option-list.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import sanitizeRegexString from "../../utils/sanitize-regex-string";
 import { h, Host, } from "@stencil/core";
 import { isEventFromElement, isVisible, loc, nextPaint, overrideFocus, waitForNextPaint } from "../../utils/index";
 export class Q2OptionList {
@@ -234,11 +235,12 @@ export class Q2OptionList {
             };
             const searchIndex = (list) => {
                 const keyStr = this.keyStore.queue.join('');
+                const sanitizedKeyStr = sanitizeRegexString(keyStr);
                 return list.find(v => {
                     return (!v.element.disabled &&
                         v.element.display &&
-                        (v.element.display.match(new RegExp(`^${keyStr}`, 'i')) ||
-                            v.element.display.replace(/\s/g, '').match(new RegExp(`^${keyStr}`, 'i'))));
+                        (v.element.display.match(new RegExp(`^${sanitizedKeyStr}`, 'i')) ||
+                            v.element.display.replace(/\s/g, '').match(new RegExp(`^${sanitizedKeyStr}`, 'i'))));
                 });
             };
             const setFocus = ({ index }) => {
@@ -533,7 +535,7 @@ export class Q2OptionList {
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: 'd0a9a9f08038a8856edbde465e82e5a48dd64925' }, h("div", { key: 'd6caf01cb66a3b2bbc063bfbf7b4f8968f7f5fd6', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '6c5c6d4ed0446dd8b92df50d568eadf5ba13100a', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '1ed18df8ed8e395511d1cb9078fcf6eefc886b67' })))));
+        return (h(Host, { key: '221e3d11f55902cd286a6f69cb1c30ce4cc3cb1c' }, h("div", { key: '5e08ad2fd5a1a773976285ad16f2e2ef6e2161be', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '537330008c139176aaa19ba997579e61f841fffb', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '9204233743b02ead43bbe4f9329973059af24414' })))));
     }
     static get is() { return "q2-option-list"; }
     static get encapsulation() { return "shadow"; }
@@ -664,7 +666,7 @@ export class Q2OptionList {
                     "references": {
                         "IOptionValue": {
                             "location": "local",
-                            "path": "/Users/achester/Code/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
                         }
                     }
@@ -736,7 +738,7 @@ export class Q2OptionList {
                     "references": {
                         "IOptionValue": {
                             "location": "local",
-                            "path": "/Users/achester/Code/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
                         }
                     }