fix(a11y): make console pane output keyboard accessible (#47764)

client/src/templates/Challenges/components/output.css

@@ -13,3 +13,12 @@ pre.output-text code {
   font-size: 90%;
   padding: 2px 4px;
 }
+
+.output-text:focus {
+  outline: 2px solid var(--blue-mid);
+  outline-offset: -2px;
+}
+
+.output-text:focus:not(:focus-visible) {
+  outline: none;
+}

client/src/templates/Challenges/components/output.tsx

@@ -1,6 +1,7 @@
 import { isEmpty } from 'lodash-es';
 import React from 'react';
 import sanitizeHtml from 'sanitize-html';
+import i18next from 'i18next';
 
 import './output.css';
 
@@ -20,6 +21,10 @@ function Output({ defaultOutput, output }: OutputProps): JSX.Element {
     <pre
       className='output-text'
       dangerouslySetInnerHTML={{ __html: message }}
+      role='region'
+      aria-label={i18next.t('learn.editor-tabs.console')}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex={0}
     />
   );
 }