mirror of
https://github.com/Redocly/redoc.git
synced 2024-11-10 19:06:34 +03:00
fix: add missed labels to elements (#1445)
This commit is contained in:
parent
bb4594ee58
commit
8c559bcbcd
|
@ -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>}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
@ -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];
|
||||
|
|
Loading…
Reference in New Issue
Block a user