vpat:72 add tab semantics to the sidebar component

vpat 72 states that we should have an audible announcement
after a new tab was selected. This does not seem exactly correct
per https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html#excepted-examples,
however the sidebar should still have proper tabbar semantics
to help screen readers handle focus. That way, when a different
tab is selected, the screen readers tend to repeat the title
of the tab with a note that it is selected, so this should
address that concern.

src/common/components/sidebar/outline-view.js

@@ -102,7 +102,7 @@ function OutlineView({ outline, onNavigate, onOpenLink, onUpdate}) {
 	}
 
 	return (
-		<div className={cx('outline-view', { loading: outline === null })} data-tabstop="1">
+		<div className={cx('outline-view', { loading: outline === null })} data-tabstop="1" id="outlineView" role="tabpanel" aria-labelledby="viewOutline">
 			{outline === null ? <div className="spinner"/> : renderItems(outline)}
 		</div>
 	);

src/common/components/sidebar/sidebar.js

@@ -21,13 +21,16 @@ function Sidebar(props) {
 	return (
 		<div id="sidebarContainer" className="sidebarOpen">
 			<div className="sidebar-toolbar">
-				<div className="start" data-tabstop={1}>
+				<div className="start" data-tabstop={1} role="tablist">
 					{props.type === 'pdf' &&
 						<button
 							id="viewThumbnail"
 							className={cx('toolbar-button', { active: props.view === 'thumbnails' })}
 							title="Show Thumbnails" tabIndex={-1}
 							onClick={() => props.onChangeView('thumbnails')}
+							role="tab"
+							aria-selected={props.view === 'thumbnails' }
+							aria-controls='thumbnailsView'
 						><IconThumbnails/></button>
 					}
 					<button
@@ -36,13 +39,19 @@ function Sidebar(props) {
 						title="Show Annotations"
 						tabIndex={-1}
 						onClick={() => props.onChangeView('annotations')}
+						role="tab"
+						aria-selected={props.view === 'annotations' }
+						aria-controls='annotationsView'
 					><IconAnnotations/></button>
 					<button
 						id="viewOutline"
 						className={cx('toolbar-button', { active: props.view === 'outline' })}
 						title="Show Document Outline (double-click to expand/collapse all items)"
 						tabIndex={-1}
 						onClick={() => props.onChangeView('outline')}
+						role="tab"
+						aria-selected={props.view === 'outline' }
+						aria-controls='outlineView'
 					><IconOutline/></button>
 				</div>
 				<div className="end">
@@ -57,7 +66,7 @@ function Sidebar(props) {
 			</div>
 			<div id="sidebarContent" className="sidebar-content">
 				{props.view === 'thumbnails' && props.thumbnailsView}
-				{props.view === 'annotations' && <div id="annotationsView">{props.annotationsView}</div>}
+				{props.view === 'annotations' && <div id="annotationsView" role="tabpanel" aria-labelledby='viewAnnotations'>{props.annotationsView}</div>}
 				{props.view === 'outline' && props.outlineView}
 			</div>
 		</div>

src/common/components/sidebar/thumbnails-view.js

@@ -203,7 +203,7 @@ function ThumbnailsView(props) {
 	}, [onOpenThumbnailContextMenu, selected]);
 
 	return (
-		<div className="thumbnails-view">
+		<div id="thumbnailsView" className="thumbnails-view" role="tabpanel" aria-labelledby="viewThumbnail">
 			{platform === 'web' && (
 				<div className="thumbnails-header">
 					<FormattedMessage id="pdfReader.selectedPages" values={ { count: selected.length }} />