fix: fixsing a11y issues after an audit

Signed-off-by: Pawel Psztyc <[email protected]>

Author: jarrodek

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/amf-components",
   "description": "A set of web components based on LitElement that creates the visualization layer on top of the AMF's graph model.",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

package.json

@@ -1696,9 +1696,14 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(EventsTar
     const qp = [];
     /** @type OperationParameter[] */
     const path = [];
+    // NOTE, the "* Required field" has been added after the a11y audit of API Console.
+    let hasRequired = false;
     this.parametersValue.forEach((item) => {
+      if (!hasRequired && item.parameter && item.parameter.required) {
+        hasRequired = true;
+      }
       if (item.binding === 'query') {
-        qp.push(item)
+        qp.push(item);
       } else if (item.binding === 'path') {
         path.push(item);
       }
@@ -1715,6 +1720,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(EventsTar
     return html`
     <section class="params-section parameter">
       <div class="section-title"><span class="label">Parameters</span></div>
+      ${hasRequired ? html`<p class="required-field">* Required field</p>` : ''}
       <div class="path-params">
         ${path.map(param => this.parameterTemplate(param, pathOptions))}
       </div>
@@ -1728,7 +1734,17 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(EventsTar
   }
 
   [headersTemplate]() {
-    const headers = this.parametersValue.filter(item => item.binding === 'header');
+    const headers = /** @type OperationParameter[] */ ([]);
+    // NOTE, the "* Required field" has been added after the a11y audit of API Console.
+    let hasRequired = false;
+    this.parametersValue.forEach((item) => {
+      if (item.binding === 'header') {
+        headers.push(item);
+        if (!hasRequired && item.parameter && item.parameter.required) {
+          hasRequired = true;
+        }
+      }
+    });
     const { allowCustom, openedOptional=[] } = this;
     if (!allowCustom && !headers.length) {
       return '';
@@ -1740,6 +1756,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(EventsTar
     return html`
     <section class="params-section header">
       <div class="section-title"><span class="label">Headers</span></div>
+      ${hasRequired ? html`<p class="required-field">* Required field</p>` : ''}
       ${this[toggleOptionalTemplate]('header', headers)}
       <div class="${classMap(classes)}">
         ${headers.map(param => this.parameterTemplate(param))}

src/elements/ApiRequestEditorElement.js

@@ -149,4 +149,10 @@ api-url-editor {
   flex: 1;
   margin: 0;
 }
+
+.required-field {
+  font-size: small;
+  margin: var(--arc-font-required-field-margin, 2px 8px);
+  color: var(--arc-font-required-field-color, inherit);
+}
 `;

src/elements/styles/Editor.styles.js

@@ -1454,4 +1454,40 @@ describe('ApiRequestEditorElement', () => {
       });
     });
   });
+
+  describe('a11y', () => {
+    /** @type AmfDocument */
+    let model;
+    before(async () => {
+      model = await loader.getGraph();
+      store.amf = model;
+    });
+
+    // this is result of the a11y audit on API Console
+    it('renders the * Required field label when has required query', async () => {
+      const method = loader.lookupOperation(model, '/query-params/string', 'get');
+      const element = await modelFixture(method['@id']);
+      const section = element.shadowRoot.querySelector('.params-section.parameter');
+      const label = section.querySelector('.required-field');
+      assert.ok(label, 'has the label');
+    });
+
+    // this is result of the a11y audit on API Console
+    it('does not render the * Required field label when has required header', async () => {
+      const method = loader.lookupOperation(model, '/required-headers', 'get');
+      const element = await modelFixture(method['@id']);
+      const section = element.shadowRoot.querySelector('.params-section.header');
+      const label = section.querySelector('.required-field');
+      assert.ok(label, 'has the label');
+    });
+
+    // this is result of the a11y audit on API Console
+    it('does not render the * Required field label when has no required header', async () => {
+      const method = loader.lookupOperation(model, '/optional-headers', 'get');
+      const element = await modelFixture(method['@id']);
+      const section = element.shadowRoot.querySelector('.params-section.header');
+      const label = section.querySelector('.required-field');
+      assert.notOk(label, 'has no label');
+    });
+  });
 });