fix: add missed labels to elements (#1445)

Redocly · Nov 30, 2020 · 8c559bc · 8c559bc
1 parent bb4594e
commit 8c559bc
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 10 deletions.
diff --git a/demo/ComboBox.tsx b/demo/ComboBox.tsx
@@ -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>}

diff --git a/demo/index.tsx b/demo/index.tsx
@@ -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

diff --git a/src/common-elements/linkify.tsx b/src/common-elements/linkify.tsx
@@ -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>

diff --git a/src/components/JsonViewer/JsonViewer.tsx b/src/components/JsonViewer/JsonViewer.tsx
@@ -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');
       }
     }
   };

diff --git a/src/components/Schema/DiscriminatorDropdown.tsx b/src/components/Schema/DiscriminatorDropdown.tsx
@@ -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"
+      />
     );
   }
 

diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
@@ -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}
         />

diff --git a/src/utils/jsonToHtml.ts b/src/utils/jsonToHtml.ts
@@ -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];