Feature: Mobile - All page content should be contained by landmarks.

app/frontend/apps/mobile/pages/error/views/Error.vue

@@ -5,11 +5,11 @@ import { errorOptions } from '@mobile/router/error'
 </script>
 
 <template>
-  <div>
+  <main>
     <h1>{{ i18n.t('Error - %s', errorOptions.statusCode) }}</h1>
     <p>{{ errorOptions.message }}</p>
     <p v-if="errorOptions.route">
       {{ errorOptions.route }}
     </p>
-  </div>
+  </main>
 </template>

app/frontend/apps/mobile/pages/login/__tests__/login-a11y.spec.ts

@@ -0,0 +1,13 @@
+// Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/
+
+import { visitView } from '@tests/support/components/visitView'
+
+describe('testing login a11y', () => {
+  it('check that login view has all required landmarks', async () => {
+    const view = await visitView('/login')
+
+    expect(view.getByRole('main')).toBeInTheDocument() // <main />
+    expect(view.getByRole('navigation')).toBeInTheDocument() // <nav />
+    expect(view.getByRole('contentinfo')).toBeInTheDocument() // <footer />
+  })
+})

app/frontend/apps/mobile/pages/login/views/Login.vue

@@ -121,9 +121,8 @@ const login = (formData: FormData<LoginFormData>) => {
 </script>
 
 <template>
-  <!-- TODO: Only a "second" dummy implementation for the login... -->
   <div class="flex h-full min-h-screen flex-col items-center px-6 pt-6 pb-4">
-    <div class="m-auto w-full max-w-md">
+    <main class="m-auto w-full max-w-md">
       <div class="flex grow flex-col justify-center">
         <div class="my-5 grow">
           <div class="flex justify-center p-2">
@@ -182,13 +181,13 @@ const login = (formData: FormData<LoginFormData>) => {
           </Form>
         </div>
       </div>
-    </div>
-    <div class="mb-6 flex items-center justify-center">
+    </main>
+    <nav class="mb-6 flex items-center justify-center">
       <CommonLink link="/#login" class="!text-gray underline">
         {{ $t('Continue to desktop app') }}
       </CommonLink>
-    </div>
-    <div class="flex items-center justify-center align-middle text-gray-200">
+    </nav>
+    <footer class="flex items-center justify-center align-middle text-gray-200">
       <CommonLink
         link="https://zammad.org"
         external
@@ -206,6 +205,6 @@ const login = (formData: FormData<LoginFormData>) => {
       >
         Zammad
       </CommonLink>
-    </div>
+    </footer>
   </div>
 </template>

app/frontend/tests/support/components/LayoutTest.vue

@@ -29,10 +29,10 @@ useAuthenticationChanges()
 <template>
   <div>
     <LayoutHeader v-if="showHeader" v-bind="header" :title="title" />
-    <main data-test-id="appMain">
+    <div data-test-id="appMain">
       <RouterView :key="testKey" />
-    </main>
-    <footer data-bottom-navigation />
+    </div>
+    <div data-bottom-navigation />
     <DynamicInitializer name="dialog" />
     <CommonNotifications />
     <CommonImageViewer />