Rename #main to #app-main for better compatibility with content (#869)

Resolves: rdar://110847532

Author: mportiz08

src/App.vue

@@ -14,7 +14,9 @@
     :class="{ fromkeyboard: fromKeyboard, hascustomheader: hasCustomHeader }"
   >
     <div :id="AppTopID" />
-    <a href="#main" id="skip-nav" v-if="!isTargetIDE">{{ $t('accessibility.skip-navigation') }}</a>
+    <a href="#app-main" id="skip-nav" v-if="!isTargetIDE">
+      {{ $t('accessibility.skip-navigation') }}
+    </a>
     <slot name="header" :isTargetIDE="isTargetIDE">
       <SuggestLang v-if="enablei18n" />
       <!-- Render the custom header by default, if there is no content in the `header` slot -->

src/components/Article.vue

@@ -18,7 +18,7 @@
       :rootReference="hierarchy.reference"
       :identifierUrl="identifierUrl"
     />
-    <main id="main" tabindex="0">
+    <main id="app-main" tabindex="0">
       <slot name="above-hero" />
       <component
         v-for="(section, index) in sections"

src/components/DocumentationTopic.vue

@@ -15,7 +15,7 @@
   >
     <component
       :is="isTargetIDE ? 'div' : 'main'"
-      class="main" id="main"
+      class="main" id="app-main"
     >
       <DocumentationHero
         :role="role"
@@ -778,7 +778,7 @@ $space-size: 15px;
   }
 }
 
-#main {
+#app-main {
   outline-style: none;
   height: 100%;
 

src/components/Tutorial.vue

@@ -18,7 +18,7 @@
       :rootReference="hierarchy.reference"
       :identifierUrl="identifierUrl"
     />
-    <main id="main"  tabindex="0">
+    <main id="app-main"  tabindex="0">
       <Section
         v-for="(section, index) in sections"
         :section="section"

src/components/TutorialsOverview.vue

@@ -17,7 +17,7 @@
     >
       {{ title }}
     </Nav>
-    <main id="main" tabindex="0" class="main">
+    <main id="app-main" tabindex="0" class="main">
       <div class="radial-gradient">
         <slot name="above-hero" />
         <Hero

src/styles/_base.scss

@@ -21,7 +21,7 @@
 // import the current theme _base file. This file imports fonts and other global styles
 @import "~theme/styles/_theme_base.scss";
 
-#main {
+#app-main {
   outline-style: none;
 }
 

src/styles/base/_reset.scss

@@ -162,7 +162,7 @@ button {
 @media print {
 
   body,
-  #main,
+  #app-main,
   #content {
     color: #000;
   }

tests/unit/App.spec.js

@@ -117,7 +117,7 @@ describe('App', () => {
     const wrapper = createWrapper();
     const skipNavigation = wrapper.find('#skip-nav');
     expect(skipNavigation.text()).toBe('accessibility.skip-navigation');
-    expect(skipNavigation.attributes('href')).toBe('#main');
+    expect(skipNavigation.attributes('href')).toBe('#app-main');
   });
 
   it('exposes a header slot', () => {

tests/unit/components/DocumentationTopic.spec.js

@@ -278,7 +278,7 @@ describe('DocumentationTopic', () => {
     const main = wrapper.find('main');
     expect(main.exists()).toBe(true);
     expect(main.classes('main')).toBe(true);
-    expect(main.attributes('id')).toBe('main');
+    expect(main.attributes('id')).toBe('app-main');
   });
 
   it('renders a <div> instead of <main> in IDE mode', () => {
@@ -293,7 +293,7 @@ describe('DocumentationTopic', () => {
     expect(wrapper.find('main').exists()).toBe(false);
     const div = wrapper.find('.main');
     expect(div.exists()).toBe(true);
-    expect(div.attributes('id')).toBe('main');
+    expect(div.attributes('id')).toBe('app-main');
   });
 
   it('renders an aria live that tells VO users which it is the current page content', () => {