Improve accessibility by making conversations tabbable

[jpribyl]

These blocks of code contain interactive elements that are not given interactive tags or tabindex. This means that it is not possible to tab through the "compose new message" button or the conversation list.

BlueBubbles-Desktop-App/src/renderer/components/ViewContainer/MessagingView/LeftCol/TopNav/LeftTopNav.tsx

Lines 58 to 81 in 47bbd56

	render() {
	return (
	<div className="LeftTopNav-Mes">
	<div id="leftTopSearch">
	<input
	id="messageSearch"
	type="text"
	name="search"
	placeholder="Search"
	value={this.state.enteredSearch}
	onChange={e => this.handleSearchInput(e)}
	/>
	{this.state.enteredSearch.length > 0 ? (
	<img id="resetSearchString" src={CloseIcon} onClick={() => this.resetSearchString()} />
	) : null}
	</div>
	<div className="leftTopButton">
	<div id="newMessage" onClick={this.handleNewMessage}>
	<img id="composeIcon" src={ComposeIcon} alt="compose" />
	</div>
	</div>
	</div>
	);
	}

BlueBubbles-Desktop-App/src/renderer/components/ViewContainer/MessagingView/LeftCol/ConversationsNav/Conversation/Conversation.tsx

Lines 139 to 178 in 47bbd56

	<div
	className="Conversation"
	id={this.props.chat.guid}
	onMouseOver={showDelMessage}
	onMouseOut={hideDelMessage}
	>
	<div className="convo-wrap">
	<div className="contact-card">
	{this.props.chat.participants.length > 1 ? (
	<GroupAvatar chat={this.props.chat} />
	) : (
	<IndividualAvatar chat={this.props.chat} />
	)}
	</div>
	<div className="message-prev">
	<div className="prev-top">
	<div className="message-recip">
	<p className="message-recip-example">{generateChatTitle(this.props.chat)}</p>
	</div>
	<div className="message-time">
	<div>
	<p className="message-time-example">{chatDate}</p>
	</div>
	</div>
	</div>
	<div className="prev-bottom">
	<div className="message-snip">
	<div>{this.renderText(lastText)}</div>
	</div>
	<div className="message-del">
	<img
	className="message-del-conversation hideDelMessage"
	src={ConversationCloseIcon}
	alt="delete"
	/>
	</div>
	</div>
	</div>
	</div>
	</div>

The fix (which I will PR if y'all are interested) is to pass props into the components with tabIndex="0" (see here https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)