Fix Wiki no history page (#7226)

* fix no page history

* fix wiki aria

frontend/src/components/search/wiki2-search.js

@@ -150,14 +150,14 @@ function Wiki2Search({ setCurrentPage, config, getCurrentPageId, wikiId }) {
   return (
     <>
       <div className="wiki2-search" onClick={() => setIsModalOpen(true)}>
-        <i className="sf3-font sf3-font-search"></i>
+        <i className="sf3-font sf3-font-search" aria-hidden="true"></i>
         <span>{gettext('Search')}</span>
       </div>
       {isModalOpen &&
         <Modal className="wiki2-search-modal" isOpen={isModalOpen} toggle={resetToDefault} autoFocus={false} size='lg'>
           <ModalBody>
             <div className="wiki2-search-input mb-4 position-relative">
-              <i className="sf3-font sf3-font-search"></i>
+              <i className="sf3-font sf3-font-search" aria-hidden="true"></i>
               <Input
                 type="text"
                 className="form-control search-input"

frontend/src/pages/wiki2/common/nav-item-icon.js

@@ -7,8 +7,8 @@ import '../css/nav-item-icon.css';
 
 function NavItemIcon({ symbol, className, disable, onClick }) {
   return (
-    <div onClick={onClick} className={classNames('nav-item-icon', { 'nav-item-icon-disable': disable })}>
-      <Icon symbol={symbol} className={className} />
+    <div onClick={onClick} className={classNames('nav-item-icon', { 'nav-item-icon-disable': disable })} role="button">
+      <Icon symbol={symbol} className={className} aria-hidden="true" />
     </div>
   );
 }

frontend/src/pages/wiki2/custom-icon.js

@@ -3,7 +3,7 @@ import ProtoTypes from 'prop-types';
 
 const CustomIcon = ({ icon }) => {
   return (
-    <span className='nav-item-icon nav-item-icon-disable'>{icon}</span>
+    <span className='nav-item-icon nav-item-icon-disable' aria-hidden="true">{icon}</span>
   );
 };
 

frontend/src/pages/wiki2/main-panel.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { SdocWikiEditor, DocInfo } from '@seafile/sdoc-editor';
-import { gettext, username, wikiPermission } from '../../utils/constants';
+import { gettext, username, wikiPermission, wikiId, siteRoot } from '../../utils/constants';
 import Loading from '../../components/loading';
 import { Utils } from '../../utils/utils';
 import Account from '../../components/common/account';
@@ -57,14 +57,8 @@ class MainPanel extends Component {
     return { ...props, docUuid: window.seafile.docUuid, currentPageConfig };
   }
 
-  handleClickHistory = () => {
-    const { wikiId, permission } = window.wiki.config;
-    if (permission !== 'rw') return;
-
-    const { siteRoot } = window.app.config;
-    const { currentPageConfig } = this.state;
-    const historyUrl = `${siteRoot}wiki/file_revisions/${wikiId}/?page_id=${currentPageConfig.id}`;
-    window.location.href = historyUrl;
+  openHistory = () => {
+    window.location.href = `${siteRoot}wiki/file_revisions/${wikiId}/?page_id=${this.state.currentPageConfig.id}`;
   };
 
   render() {
@@ -94,9 +88,9 @@ class MainPanel extends Component {
             </div>
           </div>
           <div className='d-flex align-items-center'>
-            {wikiPermission === 'rw' &&
-              <div className='wiki2-file-history-button' onClick={this.handleClickHistory}>
-                <i className='sf3-font sf3-font-history'/>
+            {(wikiPermission === 'rw' && this.state.currentPageConfig) &&
+              <div className='wiki2-file-history-button' onClick={this.openHistory} role="button">
+                <i className='sf3-font sf3-font-history' aria-hidden="true" />
               </div>
             }
             {username && <Account />}

frontend/src/pages/wiki2/top-nav/index.js

@@ -17,7 +17,7 @@ function WikiTopNav({ config, currentPageId, setCurrentPage }) {
           <Fragment key={item.id}>
             <div className='wiki2-top-nav-item d-flex align-items-center' onClick={() => {setCurrentPage(item.id);}}>
               {item.icon ? <CustomIcon icon={item.icon} /> : <NavItemIcon symbol={'file'} disable={true} />}
-              <span className='text-truncate' title={item.name}>{item.name}</span>
+              <span className='text-truncate' title={item.name} aria-label={item.name}>{item.name}</span>
             </div>
             {index !== paths.length - 1 && <span className="item-split">/</span>}
           </Fragment>

frontend/src/pages/wiki2/wiki-nav/pages/page-dropdownmenu.js

@@ -101,34 +101,34 @@ export default class PageDropdownMenu extends Component {
           positionFixed={true}
         >
           <DropdownItem onClick={this.handleCopyLink}>
-            <i className="sf3-font sf3-font-link" />
+            <i className="sf3-font sf3-font-link" aria-hidden="true" />
             <span className="item-text">{gettext('Copy link')}</span>
           </DropdownItem>
           <DropdownItem onClick={this.onRename}>
-            <i className="sf3-font sf3-font-rename" />
+            <i className="sf3-font sf3-font-rename" aria-hidden="true" />
             <span className="item-text">{gettext('Modify name')}</span>
           </DropdownItem>
           <DropdownItem onClick={this.addPageAbove}>
-            <i className="sf3-font sf3-font-enlarge" />
+            <i className="sf3-font sf3-font-enlarge" aria-hidden="true" />
             <span className="item-text">{gettext('Add page above')}</span>
           </DropdownItem>
           <DropdownItem onClick={this.addPageBelow}>
-            <i className="sf3-font sf3-font-enlarge" />
+            <i className="sf3-font sf3-font-enlarge" aria-hidden="true" />
             <span className="item-text">{gettext('Add page below')}</span>
           </DropdownItem>
           <DropdownItem onClick={this.duplicatePage}>
-            <i className="sf3-font sf3-font-copy1" />
+            <i className="sf3-font sf3-font-copy1" aria-hidden="true" />
             <span className="item-text">{gettext('Duplicate page')}</span>
           </DropdownItem>
           {(isOnlyOnePage || pagesLength === 1) ? '' : (
             <DropdownItem onClick={this.onDeletePage}>
-              <i className="sf3-font sf3-font-delete1" />
+              <i className="sf3-font sf3-font-delete1" aria-hidden="true" />
               <span className="item-text">{gettext('Delete page')}</span>
             </DropdownItem>
           )}
           <hr className='divider' />
           <DropdownItem onClick={this.handleOpenInNewTab}>
-            <i className='sf3-font sf3-font-open-in-new-tab' />
+            <i className='sf3-font sf3-font-open-in-new-tab' aria-hidden="true" />
             <span className="item-text">{gettext('Open in new tab')}</span>
           </DropdownItem>
         </DropdownMenu>

frontend/src/pages/wiki2/wiki-nav/pages/page-item.js

@@ -238,8 +238,8 @@ class PageItem extends Component {
                     }
                     {(!this.state.isMouseEnter && childNumber > 0) && (customIcon ? <CustomIcon icon={customIcon} /> : <NavItemIcon symbol={'files'} disable={true} />)}
                     {(this.state.isMouseEnter && childNumber > 0) &&
-                      <div className='nav-item-icon' onClick={this.toggleExpand}>
-                        <i className={`sf3-font-down sf3-font ${folded ? 'rotate-270' : ''}`}></i>
+                      <div className='nav-item-icon' onClick={this.toggleExpand} role='button'>
+                        <i className={`sf3-font-down sf3-font ${folded ? 'rotate-270' : ''}`} aria-hidden="true"></i>
                       </div>
                     }
                     <span className="wiki-page-title text-truncate" title={page.name}>{page.name}</span>
@@ -272,8 +272,8 @@ class PageItem extends Component {
                           />
                         }
                       </div>
-                      <div className="wiki-add-page-btn" onClick={this.toggleInsertPage}>
-                        <span className='sf3-font sf3-font-enlarge'></span>
+                      <div className="wiki-add-page-btn" onClick={this.toggleInsertPage} role='button'>
+                        <span className='sf3-font sf3-font-enlarge' aria-hidden="true"></span>
                       </div>
                     </>
                   }