Skip to content

Fix keyboard navigation and form input label accessibility issues #275

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

Merged
wparad merged 20 commits into from
May 13, 2025
Merged

Fix keyboard navigation and form input label accessibility issues #275

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
26754ba
navigate via keyboard and show focus
ahamelers May 11, 2025
edd3070
pages should have level-one headings
ahamelers May 11, 2025
3b652f4
landmark should have accessible name
ahamelers May 11, 2025
af5eb3f
form inputs must have labels
ahamelers May 11, 2025
b806b0a
Update src/components/api-request.js
ahamelers May 12, 2025
abfbe36
I18n labels
ahamelers May 12, 2025
a131037
move style to nav
ahamelers May 12, 2025
c34dddf
remove primary button hover style
ahamelers May 12, 2025
d27c15d
fix unselectable request body
ahamelers May 12, 2025
76acc7f
Adding missing labels.
wparad May 13, 2025
8a74fae
Reduce complexity of color changes for tab and button selection.
wparad May 13, 2025
0380a09
Remove Space so nav links are only triggerable by Enter for now.
wparad May 13, 2025
536ffa4
remove array includes for single match
ahamelers May 13, 2025
2d6ec86
linting
ahamelers May 13, 2025
0284356
fix mismatched closing tag
ahamelers May 13, 2025
d8a57d0
additional I18n phrases
ahamelers May 13, 2025
2c546f7
missed import
ahamelers May 13, 2025
f977c3a
one more I18n
ahamelers May 13, 2025
0dfa4bd
additional heading levels
ahamelers May 13, 2025
79048a4
aria tagging for tab buttons
ahamelers May 13, 2025
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
6 changes: 5 additions & 1 deletion src/components/api-request.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export default class ApiRequest extends LitElement {
return html`
<tr>
<td colspan="1" style="width:160px; min-width:50px; vertical-align: top">
<div class="param-name ${generatedParamSchema.deprecated ? 'deprecated' : ''}" style="margin-top: 1rem;">
<div class="param-name ${generatedParamSchema.deprecated ? 'deprecated' : ''}" style="margin-top: 1rem;" id="request-${paramName}">
Comment thread
ahamelers marked this conversation as resolved.
Outdated
${paramName}${!generatedParamSchema.deprecated && paramRequired ? html`<span style='color:var(--red);'>*</span>` : ''}
</div>
<div class="param-type" style="margin-bottom: 1rem;">
Expand All @@ -175,6 +175,7 @@ export default class ApiRequest extends LitElement {
<tag-input class="request-param"
autocomplete="on"
id = "request-param-${paramName}"
aria-labelledby = "request-${paramName}"
Comment thread
wparad marked this conversation as resolved.
Outdated
style = "width:100%;"
data-ptype = "${paramLocation}"
data-pname = "${paramName}"
Expand All @@ -190,6 +191,7 @@ export default class ApiRequest extends LitElement {
<textarea
autocomplete="on"
id = "request-param-${paramName}"
aria-labelledby = "request-${paramName}"
@input="${() => { this.computeCurlSyntax(); }}"
class = "textarea small request-param"
part = "textarea small textarea-param"
Expand Down Expand Up @@ -219,6 +221,7 @@ export default class ApiRequest extends LitElement {
<input type="${generatedParamSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%; margin-top: 1rem; margin-bottom: 1rem;"
autocomplete="on"
id="request-param-${paramName}"
aria-labelledby = "request-${paramName}"
@input="${() => { this.computeCurlSyntax(); }}"
placeholder="${generatedParamSchema.example || defaultVal || ''}"
class="request-param"
Expand Down Expand Up @@ -493,6 +496,7 @@ export default class ApiRequest extends LitElement {
@input="${() => { this.computeCurlSyntax(); }}"
class = "textarea request-body-param-user-input"
part = "textarea textarea-param"
aria-label = "Request body"
Comment thread
ahamelers marked this conversation as resolved.
Outdated
spellcheck = "false"
data-ptype = "${reqBody.mimeType}"
data-default = "${displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)}"
Expand Down
19 changes: 17 additions & 2 deletions src/styles/input-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ export default css`
background-color: var(--primary-color);
color: var(--primary-btn-text-color);
}
.m-btn.primary:hover,
.m-btn.primary:focus-visible {
color: var(--primary-color);
background-color: var(--primary-btn-text-color);
}
Comment thread
ahamelers marked this conversation as resolved.
Outdated
.m-btn.outline-primary {
color: var(--primary-color);
background-color: var(--bg);
Expand All @@ -37,12 +42,14 @@ export default css`
.m-btn.small { padding:5px 12px; }
.m-btn.tiny { padding:5px 6px; }
.m-btn.circle { border-radius: 50%; }
.m-btn:hover {
.m-btn:hover,
.m-btn:focus-visible {
background-color: var(--primary-color);
color: var(--primary-btn-text-color);
}
.m-btn.nav { border: 2px solid var(--secondary-color); }
.m-btn.nav:hover {
.m-btn.nav:hover,
.m-btn.nav:focus-visible {
background-color: var(--secondary-color);
}
.m-btn:disabled{
Expand Down Expand Up @@ -111,6 +118,14 @@ input[type="password"]:active {
border:1px solid var(--primary-color);
}

a:focus-visible,
section .nav-bar-path:focus-visible span {
outline:thin solid var(--secondary-color);
}
section .nav-bar-path:focus-visible span {
outline-offset: 2px;
}

Comment thread
wparad marked this conversation as resolved.
Outdated
input[type="file"]{
font-family: var(--font-regular);
padding:2px;
Expand Down
14 changes: 14 additions & 0 deletions src/styles/nav-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,15 +141,29 @@ export default css`
background-color: var(--nav-hover-bg-color);
}

.nav-bar-h1:focus-visible,
.nav-bar-h2:focus-visible,
.nav-bar-info:focus-visible, slot[name=nav-section]::slotted(*:focus-visible),
.nav-bar-tag:focus-visible,
.nav-bar-path:focus-visible,
.nav-bar-h1:hover,
.nav-bar-h2:hover,
.nav-bar-info:hover, slot[name=nav-section]::slotted(*:hover),
.nav-bar-tag:hover,
.nav-bar-path:hover {
outline: none;
color:var(--nav-hover-text-color);
background-color:var(--nav-hover-bg-color);
}

.nav-bar-h1.active:focus-visible,
.nav-bar-h2.active:focus-visible,
.nav-bar-info.active:focus-visible, slot[name=nav-section]::slotted(*.active:focus-visible),
.nav-bar-tag.active:focus-visible,
.nav-bar-path.active:focus-visible {
outline:thin solid var(--secondary-color);
}

.conditional-custom-section.custom-section::slotted(*) {
display: none;
}
Expand Down
9 changes: 9 additions & 0 deletions src/styles/tab-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,15 @@ export default css`
.tab-btn:hover {
color:var(--primary-color);
}
.tab-btn.active:hover {
color:var(--secondary-color);
}
Comment thread
wparad marked this conversation as resolved.
Outdated

.tab-btn:focus-visible {
outline:thin solid var(--secondary-color);
outline-offset: -2px;
}

.tab-content {
position:relative;
}
Expand Down
2 changes: 1 addition & 1 deletion src/templates/components-template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export default function componentsTemplate() {
const componentInfo = getComponentInfo(component.componentKeyId);
return html`
<div id="cmp--${componentInfo.name.toLowerCase()}" class='regular-font section-gap--focused-mode observe-me' style="padding-bottom: 0">
<div class="title tag">${componentInfo.name}</div>
<div class="title tag" role="heading" aria-level="1">${componentInfo.name}</div>
<div class="regular-font-size">
${unsafeHTML(`<div class='m-markdown regular-font'>${toMarkdown(componentInfo.description ? componentInfo.description : '')}</div>`)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/templates/endpoint-template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ function endpointBodyTemplate(path) {
<div class='endpoint-body ${path.method}'>
<div class="summary">
${this.usePathInNavBar
? path.summary ? html`<div class="title">${path.summary}<div>` : path.shortSummary !== path.description ? html`<div class="title">${path.shortSummary}</div>` : ''
? path.summary ? html`<div class="title" role="heading" aria-level="1">${path.summary}<div>` : path.shortSummary !== path.description ? html`<div class="title" role="heading" aria-level="1">${path.shortSummary}</div>` : ''
: html`
<div class='title mono-font regular-font-size' part="section-operation-url" style='display: flex; flex-wrap: wrap; color:var(--fg3)'>
${path.isWebhook ? html`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''}
Expand Down
8 changes: 4 additions & 4 deletions src/templates/expanded-endpoint-template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function expandedEndpointBodyTemplate(path, tag) {
${this.renderStyle === 'read' ? html`<div class='divider' part="operation-divider"></div>` : ''}
<div class='expanded-endpoint-body observe-me ${path.method}' part="section-operation ${path.elementId}" id='${path.elementId}'>
${(this.renderStyle === 'focused' && tag && tag.name !== 'General ⦂')
? html`<div class="title tag-link" data-content-id="${tag.elementId}" @click="${(e) => this.scrollToEventTarget(e, false)}"> ${tag?.name} </h2>`
? html`<div class="title tag-link" role="heading" aria-level="1" data-content-id="${tag.elementId}" @click="${(e) => this.scrollToEventTarget(e, false)}"> ${tag?.name} </h2>`
: ''}
<slot name="${tag.elementId}"></slot>

Expand Down Expand Up @@ -92,7 +92,7 @@ export function expandedTagTemplate(tagId, subsectionFullId) {
const subsectionId = subsectionFullId.replace(`${tagId}--`, '');
return html`
<section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style="">
<div class="title tag" part="label-tag-title">${tag.name}</div>
<div class="title tag" part="label-tag-title" role="heading" aria-level="1">${tag.name}</div>
<slot name="${tag.elementId}--subsection--${subsectionId}">
<div class="regular-font-size">
${
Expand All @@ -110,8 +110,8 @@ export function expandedTagTemplate(tagId, subsectionFullId) {

<div class='nav-bar-paths-under-tag' style="max-width: 300px">
${tag.paths.map((p) => html`
<div class='nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}'
data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}'>
<div class='nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}' role="link" tabindex="0"
data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'>
<span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}">
${this.usePathInNavBar
? html`<div class='mono-font' style="display: flex; align-items: center;">
Expand Down
23 changes: 16 additions & 7 deletions src/templates/navbar-template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function expandCollapseAllComponents() {
/* eslint-disable indent */
export default function navbarTemplate() {
return html`
<nav class='nav-bar ${this.renderStyle}' part="section-navbar">
<nav class='nav-bar ${this.renderStyle}' part="section-navbar" aria-label="API navigation">
Comment thread
ahamelers marked this conversation as resolved.
Outdated
<slot name="nav-header"></slot>
${this.hideSearch ? ''
: html`
Expand All @@ -62,18 +62,19 @@ export default function navbarTemplate() {
${html`<nav class='nav-scroll' part="navbar-scroll">
${(this.hideInfo || !this.resolvedSpec.info)
? ''
: html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}'>
: html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}';
Comment thread
wparad marked this conversation as resolved.
Outdated
}>
${this.resolvedSpec.info.title || getI18nText('menu.overview')}
</div>`
}

${this.hideServerSelection
? ''
: html`<div class='nav-bar-info' id='link-servers' data-content-id='servers' @click = '${(e) => this.scrollToEventTarget(e, false)}'> ${getI18nText('menu.api-servers')} </div>`
: html`<div class='nav-bar-info' id='link-servers' data-content-id='servers' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'> ${getI18nText('menu.api-servers')} </div>`
}
${(this.hideAuthentication || !this.resolvedSpec.securitySchemes)
? ''
: html`<div class='nav-bar-info' id='link-auth' data-content-id='auth' @click = '${(e) => this.scrollToEventTarget(e, false)}'> ${getI18nText('menu.authentication')} </div>`
: html`<div class='nav-bar-info' id='link-auth' data-content-id='auth' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'> ${getI18nText('menu.authentication')} </div>`
}

<slot name="nav-section" class="custom-nav-section" data-content-id='section' @click = '${(e) => this.scrollToCustomNavSectionTarget(e, false)}'></slot>
Expand Down Expand Up @@ -102,8 +103,10 @@ export default function navbarTemplate() {
${tag.name === 'General ⦂'
? html``
: html`
<div class='nav-bar-tag' id="link-${tag.elementId}" data-content-id='${tag.elementId}'
@click='${e => { onExpandCollapseTag.call(this, e, tag.elementId); }}'>
<div class='nav-bar-tag' id="link-${tag.elementId}" data-content-id='${tag.elementId}' role="link" tabindex="0"
@click='${e => { onExpandCollapseTag.call(this, e, tag.elementId); }}'
@keydown='${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'
>

<div style="display: flex; justify-content: space-between; width: 100%;">
<div style="margin-right: .5rem">${tag.name}</div>
Expand All @@ -129,7 +132,7 @@ export default function navbarTemplate() {
<!-- Paths in each tag (endpoints) -->
${tag.paths.filter((v) => pathIsInSearch(this.matchPaths, v)).map((p) => html`
<div class='nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}'
data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}'>
data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'>
<span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}">
${this.usePathInNavBar
? html`<div class='mono-font' style="display: flex; align-items: center;">
Expand Down Expand Up @@ -164,11 +167,17 @@ export default function navbarTemplate() {
return html`
<div class="nav-bar-tag-and-paths ${component.expanded ? '' : 'collapsed'}">
<div class='nav-bar-tag'
role="link" tabindex="0"
data-content-id='cmp--${componentInfo.name.toLowerCase()}'
id='link-cmp--${componentInfo.name.toLowerCase()}'
@click="${(e) => {
expandCollapseComponent.call(this, component);
this.scrollToEventTarget(e, false);
}}"
@keydown="${(e) => {
if (['Enter', 'Space'].includes(e.key)) {
e.target.click();
}
}}">
<div>
${componentInfo.name}
Expand Down