Skip to content

Commit 0fc8f07

Browse files
committed
fix: fixsing a11y issues after an audit
Signed-off-by: Pawel Psztyc <[email protected]>
1 parent cc6c11b commit 0fc8f07

File tree

5 files changed

+64
-5
lines changed

5 files changed

+64
-5
lines changed

package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@api-components/amf-components",
33
"description": "A set of web components based on LitElement that creates the visualization layer on top of the AMF's graph model.",
4-
"version": "1.0.0-beta.3",
4+
"version": "1.0.0-beta.4",
55
"license": "Apache-2.0",
66
"main": "index.js",
77
"module": "index.js",

src/elements/ApiRequestEditorElement.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1696,9 +1696,14 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(EventsTar
16961696
const qp = [];
16971697
/** @type OperationParameter[] */
16981698
const path = [];
1699+
// NOTE, the "* Required field" has been added after the a11y audit of API Console.
1700+
let hasRequired = false;
16991701
this.parametersValue.forEach((item) => {
1702+
if (!hasRequired && item.parameter && item.parameter.required) {
1703+
hasRequired = true;
1704+
}
17001705
if (item.binding === 'query') {
1701-
qp.push(item)
1706+
qp.push(item);
17021707
} else if (item.binding === 'path') {
17031708
path.push(item);
17041709
}
@@ -1715,6 +1720,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(EventsTar
17151720
return html`
17161721
<section class="params-section parameter">
17171722
<div class="section-title"><span class="label">Parameters</span></div>
1723+
${hasRequired ? html`<p class="required-field">* Required field</p>` : ''}
17181724
<div class="path-params">
17191725
${path.map(param => this.parameterTemplate(param, pathOptions))}
17201726
</div>
@@ -1728,7 +1734,17 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(EventsTar
17281734
}
17291735

17301736
[headersTemplate]() {
1731-
const headers = this.parametersValue.filter(item => item.binding === 'header');
1737+
const headers = /** @type OperationParameter[] */ ([]);
1738+
// NOTE, the "* Required field" has been added after the a11y audit of API Console.
1739+
let hasRequired = false;
1740+
this.parametersValue.forEach((item) => {
1741+
if (item.binding === 'header') {
1742+
headers.push(item);
1743+
if (!hasRequired && item.parameter && item.parameter.required) {
1744+
hasRequired = true;
1745+
}
1746+
}
1747+
});
17321748
const { allowCustom, openedOptional=[] } = this;
17331749
if (!allowCustom && !headers.length) {
17341750
return '';
@@ -1740,6 +1756,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(EventsTar
17401756
return html`
17411757
<section class="params-section header">
17421758
<div class="section-title"><span class="label">Headers</span></div>
1759+
${hasRequired ? html`<p class="required-field">* Required field</p>` : ''}
17431760
${this[toggleOptionalTemplate]('header', headers)}
17441761
<div class="${classMap(classes)}">
17451762
${headers.map(param => this.parameterTemplate(param))}

src/elements/styles/Editor.styles.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,4 +149,10 @@ api-url-editor {
149149
flex: 1;
150150
margin: 0;
151151
}
152+
153+
.required-field {
154+
font-size: small;
155+
margin: var(--arc-font-required-field-margin, 2px 8px);
156+
color: var(--arc-font-required-field-color, inherit);
157+
}
152158
`;

test/http-request/ApiRequestEditorElement.test.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1454,4 +1454,40 @@ describe('ApiRequestEditorElement', () => {
14541454
});
14551455
});
14561456
});
1457+
1458+
describe('a11y', () => {
1459+
/** @type AmfDocument */
1460+
let model;
1461+
before(async () => {
1462+
model = await loader.getGraph();
1463+
store.amf = model;
1464+
});
1465+
1466+
// this is result of the a11y audit on API Console
1467+
it('renders the * Required field label when has required query', async () => {
1468+
const method = loader.lookupOperation(model, '/query-params/string', 'get');
1469+
const element = await modelFixture(method['@id']);
1470+
const section = element.shadowRoot.querySelector('.params-section.parameter');
1471+
const label = section.querySelector('.required-field');
1472+
assert.ok(label, 'has the label');
1473+
});
1474+
1475+
// this is result of the a11y audit on API Console
1476+
it('does not render the * Required field label when has required header', async () => {
1477+
const method = loader.lookupOperation(model, '/required-headers', 'get');
1478+
const element = await modelFixture(method['@id']);
1479+
const section = element.shadowRoot.querySelector('.params-section.header');
1480+
const label = section.querySelector('.required-field');
1481+
assert.ok(label, 'has the label');
1482+
});
1483+
1484+
// this is result of the a11y audit on API Console
1485+
it('does not render the * Required field label when has no required header', async () => {
1486+
const method = loader.lookupOperation(model, '/optional-headers', 'get');
1487+
const element = await modelFixture(method['@id']);
1488+
const section = element.shadowRoot.querySelector('.params-section.header');
1489+
const label = section.querySelector('.required-field');
1490+
assert.notOk(label, 'has no label');
1491+
});
1492+
});
14571493
});

0 commit comments

Comments
 (0)