Remove #AppFrameMainContent link and update SkipToContent link to tar…

…get #AppFrameMain instead

Allow focus to be placed on a focusable element in <main> instead of invisible link

src/components/Frame/Frame.tsx

@@ -65,8 +65,6 @@ const GLOBAL_RIBBON_CUSTOM_PROPERTY = '--global-ribbon-height';
 
 const APP_FRAME_MAIN = 'AppFrameMain';
 
-const APP_FRAME_MAIN_ANCHOR_TARGET = 'AppFrameMainContent';
-
 const APP_FRAME_NAV = 'AppFrameNav';
 const APP_FRAME_TOP_BAR = 'AppFrameTopBar';
 const APP_FRAME_LOADING_BAR = 'AppFrameLoadingBar';
@@ -221,7 +219,7 @@ class FrameInner extends PureComponent<CombinedProps, State> {
 
     const skipTarget = skipToContentTarget?.current
       ? skipToContentTarget.current.id
-      : APP_FRAME_MAIN_ANCHOR_TARGET;
+      : APP_FRAME_MAIN;
 
     const skipMarkup = (
       <div className={skipClassName}>
@@ -262,15 +260,6 @@ class FrameInner extends PureComponent<CombinedProps, State> {
         />
       ) : null;
 
-    const skipToMainContentTarget = skipToContentTarget ? null : (
-      // eslint-disable-next-line jsx-a11y/anchor-is-valid
-      <a
-        id={APP_FRAME_MAIN_ANCHOR_TARGET}
-        ref={this.skipToMainContentTargetNode}
-        tabIndex={-1}
-      />
-    );
-
     const context = {
       showToast: this.showToast,
       hideToast: this.hideToast,
@@ -298,7 +287,6 @@ class FrameInner extends PureComponent<CombinedProps, State> {
             id={APP_FRAME_MAIN}
             data-has-global-ribbon={Boolean(globalRibbon)}
           >
-            {skipToMainContentTarget}
             <div className={styles.Content}>{children}</div>
           </main>
           <ToastManager toastMessages={toastMessages} />

src/components/Frame/tests/Frame.test.tsx

@@ -52,13 +52,12 @@ describe('<Frame />', () => {
       expect(skipToContentLinkText).toStrictEqual('Skip to content');
     });
 
-    it('sets focus to the main content target anchor element when the skip to content link is clicked', () => {
+    it('targets the main container element by default', () => {
       const frame = mountWithApp(<Frame />);
       const skipLink = frame.find('a', {children: 'Skip to content'});
 
-      skipLink!.trigger('onClick');
-      expect(document.activeElement).toBe(
-        frame.find('a', {id: 'AppFrameMainContent'})!.domNode,
+      expect(skipLink!.domNode!.getAttribute('href')).toBe(
+        `#${frame!.find('main')!.domNode!.id}`,
       );
     });