Skip to content

ARIA headings, labels, and announcements #307

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ahamelers wants to merge 1 commit into from
Closed

ARIA headings, labels, and announcements #307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 19 additions & 16 deletions src/components/api-request.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ export default class ApiRequest extends LitElement {
}

return html`
<div class="table-title top-gap">${title}${paramLocation === 'path' ? html`<span style='color:var(--red);'>*</span>` : ''}</div>
<div class="table-title top-gap" role="heading" aria-level="${this.renderStyle === 'focused' ? 4 : 5}">${title}${paramLocation === 'path' ? html`<span style='color:var(--red);'>*</span>` : ''}</div>
<div style="display:block; overflow-x:auto; max-width:100%;">
<table role="presentation" class="m-table" style="width:100%; word-break:break-word;">
${tableRows}
Expand Down Expand Up @@ -627,18 +627,21 @@ export default class ApiRequest extends LitElement {
${!hasResponse ? '' : html`<button class="m-btn" part="btn btn-outline" @click="${this.clearResponseData}">${getI18nText('operations.clear-response')}</button>`}
</div>
<div class="tab-panel col" style="border-width:0 0 1px 0;">
<div id="tab_buttons" class="tab-buttons row" @click="${(e) => {
if (e.target.classList.contains('tab-btn') === false) { return; }
this.activeResponseTab = e.target.dataset.tab;
}}">
<br>
<div style="width: 100%">
<button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab = 'curl'>${getI18nText('operations.request')}</button>
${!hasResponse ? '' : html`
<button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab = 'response'>${getI18nText('operations.response')}</button>
<button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab = 'headers'>${getI18nText('operations.response-headers')}</button>`
}
</div>
${hasResponse
? html`
<div id="tab_buttons" class="tab-buttons row" role="group" @click="${(e) => {
if (e.target.classList.contains('tab-btn') === false) { return; }
this.activeResponseTab = e.target.dataset.tab;
}}">
<button class="tab-btn ${this.activeResponseTab === 'curl' ? 'active' : ''}" aria-current="${this.activeResponseTab === 'curl'}" data-tab = 'curl'>${getI18nText('operations.request')}</button>
<button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" aria-current="${this.activeResponseTab === 'response'}" data-tab = 'response'>${getI18nText('operations.response')}</button>
<button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" aria-current="${this.activeResponseTab === 'headers'}" data-tab = 'headers'>${getI18nText('operations.response-headers')}</button>
</div>`
: html`
<div id="tab_buttons" class="tab-buttons row">
<div class="tab-btn active" role="heading" aria-level="${this.renderStyle === 'focused' ? 4 : 5}" data-tab = 'curl'>${getI18nText('operations.request')}</div>
</div>`
}
</div>
${this.responseIsBlob
? html`
Expand All @@ -659,14 +662,14 @@ export default class ApiRequest extends LitElement {
</div>`
: html`
<div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};" >
<syntax-highlighter style="min-height: 60px" mime-type="${this.responseContentType}" .content="${this.responseText}"/>
<syntax-highlighter style="min-height: 60px" mime-type="${this.responseContentType}" .content="${this.responseText}" aria-label="Response text"/>
</div>`
}
<div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};" >
<syntax-highlighter style="min-height: 60px" language="http" .content="${this.responseHeaders}"/>
<syntax-highlighter style="min-height: 60px" language="http" .content="${this.responseHeaders}" aria-label="Response headers"/>
</div>
<div class="tab-content m-markdown col" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'};">
<syntax-highlighter style="min-height: 60px" language="shell" .content="${curlSyntax.trim()}"/>
<syntax-highlighter style="min-height: 60px" language="shell" .content="${curlSyntax.trim()}" aria-label="Request example"/>
</div>
</div>`;
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/api-response.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ export default class ApiResponse extends LitElement {
? html`
${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? html`<div style="padding: 4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''}
${mimeRespDetails.examples[0].exampleDescription ? html`<div class="m-markdown-small" style="padding: 4px 0"> ${unsafeHTML(toMarkdown(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''}
<syntax-highlighter class='example-panel generic-tree pad-top-8' mime-type="${mimeRespDetails.examples[0].exampleType}" .content="${mimeRespDetails.examples[0].exampleValue}"/>`
<syntax-highlighter class='example-panel generic-tree pad-top-8' mime-type="${mimeRespDetails.examples[0].exampleType}" .content="${mimeRespDetails.examples[0].exampleValue}" aria-label="Response example"/>`
: html`
<span class = 'example-panel generic-tree ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}'>
<select aria-label='response body example' @change='${(e) => this.onSelectExample(e)}'>
Expand All @@ -287,7 +287,7 @@ export default class ApiResponse extends LitElement {
<div class="example" data-example = '${v.exampleId}' style = "display: ${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}">
${v.exampleSummary && v.exampleSummary.length > 80 ? html`<div style="padding: 4px 0"> ${v.exampleSummary} </div>` : ''}
${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? html`<div class="m-markdown-small" style="padding: 4px 0"> ${unsafeHTML(toMarkdown(v.exampleDescription || ''))} </div>` : ''}
<syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}"/>
<syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}" aria-label="Response example"/>
</div>
`)}
</span>
Expand Down
2 changes: 1 addition & 1 deletion src/components/request-form-table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
${data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION')
? html`<span class="xxx-of-key">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>`
: isRequired
? html`<span class="key-label requiredStar" style="display:inline-block;" title="Required">${keyLabel}</span>`
? html`<span class="key-label requiredStar" style="display:inline-block;" role="img" aria-label=" (Required)" title="Required">${keyLabel}</span>`
: html`<span class="key-label" style="display:inline-block;">${keyLabel === '::props' ? '' : keyLabel}</span>`
}
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/schema-tree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@ export default class SchemaTree extends LitElement {
? ''
: schemaLevel > 0
? html`<span class="key-label">
${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? html`<span class="requiredStar" title="Required"></span>` : ''}:
${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? html`<span class="requiredStar" role="img" aria-label=" (Required)" title="Required"></span>` : ''}:
</span>`
: ''
}
Expand Down Expand Up @@ -296,7 +296,7 @@ export default class SchemaTree extends LitElement {
<div class="tr">
<div class="td key ${deprecated ? 'deprecated' : ''}" style='min-width:${minFieldColWidth}px'>
${keyLabel.endsWith('*')
? html`<span class="key-label requiredStar" title="Required">${keyLabel.substring(0, keyLabel.length - 1)}</span>:`
? html`<span class="key-label requiredStar" role="img" aria-label=" (Required)" title="Required">${keyLabel.substring(0, keyLabel.length - 1)}</span>:`
: key.startsWith('::OPTION')
? html`<span class='key-label xxx-of-key'>${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>`
: schemaLevel > 0
Expand Down
9 changes: 6 additions & 3 deletions src/components/syntax-highlighter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ class SyntaxHighlighter extends LitElement {
content: { type: Object },
language: { type: String, attribute: 'language' },
mimeType: { type: String, attribute: 'mime-type' },
label: { type: String, attribute: 'aria-label' },
};
}

Expand Down Expand Up @@ -96,7 +97,7 @@ class SyntaxHighlighter extends LitElement {
}

render() {
return this.renderCopyWrapper(this.renderHighlight());
return this.renderCopyWrapper(this.renderHighlight(), this.label?.toLowerCase());
}

/**
Expand All @@ -123,11 +124,13 @@ class SyntaxHighlighter extends LitElement {
* @param {*} content Content
* @returns Content
*/
renderCopyWrapper(content) {
renderCopyWrapper(content, label) {
return html`<div class="fs-exclude ph-no-capture" data-hj-suppress data-sl="mask" style="min-height: 2rem;">
<button
class="m-btn outline-primary toolbar-copy-btn"
@click='${this.copyToClipboard}'
@click='${this.copyToClipboard}'
aria-label="Copy ${label}"
aria-live="polite"
part="btn btn-fill btn-copy">${getI18nText('operations.copy')}</button>
${content}
</div>`;
Expand Down
16 changes: 8 additions & 8 deletions src/templates/security-scheme-template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,7 @@ function renderSecurityScheme(v) {
: html`Sends the <code>Authorization header</code> containing the token type <code style="text-transform: capitalize;">${v.scheme || 'bearer'}</code> followed by the <code>${v.bearerFormat ?? 'Token'}</code> string.`
}
</div>
<form style="height: 50px; margin-top: 1rem; padding: 10px 0; margin-bottom: 10px;">
<form style="height: 50px; margin-top: 1rem; padding: 10px 0; margin-bottom: 10px;" aria-live="polite">
${v.in === 'cookie'
? html`
<div style="display: block">
Expand All @@ -343,7 +343,7 @@ function renderSecurityScheme(v) {
</small>
</div>`
: !v.finalKeyValue ? html`
<input autocomplete="on" name="api-key" type="text" value="${v.value}" placeholder="${v.bearerFormat ?? 'api-token'}"
<input autocomplete="on" name="api-key" type="text" value="${v.value}" aria-label="${v.bearerFormat ?? 'API token'}"
spellcheck="false" class="api-key-input fs-exclude ph-no-capture" data-hj-suppress data-sl="mask">
<button type="submit" class="m-btn thin-border" style = "margin-left:5px;"
part = "btn btn-outline"
Expand All @@ -363,7 +363,7 @@ function renderSecurityScheme(v) {
code { font-weight: bold; }
</style>
<div style="padding-top: 1rem">${unsafeHTML(getI18nText('authentication.http-basic-desc'))}</div>
<div style="height: 50px; margin-top: 1rem; padding: 10px 0; margin-bottom: 10px;">
<div style="height: 50px; margin-top: 1rem; padding: 10px 0; margin-bottom: 10px;" aria-role="status">
<span class="blue-text" style="margin-right: 1rem">Key Applied</span>
<button class="m-btn thin-border small" part="btn btn-outline" @click=${() => { v.finalKeyValue = ''; this.requestUpdate(); }}>${getI18nText('authentication.remove')}</button>
</div>`;
Expand Down Expand Up @@ -407,7 +407,7 @@ export default function securitySchemeTemplate() {
<slot name="authentication-header">
<div class="sub-title regular-font" role="heading" aria-level="2">${getI18nText('headers.authentication')}</div>
</slot>
<div class="small-font-size" style="display:flex; align-items: center; min-height:40px">
<div class="small-font-size" style="display:flex; align-items: center; min-height:40px" aria-role="status">
${providedApiKeys.length > 0
? html`
<div class="blue-text"> ${providedApiKeys.length} API key applied </div>
Expand Down Expand Up @@ -498,20 +498,20 @@ export function pathSecurityTemplate(pathSecurityOptions) {
securityDefs: andSecurityKeys1,
});
});
return html`<div class="security-info-button" data-content-id='auth' @click='${(e) => this.scrollToEventTarget(e, false)}'>
return html`<div class="security-info-button">
<div style="position:relative; display:flex; min-width:350px; max-width:700px; justify-content: flex-end;">
<svg width="16" height="24" style="cursor: pointer;">
<svg width="16" height="24" style="cursor: pointer;" role="img" aria-label="Security">
<g>
<path style="fill: var(--fg3)" d="m13.8,8.5l0,-2.6l0,0c0,-3.2 -2.6,-5.8 -5.8,-5.8s-5.8,2.6 -5.8,5.8l0,0l0,2.6l-2.1,0l0,11.2l16,0l0,-11.2l-2.1,0l-0,0l0,0l0,0l-0,0zm-9.8,-2.6c0,0 0,0 0,0c0,-2.2 1.8,-4 4,-4c2.2,0 4,1.8 4,4c0,0 0,0 0,0l0,2.6l-8.03,0l0,-2.6l0,0l0,0z" />
</g>
</svg>
${orSecurityKeys1.map((orSecurityItem1, i) => html`
${i !== 0 ? html`<div style="padding:3px 4px;"> OR </div>` : ''}
<div class="security-tooltip tooltip" style="cursor: pointer;">
<div class="security-tooltip tooltip" style="cursor: pointer;" aria-describedby="tooltip-security-info" data-content-id="auth" role="link" tabindex="0" @click='${(e) => this.scrollToEventTarget(e, false)}' @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}">
<div style="padding:2px 4px; white-space:nowrap; text-overflow:ellipsis;max-width:150px; overflow:hidden;">
<span part="anchor anchor-operation-security"> ${orSecurityItem1.securityTypes} </span>
</div>
<div class="tooltip-text" style="position:absolute; color: var(--fg); top:26px; right:0; border:1px solid var(--border-color);padding:2px 4px; display:block;">
<div class="tooltip-text" id="tooltip-security-info" role="tooltip" style="position:absolute; color: var(--fg); top:26px; right:0; border:1px solid var(--border-color);padding:2px 4px; display:block;">
${orSecurityItem1.securityDefs.length > 1 ? html`<div>Requires <b>all</b> of the following </div>` : ''}
<div style="padding-left: 8px">
${orSecurityItem1.securityDefs.map((andSecurityItem, j) => html`
Expand Down
4 changes: 2 additions & 2 deletions src/templates/server-template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,8 @@ export default function serverTemplate() {
}
return html`
<section id = 'servers' part="section-servers" style="margin-top:24px; margin-bottom:24px;" class='regular-font observe-me section-padding ${this.renderStyle === 'read' ? 'section-gap--read-mode' : (this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap')}'>
<div class = 'sub-title' role="heading" aria-level="2">${getI18nText('headers.api-servers')}</div>
<div class = 'mono-font' style='margin: 12px 0; font-size:calc(var(--font-size-small) + 1px);'>
<div class = 'sub-title' role="heading" aria-level="2" id="servers-title">${getI18nText('headers.api-servers')}</div>
<div class = 'mono-font' style='margin: 12px 0; font-size:calc(var(--font-size-small) + 1px);' role='radiogroup' aria-labelledby='servers-title'>
${!this.resolvedSpec.servers || !this.resolvedSpec.servers.length
? ''
: html`
Expand Down
Loading