@lion/field - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [0.6.1](https://github.com/ing-bank/lion/compare/@lion/field@0.6.0...@lion/field@0.6.1) (2019-11-26)
+
+
+### Bug Fixes
+
+* **field:** aria ordering within a FormControl ([73e9dc5](https://github.com/ing-bank/lion/commit/73e9dc5849bbafff8ab7a63ddfb86afd3f1f1791))
+
+
+
+
+
 # [0.6.0](https://github.com/ing-bank/lion/compare/@lion/field@0.5.0...@lion/field@0.6.0) (2019-11-22)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@lion/field",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Fields are the most fundamental building block of the Form System",
@@ -45,3 +45,3 @@ "author": "ing-bank",
   },
-  "gitHead": "3cd6c43e9a24f15b9f87c1761f71573f55f2985e"
+  "gitHead": "8db04b8bab3a0c8a01bc2d5110d4e38fe01ae1e7"
 }

src/FormControlMixin.js

@@ -189,4 +189,6 @@ import { html, css, nothing, dedupeMixin, SlotMixin } from '@lion/core';
           if (reorder) {
+            const insideNodes = nodes.filter(n => this.contains(n));
+            const outsideNodes = nodes.filter(n => !this.contains(n));
             // eslint-disable-next-line no-param-reassign
-            nodes = getAriaElementsInRightDomOrder(nodes);
+            nodes = [...getAriaElementsInRightDomOrder(insideNodes), ...outsideNodes];
           }
@@ -468,3 +470,8 @@ const string = nodes.map(n => n.id).join(' ');
        */
-      addToAriaLabelledBy(element, { idPrefix, reorder } = { reorder: true }) {
+      addToAriaLabelledBy(element, customConfig = {}) {
+        const { idPrefix, reorder } = {
+          reorder: true,
+          ...customConfig,
+        };
+
         // eslint-disable-next-line no-param-reassign
@@ -483,3 +490,9 @@ element.id = element.id || `${idPrefix}-${this._inputId}`;
        */
-      addToAriaDescribedBy(element, { idPrefix, reorder } = { reorder: true }) {
+      addToAriaDescribedBy(element, customConfig = {}) {
+        const { idPrefix, reorder } = {
+          // chronologically sorts children of host element('this')
+          reorder: true,
+          ...customConfig,
+        };
+
         // eslint-disable-next-line no-param-reassign
@@ -486,0 +499,0 @@ element.id = element.id || `${idPrefix}-${this._inputId}`;

test/FormControlMixin.test.js

@@ -65,3 +65,45 @@ import { expect, fixture, html, defineCE, unsafeStatic } from '@open-wc/testing';
 
-  it('adds aria-live="politie" to the feedback slot', async () => {
+  it('internally sorts aria-describedby and aria-labelledby ids', async () => {
+    const wrapper = await fixture(html`
+      <div id="wrapper">
+        <div id="additionalLabelA">should go after input internals</div>
+        <div id="additionalDescriptionA">should go after input internals</div>
+        <${tag}>
+          <input slot="input" />
+          <label slot="label">Added to label by default</label>
+          <div slot="feedback">Added to description by default</div>
+        </${tag}>
+        <div id="additionalLabelB">should go after input internals</div>
+        <div id="additionalDescriptionB">should go after input internals</div>
+      </div>`);
+    const el = wrapper.querySelector(elem);
+
+    const { _inputNode } = el;
+    console.log('_inputNode', _inputNode);
+
+    // 1. addToAriaLabelledBy()
+    // external inputs should go in order defined by user
+    el.addToAriaLabelledBy(wrapper.querySelector('#additionalLabelB'));
+    el.addToAriaLabelledBy(wrapper.querySelector('#additionalLabelA'));
+
+    expect(
+      _inputNode.getAttribute('aria-labelledby').indexOf(`label-${el._inputId}`) <
+        _inputNode.getAttribute('aria-labelledby').indexOf('additionalLabelB') <
+        _inputNode.getAttribute('aria-labelledby').indexOf('additionalLabelA'),
+    );
+
+    // 2. addToAriaDescribedBy()
+    // Check if the aria attr is filled initially
+    el.addToAriaDescribedBy(wrapper.querySelector('#additionalDescriptionB'));
+    el.addToAriaDescribedBy(wrapper.querySelector('#additionalDescriptionA'));
+
+    // Should be placed in the end
+    expect(
+      _inputNode.getAttribute('aria-describedby').indexOf(`feedback-${el._inputId}`) <
+        _inputNode.getAttribute('aria-describedby').indexOf('additionalDescriptionB') <
+        _inputNode.getAttribute('aria-describedby').indexOf('additionalDescriptionA'),
+    );
+  });
+
+  it('adds aria-live="polite" to the feedback slot', async () => {
     const lionField = await fixture(html`
@@ -68,0 +110,0 @@ <${tag}>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

215216

increased by1.18%

Lines of code

3064

increased by1.56%

No dependency changes