From 11d441ba9228b0e3c1d7f59b33d723b110db96da Mon Sep 17 00:00:00 2001
From: Anya Stasiuk <stasiukanya@gmail.com>
Date: Fri, 30 Oct 2020 17:58:30 +0200
Subject: [PATCH] fix: add missed labels to elements

---
 demo/ComboBox.tsx                               |  1 +
 demo/index.tsx                                  |  5 ++++-
 src/common-elements/linkify.tsx                 |  1 +
 src/components/JsonViewer/JsonViewer.tsx        | 10 ++++++++--
 src/components/Schema/DiscriminatorDropdown.tsx |  7 ++++++-
 src/components/SearchBox/SearchBox.tsx          |  1 +
 src/utils/jsonToHtml.ts                         | 12 ++++++------
 7 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/demo/ComboBox.tsx b/demo/ComboBox.tsx
index a4b9669a..e6f21646 100644
--- 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 a spec 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
index d3974b2a..c55311e8 100644
--- 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"
+            />
           </a>
           <ControlsContainer>
             <ComboBox
diff --git a/src/common-elements/linkify.tsx b/src/common-elements/linkify.tsx
index e5d7bd62..daff18fc 100644
--- 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
index f320473a..1883bd08 100644
--- 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
index b6691efa..d3290a2a 100644
--- 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
index 5476dc9b..21900862 100644
--- 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
index 65a7edfb..3db6cd91 100644
--- 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];