From a05c16793e972a65ff95e23ff54f99c85c5251f2 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Fri, 17 Sep 2021 15:13:22 +0800
Subject: [PATCH] [accessibility] improvements for 'search' on the top-right
 corner

---
 frontend/src/components/search/search.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/search/search.js b/frontend/src/components/search/search.js
index ea0ed6c7e6..0eff4a0d6c 100644
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -280,10 +280,11 @@ class Search extends Component {
                   autoComplete="off"
                 />
                 {(this.state.isCloseShow && username) &&
-                  <i className='search-icon-right input-icon-addon fas fa-external-link-alt search-icon-arrow'
-                    onClick={this.onSearchPage}></i>
+                  <a href={`${siteRoot}search/`} className="search-icon-right input-icon-addon fas fa-external-link-alt search-icon-arrow"></a>
+                }
+                {this.state.isCloseShow &&
+                  <button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
                 }
-                {this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
               </div>
               <div className="search-result-container dropdown-search-result-container">
                 {this.renderSearchResult()}
@@ -313,10 +314,11 @@ class Search extends Component {
                     autoComplete="off"
                   />
                   {(this.state.isCloseShow && username) &&
-                    <i className='search-icon-right input-icon-addon fas fa-external-link-alt search-icon-arrow'
-                      onClick={this.onSearchPage}></i>
+                    <a href={`${siteRoot}search/`} className="search-icon-right input-icon-addon fas fa-external-link-alt search-icon-arrow"></a>
+                  }
+                  {this.state.isCloseShow &&
+                    <button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
                   }
-                  {this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
                 </div>
                 <div className="search-result-container dropdown-search-result-container">
                   {this.renderSearchResult()}