Enable screen readers to skip 'main' in IDE mode (#658) rdar://107573378

* skip 'main' in IDE mode, since main is the only content rdar://107573378

skip 'main' in IDE mode, since main is the only content

Author: hqhhuang

src/components/DocumentationTopic.vue

@@ -13,7 +13,10 @@
     class="doc-topic"
     :class="{ 'with-on-this-page': enableOnThisPageNav && isOnThisPageNavVisible }"
   >
-    <main class="main" id="main" role="main" tabindex="0">
+    <component
+      :is="isTargetIDE ? 'div' : 'main'"
+      class="main" id="main"
+    >
       <DocumentationHero
         :role="role"
         :enhanceBackground="enhanceBackground"
@@ -135,7 +138,7 @@
         </template>
       </div>
       <BetaLegalText v-if="!isTargetIDE && hasBetaContent" />
-    </main>
+    </component>
     <div aria-live="polite" class="visuallyhidden">
       {{ $t('documentation.current-page', { title: pageTitle }) }}
     </div>

tests/unit/components/DocumentationTopic.spec.js

@@ -165,6 +165,7 @@ describe('DocumentationTopic', () => {
     wrapper = shallowMount(DocumentationTopic, {
       propsData,
       provide: {
+        isTargetIDE: false,
         store: {
           state: { onThisPageSections: [], references: {} },
           reset: jest.fn(),
@@ -219,13 +220,29 @@ describe('DocumentationTopic', () => {
     expect(wrapper.is('div.doc-topic')).toBe(true);
   });
 
-  it('renders a <main>', () => {
+  it('renders a <main> in non-IDE mode', () => {
     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('role')).toBe('main');
-    expect(main.attributes('tabindex')).toBe('0');
+  });
+
+  it('renders a <div> instead of <main> in IDE mode', () => {
+    wrapper = shallowMount(DocumentationTopic, {
+      propsData,
+      provide: {
+        isTargetIDE: true,
+        store: {
+          state: { onThisPageSections: [], references: {} },
+          reset: jest.fn(),
+        },
+      },
+    });
+
+    expect(wrapper.find('main').exists()).toBe(false);
+    const div = wrapper.find('.main');
+    expect(div.exists()).toBe(true);
+    expect(div.attributes('id')).toBe('main');
   });
 
   it('renders an aria live that tells VO users which it is the current page content', () => {