Merge pull request #4960 from firstmatekidd/snippet_squash

Make snippet elements buttons so they can be interacted with a keyboard.

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -247,57 +247,57 @@ const Snippetbar = createReactClass({
 		return (
 			<div className='editors'>
 				{this.props.view !== 'meta' && <><div className='historyTools'>
-					<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
+					<button className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
 						onClick={this.toggleHistoryMenu} >
 						<i className='fas fa-clock-rotate-left' />
 						{ this.state.showHistory && this.renderHistoryItems() }
-					</div>
-					<div className={`editorTool undo ${this.props.historySize.done ? 'active' : ''}`}
+					</button>
+					<button className={`editorTool undo ${this.props.historySize.done ? 'active' : ''}`}
 						onClick={this.props.undo} >
 						<i className='fas fa-undo' />
-					</div>
-					<div className={`editorTool redo ${this.props.historySize.undone ? 'active' : ''}`}
+					</button>
+					<button className={`editorTool redo ${this.props.historySize.undone ? 'active' : ''}`}
 						onClick={this.props.redo} >
 						<i className='fas fa-redo' />
-					</div>
+					</button>
 				</div>
 				<div className='codeTools'>
-					<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
+					<button className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
 						onClick={this.props.foldCode} >
 						<i className='fas fa-compress-alt' />
-					</div>
-					<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
+					</button>
+					<button className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
 						onClick={this.props.unfoldCode} >
 						<i className='fas fa-expand-alt' />
-					</div>
-					<div className={`editorTool formatCode ${this.props.formatCode ? 'active' : ''}`}
+					</button>
+					<button className={`editorTool formatCode ${this.props.formatCode ? 'active' : ''}`}
 						onClick={this.props.formatCode} >
 						<i className='fas fa-wand-magic-sparkles' />
-					</div>
-					<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
+					</button>
+					<button className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
 						onClick={this.toggleThemeSelector} >
 						<i className='fas fa-palette' />
 						{this.state.themeSelector && this.renderThemeSelector()}
-					</div>
+					</button>
 				</div></>}
 
 				<div className='tabs'>
-					<div className={cx('text', { selected: this.props.view === 'text' })}
+					<button className={cx('text', { selected: this.props.view === 'text' })}
 						onClick={()=>this.props.onViewChange('text')}>
 						<i className='fa fa-beer' />
-					</div>
-					<div className={cx('style', { selected: this.props.view === 'style' })}
+					</button>
+					<button className={cx('style', { selected: this.props.view === 'style' })}
 						onClick={()=>this.props.onViewChange('style')}>
 						<i className='fa fa-paint-brush' />
-					</div>
-					<div className={cx('snippet', { selected: this.props.view === 'snippet' })}
+					</button>
+					<button className={cx('snippet', { selected: this.props.view === 'snippet' })}
 						onClick={()=>this.props.onViewChange('snippet')}>
 						<i className='fas fa-th-list' />
-					</div>
-					<div className={cx('meta', { selected: this.props.view === 'meta' })}
+					</button>
+					<button className={cx('meta', { selected: this.props.view === 'meta' })}
 						onClick={()=>this.props.onViewChange('meta')}>
 						<i className='fas fa-info-circle' />
-					</div>
+					</button>
 				</div>
 
 			</div>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -9,6 +9,7 @@
 	position         : relative;
 	display          : flex;
 	flex-wrap        : wrap-reverse;
+	reading-flow     : flex-visual;
 	justify-content  : space-between;
 	height           : auto;
 	color            : black;
@@ -24,6 +25,7 @@
 		min-width       : 275px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
 		font-size: .85rem;
 		&:only-child {min-width   : unset; margin-left : auto;}
+		reading-order   : 2;
 
 		>div {
 			display         : flex;
@@ -32,7 +34,7 @@
 
 			&:first-child { border-left : none; }
 
-			& > div {
+			& > button {
 				position    : relative;
 				width       : @menuHeight;
 				height      : @menuHeight;
@@ -132,6 +134,7 @@
 		display         : flex;
 		justify-content : flex-start;
 		min-width       : 565.95px;  //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
+		reading-order   : 1;
 	}
 
 	// removed caret for top level items, by request (makes buttons too wide).
@@ -219,10 +222,12 @@
 			flex            : 1;
 			justify-content : space-between;
 			border-bottom   : 1px solid;
+			reading-order   : 1;
 		}
 		.snippets { 
 			flex            : 1;
 			justify-content : space-evenly; 
+			reading-order   : 2;
 		}
 		.editors > div.history > .dropdown { right : unset; }
 	}