woops, fixed

snapcrunch · Sep 13, 2021 · 7008ccf · 7008ccf
1 parent c388849
commit 7008ccf
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/example/preferences.js b/example/preferences.js
@@ -19,7 +19,7 @@ const preferences = new ElectronPreferences({
 		},
 		// ...
 	},
-	debug: false, //true will open the dev tools
+	debug: true, //true will open the dev tools
 	webPreferences: {
 		webSecurity: true
 	},

diff --git a/src/app/components/sidebar/index.jsx b/src/app/components/sidebar/index.jsx
@@ -8,8 +8,9 @@ class Sidebar extends React.Component {
 	render() {
 
         const sections = this.sections.map((section) => {
+            const isActive = this.activeSection === section.id;
             let className = 'sidebar-section';
-            if (this.activeSection === section.id) {
+            if (isActive) {
                 className += ' active';
             }
 
@@ -18,17 +19,19 @@ class Sidebar extends React.Component {
                 webkitMask: `url("svg/${section.icon}.svg") no-repeat center / contain`
             }
             return (
-                <div key={ section.id } className={ className } onClick={ this.selectSection.bind(this, section.id) }>
+                <li key={ section.id } className={ className } role="tab" id={ `tab-${section.id}` }
+                    aria-selected={ isActive } aria-controls={ `tabpanel-${section.id}` } tabIndex={ isActive ? 0 : -1 }
+                    onClick={ this.selectSection.bind(this, section.id) }>
                     <div className="section-icon" style={ style } />
                     <span className="section-label">{ section.label }</span>
-                </div>
+                </li>
             );
         });
 
         return (
-            <div className="sidebar">
+            <ul className="sidebar" role="tablist" aria-label="Side bar" onKeyDown={ this.onTablistKeyDown }>
                 { sections }
-            </div>
+            </ul>
         );
 
 	}
@@ -99,6 +102,8 @@ Sidebar.propTypes = {
 	sections: PropTypes.array,
 	activeSection: PropTypes.string,
 	onSelectSection: PropTypes.func,
+    selectSection: PropTypes.func,
+    onTablistKeyDown: PropTypes.func
 };
 
 export default Sidebar;