fix: add missed labels to elements (#1445)

This commit is contained in:
Anna Stasiuk 2020-11-30 12:51:27 +02:00 committed by GitHub
parent bb4594ee58
commit 8c559bcbcd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 27 additions and 10 deletions

View File

@ -211,6 +211,7 @@ export default class ComboBox extends React.Component<ComboBoxProps, ComboBoxSta
onFocus={this.open}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyPress}
aria-label="URL to an OpenAPI definition to try"
/>
<Button onClick={this.handleTryItClick}> TRY IT </Button>
{open && <DropDownList>{options.map(this.renderOption)}</DropDownList>}

View File

@ -79,7 +79,10 @@ class DemoApp extends React.Component<
<>
<Heading>
<a href=".">
<Logo src="https://github.com/Redocly/redoc/raw/master/docs/images/redoc-logo.png" />
<Logo
src="https://github.com/Redocly/redoc/raw/master/docs/images/redoc-logo.png"
alt="Redoc logo"
/>
</a>
<ControlsContainer>
<ComboBox

View File

@ -56,6 +56,7 @@ export class Link extends React.Component<{ to: string; className?: string; chil
className={this.props.className}
href={store!.menu.history.linkForId(this.props.to)}
onClick={this.navigate.bind(this, store!.menu.history)}
aria-label={this.props.to}
>
{this.props.children}
</a>

View File

@ -51,7 +51,9 @@ class Json extends React.PureComponent<JsonProps> {
expandAll = () => {
const elements = this.node.getElementsByClassName('collapsible');
for (const collapsed of Array.prototype.slice.call(elements)) {
(collapsed.parentNode as Element)!.classList.remove('collapsed');
const parentNode = collapsed.parentNode as Element;
parentNode.classList.remove('collapsed');
parentNode.querySelector('.collapser')!.setAttribute('aria-label', 'collapse');
}
};
@ -61,7 +63,9 @@ class Json extends React.PureComponent<JsonProps> {
const elementsArr = Array.prototype.slice.call(elements, 1);
for (const expanded of elementsArr) {
(expanded.parentNode as Element)!.classList.add('collapsed');
const parentNode = expanded.parentNode as Element;
parentNode.classList.add('collapsed');
parentNode.querySelector('.collapser')!.setAttribute('aria-label', 'expand');
}
};
@ -71,8 +75,10 @@ class Json extends React.PureComponent<JsonProps> {
collapsed = target.parentElement!.getElementsByClassName('collapsible')[0];
if (collapsed.parentElement.classList.contains('collapsed')) {
collapsed.parentElement.classList.remove('collapsed');
target.setAttribute('aria-label', 'collapse');
} else {
collapsed.parentElement.classList.add('collapsed');
target.setAttribute('aria-label', 'expand');
}
}
};

View File

@ -43,7 +43,12 @@ export class DiscriminatorDropdown extends React.Component<{
this.sortOptions(options, enumValues);
return (
<StyledDropdown value={activeValue} options={options} onChange={this.changeActiveChild} />
<StyledDropdown
value={activeValue}
options={options}
onChange={this.changeActiveChild}
ariaLabel="Example"
/>
);
}

View File

@ -139,6 +139,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
value={this.state.term}
onKeyDown={this.handleKeyDown}
placeholder="Search..."
aria-label="Search"
type="text"
onChange={this.search}
/>

View File

@ -73,9 +73,9 @@ function valueToHTML(value, maxExpandLevel: number) {
function arrayToHTML(json, maxExpandLevel: number) {
const collapsed = level > maxExpandLevel ? 'collapsed' : '';
let output = `<button class="collapser"></button>${punctuation(
'[',
)}<span class="ellipsis"></span><ul class="array collapsible">`;
let output = `<button class="collapser" aria-label="${
level > maxExpandLevel + 1 ? 'expand' : 'collapse'
}"></button>${punctuation('[')}<span class="ellipsis"></span><ul class="array collapsible">`;
let hasContents = false;
const length = json.length;
for (let i = 0; i < length; i++) {
@ -98,9 +98,9 @@ function objectToHTML(json, maxExpandLevel: number) {
const collapsed = level > maxExpandLevel ? 'collapsed' : '';
const keys = Object.keys(json);
const length = keys.length;
let output = `<button class="collapser"></button>${punctuation(
'{',
)}<span class="ellipsis"></span><ul class="obj collapsible">`;
let output = `<button class="collapser" aria-label="${
level > maxExpandLevel + 1 ? 'expand' : 'collapse'
}"></button>${punctuation('{')}<span class="ellipsis"></span><ul class="obj collapsible">`;
let hasContents = false;
for (let i = 0; i < length; i++) {
const key = keys[i];