Keyboard focus order is not proper on "Description" and "Create github pull request" screen: A11y_Visual Studio Code Web Extensions_Github Pull request_Description_Keyboard (#6578)

Fixes #6451

Author: alexr00

webviews/editorWebview/overview.tsx

@@ -12,21 +12,53 @@ import { StatusChecksSection } from '../components/merge';
 import Sidebar from '../components/sidebar';
 import { Timeline } from '../components/timeline';
 
-export const Overview = (pr: PullRequest) => (
-	<>
+const useMediaQuery = (query: string) => {
+	const [matches, setMatches] = React.useState(window.matchMedia(query).matches);
+
+	React.useEffect(() => {
+		const mediaQueryList = window.matchMedia(query);
+		const documentChangeHandler = () => setMatches(mediaQueryList.matches);
+
+		mediaQueryList.addEventListener('change', documentChangeHandler);
+
+		return () => {
+			mediaQueryList.removeEventListener('change', documentChangeHandler);
+		};
+	}, [query]);
+
+	return matches;
+};
+
+export const Overview = (pr: PullRequest) => {
+	const isSingleColumnLayout = useMediaQuery('(max-width: 925px)');
+
+	return <>
 		<div id="title" className="title">
 			<div className="details">
 				<Header {...pr} />
 			</div>
 		</div>
-		<Sidebar {...pr} />
-		<div id="main">
-			<div id="description">
-				<CommentView isPRDescription comment={pr} />
-			</div>
-			<Timeline events={pr.events} />
-			<StatusChecksSection pr={pr} isSimple={false} />
-			<AddComment {...pr} />
+		{isSingleColumnLayout ?
+			<>
+				<Sidebar {...pr} />
+				<Main {...pr} />
+			</>
+			:
+			<>
+				<Main {...pr} />
+				<Sidebar {...pr} />
+			</>
+		}
+	</>;
+};
+
+const Main = (pr: PullRequest) => (
+	<div id="main">
+		<div id="description">
+			<CommentView isPRDescription comment={pr} />
 		</div>
-	</>
+		<Timeline events={pr.events} />
+		<StatusChecksSection pr={pr} isSimple={false} />
+		<AddComment {...pr} />
+	</div>
 );