Page/Component Object refactor; Added new tests for Landing/Home/Sign-in pages

frontend/components/SearchBar.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="location == SearchBarLocation.SIDEBAR"
+    id="search"
     class="elem-shadow-sm mx-2 flex grow select-none items-center justify-between rounded-md bg-light-layer-2 py-1 pl-[12px] text-left text-light-distinct-text transition duration-200 focus-within:mb-[-3px] focus-within:border-2 focus-within:border-light-link-text dark:bg-dark-layer-2 dark:text-dark-distinct-text dark:focus-within:border-dark-link-text"
   >
     <div class="flex items-center space-x-2 pl-1">
@@ -69,10 +70,12 @@
   </div>
   <div
     v-else
+    id="search"
     class="relative inline-flex select-none items-center space-x-2 rounded-md border border-light-distinct-text bg-light-layer-2 py-1 pl-[12px] pr-[10px] text-left text-light-distinct-text focus-within:border-2 focus-within:border-light-cta-orange dark:border-dark-distinct-text dark:bg-dark-layer-2 dark:text-dark-distinct-text dark:focus-within:border-dark-cta-orange"
   >
     <Icon
       @click="emit('on-search-toggle')"
+      id="search-toggle"
       class="my-1 h-4 w-4 flex-shrink-0"
       :name="expanded ? `${IconMap.X_LG}` : `${IconMap.SEARCH}`"
       size="1em"
@@ -81,7 +84,7 @@
       $t("_global.search")
     }}</label>
     <input
-      id="expanded-search-input"
+      id="input-search"
       class="bg-transparent focus:outline-none"
       :class="{ hidden: !expanded }"
       type="text"

frontend/components/dropdown/DropdownItemsLayout.vue

@@ -8,6 +8,7 @@
     <MenuLinkWrapper
       v-for="opt in options"
       :key="opt.id"
+      :id="getSelectorId(opt.label)"
       :to="opt.routeURL"
       :selected="opt.selected"
       :isAddStyles="false"
@@ -42,4 +43,27 @@ const isSideLeftMenu = computed(() => {
 const isSideMenu = computed(() => {
   return props.location === DropdownLocation.SIDE_MENU;
 });
+
+const getSelectorId = (label: string) => {
+  const idMap: Record<string, string> = {
+    help: "help",
+    doc: "docs",
+    legal: "legal",
+    profile: "profile",
+    events: "your-events",
+    orgs: "your-organizations",
+    notifications: "notifications",
+    settings: "settings",
+    sign_out: "sign-out",
+    sign_up: "sign-up",
+    sign_in: "sign-in",
+    new_event: "create-new-event",
+    new_organization: "create-new-organization",
+    new_group: "create-new-group",
+    new_resource: "create-new-resource",
+  };
+
+  const key = Object.keys(idMap).find((k) => label.includes(k));
+  return key ? idMap[key] : undefined;
+};
 </script>

frontend/components/header/HeaderAppPage.vue

@@ -40,7 +40,7 @@
       </div>
     </div>
   </div>
-  <div class="flex items-baseline gap-2 md:gap-4">
+  <div id="home-header" class="flex items-baseline gap-2 md:gap-4">
     <h1
       class="responsive-h1 pt-4 font-bold text-light-text transition-all duration-500 dark:text-dark-text"
     >

frontend/components/header/HeaderMobile.vue

@@ -2,6 +2,7 @@
   <header
     v-if="!aboveMediumBP"
     ref="header"
+    id="mobile-header"
     class="sticky top-0 z-50 h-12 w-full bg-light-layer-2 drop-shadow-md duration-500 dark:bg-dark-layer-2"
   >
     <div class="h-full">
@@ -29,14 +30,17 @@
             />
             <DropdownCreate
               v-if="userIsSignedIn"
+              id="create"
               class="w-full"
               :location="DropdownLocation.SIDE_MENU"
             />
             <DropdownInfo
+              id="info"
               class="w-full"
               :location="DropdownLocation.SIDE_MENU"
             />
             <DropdownUserOptions
+              id="user-options"
               class="w-full"
               :location="DropdownLocation.SIDE_MENU"
               :userIsSignedIn="userIsSignedIn"

frontend/components/header/HeaderWebsite.vue

@@ -35,16 +35,19 @@
           />
           <DropdownCreate
             v-if="userIsSignedIn && devMode.active"
+            id="create"
             class="w-full"
             :location="DropdownLocation.SIDE_MENU"
           />
           <DropdownInfo
             v-if="devMode.active"
+            id="info"
             class="w-full"
             :location="DropdownLocation.SIDE_MENU"
           />
           <DropdownUserOptions
             v-if="devMode.active"
+            id="user-options"
             class="w-full"
             :location="DropdownLocation.SIDE_MENU"
             :userIsSignedIn="userIsSignedIn"

frontend/components/indicator/IndicatorPasswordStrength.vue

@@ -4,12 +4,14 @@
       class="h-1 rounded-md bg-light-distinct-text dark:bg-dark-distinct-text"
     >
       <div
+        id="password-strength-indicator-progress"
         class="h-1 rounded-md transition-width duration-500 ease-in"
         :class="!!passwordValue.length ? `${color}` : ''"
         :style="`width: ${width}%;`"
       ></div>
     </div>
     <div
+      id="sign-in-password-strength-text"
       class="float-right mt-1 text-xs"
       :class="{
         'text-light-distinct-text dark:text-dark-distinct-text':

frontend/components/menu/mobile/MenuMobileNavBar.vue

@@ -6,6 +6,7 @@
       <ul class="flex">
         <li v-for="(item, index) in menuItems" :key="index" class="flex-1">
           <MenuMobileSelector
+            :id="getSelectorId(item.label)"
             class="rounded-none"
             :label="item.label"
             :routeURL="item.routeURL"
@@ -23,4 +24,15 @@
 const isActive = (routeURL: string) => {
   return isRouteActive(routeURL);
 };
+
+const getSelectorId = (label: string) => {
+  const idMap: Record<string, string> = {
+    home: "home",
+    events: "events",
+    organizations: "organizations",
+  };
+
+  const key = Object.keys(idMap).find((k) => label.includes(k));
+  return key ? idMap[key] : undefined;
+};
 </script>

frontend/components/menu/mobile/MenuMobileNavigationDropdown.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="selectedMenuItem"
+    id="submenu"
     class="fixed z-20 h-10 w-full bg-light-menu-selection dark:bg-dark-menu-selection"
   >
     <Listbox v-model="selectedMenuItem">
@@ -40,6 +41,11 @@
           >
             <NuxtLink @click="handleItemClick(menuEntry)">
               <li
+                :id="
+                  (sidebarType === SidebarType.ORGANIZATION_PAGE
+                    ? 'org-'
+                    : 'event-') + menuEntry.label.split('.').pop()
+                "
                 class="relative flex cursor-default select-none items-center py-2 pl-5 align-middle"
                 :class="{
                   'bg-light-layer-2 fill-light-text text-light-text dark:bg-dark-section-div dark:fill-dark-text dark:text-dark-text':

frontend/components/modal/ModalBase.vue

@@ -14,6 +14,7 @@
       }"
     >
       <DialogPanel
+        id="search-modal"
         :class="{
           'flex flex-col items-center': imageModal,
           'card-style-base container h-full w-full max-w-4xl cursor-default overflow-y-auto bg-light-layer-0 p-5 pl-6 text-light-text dark:bg-dark-layer-0 dark:text-dark-text md:h-auto':
@@ -23,6 +24,7 @@
         <button
           v-if="imageModal"
           @click="closeModal()"
+          id="close-search-modal"
           class="focus-brand absolute right-0 mr-24 mt-8 rounded-full p-1 text-light-distinct-text hover:text-light-text dark:text-dark-distinct-text hover:dark:text-dark-text"
           :aria-label="$t('components.modal_base.close_modal_aria_label')"
         >

frontend/components/sidebar/left/SidebarLeft.vue

@@ -8,6 +8,7 @@
       handleFocusOut($event);
     "
     ref="sidebarWrapper"
+    id="sidebar-left"
     role="menu"
     tabindex="0"
     class="elem-shadow-sm focus-brand absolute z-40 block h-full flex-col border-r border-light-section-div bg-light-layer-1 transition-all duration-500 dark:border-dark-section-div dark:bg-dark-layer-1 md:flex"

frontend/components/sidebar/left/SidebarLeftFooter.vue

@@ -10,14 +10,17 @@
     >
       <DropdownCreate
         v-if="userIsSignedIn"
+        id="create"
         class="w-full"
         :location="DropdownLocation.SIDE_LEFT_MENU"
       />
       <DropdownInfo
+        id="info"
         class="w-full"
         :location="DropdownLocation.SIDE_LEFT_MENU"
       />
       <DropdownUserOptions
+        id="user-options"
         class="w-full"
         :location="DropdownLocation.SIDE_LEFT_MENU"
         :userIsSignedIn="userIsSignedIn"

frontend/components/sidebar/left/SidebarLeftHeader.vue

@@ -38,6 +38,7 @@
             sidebar.toggleCollapsedSwitch();
             emit('toggle-pressed');
           "
+          id="sidebar-left-toggle"
           class="focus-brand flex h-7 w-7 items-center justify-center outline-offset-0 transition duration-200"
           :class="{
             '-rotate-180 pr-0.5': sidebar.collapsedSwitch == false,

frontend/components/sidebar/left/SidebarLeftIndex.vue

@@ -61,6 +61,7 @@
         />
       </div>
       <ul
+        id="submenu"
         class="mb-1 flex w-full flex-col px-1"
         :class="{
           'mt-4':
@@ -75,6 +76,11 @@
             : menuEntriesState.eventEntry.value"
         >
           <SidebarLeftSelector
+            :id="
+              (sidebarType === SidebarType.ORGANIZATION_PAGE
+                ? 'org-'
+                : 'event-') + menuEntry.label.split('.').pop()
+            "
             :label="menuEntry.label"
             :routeURL="menuEntry.routeURL"
             :iconURL="menuEntry.iconURL"

frontend/components/sidebar/left/SidebarLeftMainSectionSelectors.vue

@@ -7,6 +7,7 @@
       <SidebarLeftSelector
         v-for="(item, index) in menuItems.slice(1, 3)"
         :key="index"
+        :id="getSelectorId(item.label)"
         :label="item.label"
         :routeURL="item.routeURL"
         :iconURL="item.iconURL"
@@ -21,4 +22,14 @@
 const isActive = (routeURL: string) => {
   return isRouteActive(routeURL);
 };
+
+const getSelectorId = (label: string) => {
+  const idMap: Record<string, string> = {
+    organizations: "organizations",
+    events: "events",
+  };
+
+  const key = Object.keys(idMap).find((k) => label.includes(k));
+  return key ? idMap[key] : undefined;
+};
 </script>

frontend/components/sidebar/left/SidebarLeftSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <MenuLinkWrapper :to="routeURL" :selected="selected">
+  <MenuLinkWrapper :id="id" :to="routeURL" :selected="selected">
     <div
       class="relative z-0 flex w-full items-center space-x-2 text-left text-sm font-medium"
     >
@@ -28,6 +28,7 @@ defineProps<{
   routeURL: string;
   iconURL: string;
   selected: boolean;
+  id?: string;
 }>();
 
 const sidebar = useSidebar();

frontend/nuxt.config.ts

@@ -31,6 +31,14 @@ export default defineNuxtConfig({
     server: {
       watch: {
         usePolling: true,
+        ignored: [
+          "**/playwright/**",
+          "**/playwright-report/**",
+          "**/tests/**",
+          "**/test-results/**",
+          "**/frontend/test-results/**",
+          "**/frontend/test-results/accessibility-results/**",
+        ],
       },
     },
   },

frontend/package.json

@@ -24,19 +24,21 @@
     "@nuxtjs/i18n": "8.5.5",
     "@nuxtjs/tailwindcss": "6.12.1",
     "@pinia/nuxt": "0.5.5",
-    "@playwright/test": "1.48.0",
+    "@playwright/test": "1.48.2",
     "@types/node": "22.7.5",
     "@types/uuid": "10.0.0",
     "@types/zxcvbn": "4.4.5",
     "@vueuse/core": "11.1.0",
     "@vueuse/nuxt": "11.1.0",
+    "axe-core": "^4.10.0",
+    "axe-html-reporter": "^2.2.11",
     "cross-env": "7.0.3",
     "eslint": "9.12.0",
     "eslint-plugin-vue": "9.29.0",
     "eslint-plugin-vuejs-accessibility": "2.4.1",
     "nuxt": "3.13.2",
     "nuxt-icon": "0.6.10",
-    "playwright": "1.48.0",
+    "playwright": "1.48.2",
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "0.6.8",
     "rollup": "4.24.0",
@@ -81,6 +83,6 @@
     "zxcvbn": "4.4.2"
   },
   "resolutions": {
-    "playwright-core": "1.45.1"
+    "playwright-core": "1.48.2"
   }
 }

frontend/pages/auth/sign-in.vue

@@ -4,29 +4,35 @@
       <div class="col">
         <FormTextInput
           @update:model-value="userNameValue = $event"
+          id="sign-in-username"
           :placeholder="$t('pages.auth._global.enter_user_name')"
           :model-value="userNameValue"
         />
       </div>
       <div>
         <FormTextInput
           @update:model-value="passwordValue = $event"
+          id="sign-in-password"
           :placeholder="$t('_global.enter_password')"
           :is-icon-visible="true"
           input-type="password"
           :model-value="passwordValue"
           :icons="[IconMap.VISIBLE]"
         />
       </div>
-      <IndicatorPasswordStrength :password-value="passwordValue" />
+      <IndicatorPasswordStrength
+        id="sign-in-password-strength"
+        :password-value="passwordValue"
+      />
       <div class="flex flex-col space-y-3">
-        <FriendlyCaptcha />
+        <FriendlyCaptcha id="sign-in-captcha" />
         <button
           @click="navigateTo(localePath('/auth/reset-password'))"
           @mouseover="hovered = true"
           @focus="hovered = true"
           @mouseleave="hovered = false"
           @blur="hovered = false"
+          id="sign-in-forgot-password"
           :disabled="isForgotPasswordDisabled"
           class="text-start font-bold"
           :class="{ 'link-text': !isForgotPasswordDisabled }"
@@ -38,6 +44,7 @@
           :text="$t('pages.auth.sign_in.forgot_password_captcha_tooltip')"
         />
         <BtnAction
+          id="sign-in-submit"
           class="flex max-h-[48px] w-[116px] items-center justify-center truncate md:max-h-[40px] md:w-[96px]"
           :label="$t('_global.sign_in')"
           :cta="true"
@@ -48,6 +55,7 @@
       <div class="flex pt-4 md:justify-center md:pt-6 lg:pt-8">
         <h6>{{ $t("pages.auth.sign_in.index.no_account") }}</h6>
         <NuxtLink
+          id="sign-in-signup-link"
           :to="localePath('/auth/sign-up')"
           class="link-text ml-2 font-extrabold"
           >{{ $t("_global.sign_up") }}

frontend/pages/home/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    id="home-page-main"
     class="bg-light-layer-0 px-4 text-light-text dark:bg-dark-layer-0 dark:text-dark-text xl:px-8"
   >
     <Head>