chore: add 'Skip to main content' button to the main page

Closes: INSTUI-4240

Author: ToMESSKa

packages/__docs__/src/App/index.tsx

@@ -80,6 +80,7 @@ import type {
   ParsedDocSummary
 } from '../../buildScripts/DataTypes.mjs'
 import { logError } from '@instructure/console'
+import React from 'react'
 
 type AppContextType = {
   themeKey: keyof MainDocsData['themes']
@@ -106,6 +107,7 @@ class App extends Component<AppProps, AppState> {
   _mediaQueryListener?: ReturnType<typeof addMediaQueryMatchListener>
   _defaultDocumentTitle?: string
   _controller?: AbortController
+  _heroRef: React.RefObject<Hero>
 
   constructor(props: AppProps) {
     super(props)
@@ -127,6 +129,8 @@ class App extends Component<AppProps, AppState> {
       versionsData: undefined,
       iconsData: null
     }
+
+    this._heroRef = React.createRef()
   }
 
   fetchDocumentData = async (docId: string) => {
@@ -487,6 +491,7 @@ class App extends Component<AppProps, AppState> {
           repository={library.repository}
           version={library.version}
           layout={layout}
+          ref={this._heroRef}
         />
       </InstUISettingsProvider>
     )
@@ -691,6 +696,10 @@ class App extends Component<AppProps, AppState> {
     ) : null
   }
 
+  focusMainContent = () => {
+    this._heroRef.current?.focusMainContentHeading()
+  }
+
   render() {
     const key = this.state.key
     const { showMenu, layout, docsData, iconsData } = this.state
@@ -717,6 +726,18 @@ class App extends Component<AppProps, AppState> {
             aria-label={key || docsData.library.name}
             ref={this.handleContentRef}
           >
+            <View
+              as={'button'}
+              onClick={this.focusMainContent}
+              tabIndex={0}
+              css={this.props.styles?.skipToMainButton}
+              borderRadius="small"
+              display="inline-block"
+              padding="small"
+              background="primary"
+            >
+              Skip to main content
+            </View>
             {!showMenu && (
               <div css={this.props.styles?.hamburger}>
                 <InstUISettingsProvider>

packages/__docs__/src/App/props.ts

@@ -51,6 +51,7 @@ type AppStyle = ComponentStyle<
   | 'hamburger'
   | 'inlineNavigation'
   | 'globalStyles'
+  | 'skipToMainButton'
 >
 
 type AppTheme = {

packages/__docs__/src/App/styles.ts

@@ -76,6 +76,21 @@ const generateStyle = (componentTheme: AppTheme): AppStyle => {
       borderInlineEndWidth: componentTheme.navBorderWidth,
       borderInlineEndStyle: 'solid'
     },
+    skipToMainButton: {
+      label: 'skipToMainButton',
+      position: 'absolute',
+      left: '-9999px',
+      zIndex: 999,
+      marginTop: '6px',
+      opacity: 0,
+      height: '60px',
+      fontSize: '150%',
+      '&:focus': {
+        left: '8rem',
+        transform: 'translateX(-50%)',
+        opacity: 1
+      }
+    },
     globalStyles: {
       html: {
         height: '100%',

packages/__docs__/src/Hero/index.tsx

@@ -52,6 +52,7 @@ import { Heading } from '../Heading'
 
 import type { HeroProps } from './props'
 import { propTypes, allowedProps } from './props'
+import React from 'react'
 
 @withStyle(generateStyle, generateComponentTheme)
 class Hero extends Component<HeroProps> {
@@ -61,6 +62,8 @@ class Hero extends Component<HeroProps> {
     docs: null
   }
 
+  _mainContentHeading?: HTMLElement
+
   componentDidMount() {
     this.props.makeStyles?.()
   }
@@ -69,6 +72,16 @@ class Hero extends Component<HeroProps> {
     this.props.makeStyles?.()
   }
 
+  mainContentHeadingRef = (el: Element | null) => {
+    this._mainContentHeading = el as HTMLElement
+  }
+
+  focusMainContentHeading = () => {
+    if (this._mainContentHeading) {
+      this._mainContentHeading.focus()
+    }
+  }
+
   render() {
     const { version, layout, styles } = this.props
 
@@ -192,7 +205,13 @@ class Hero extends Component<HeroProps> {
 
     const heroBodyContent = (
       <View as="div">
-        <Heading as="h3" level="h2" margin="none none medium">
+        <Heading
+          as="h3"
+          level="h2"
+          margin="none none medium"
+          elementRef={this.mainContentHeadingRef}
+          tabIndex={0}
+        >
           Components everyone can count on
         </Heading>
         <View as="div" margin="medium none">