FIX - restore Flare onboarding photo picker

frontend/src/views/apps/FlareApp.contract.test.ts

@@ -2,13 +2,10 @@ import { readFileSync } from 'node:fs'
 
 import { describe, expect, it } from 'vitest'
 
-const source = readFileSync(
-  new URL('./FlareApp.vue', import.meta.url),
-  'utf8',
-)
+const source = readFileSync(new URL('./FlareApp.vue', import.meta.url), 'utf8')
 
 describe('FlareApp profile editing contract', () => {
-  it('offers Gallery and Camera directly while creating an account', () => {
+  it('opens the central photo source picker while creating an account', () => {
     const onboardingStart = source.indexOf(
       '<template v-else-if="!flare.profile">',
     )
@@ -20,20 +17,22 @@ describe('FlareApp profile editing contract', () => {
 
     expect(onboardingStart).toBeGreaterThan(-1)
     expect(onboardingEnd).toBeGreaterThan(onboardingStart)
-    expect(onboarding).toContain('flare-photo-onboarding-sources')
-    expect(onboarding).toContain("openProfileMediaApp('photos')")
-    expect(onboarding).toContain("openProfileMediaApp('camera')")
-    expect(onboarding).toContain("phone.t('Apps.flare.choosePhotos')")
-    expect(onboarding).toContain("phone.t('Apps.flare.takePhoto')")
+    expect(onboarding).toContain('aria-controls="flare-photo-source-sheet"')
+    expect(onboarding).toContain('aria-haspopup="dialog"')
+    expect(onboarding).toContain('@click="openPhotoSourcePicker"')
+    expect(onboarding).not.toContain("openProfileMediaApp('photos')")
+    expect(onboarding).not.toContain("openProfileMediaApp('camera')")
   })
 
-  it('uses the central source picker when editing profile photos', () => {
+  it('uses the same Gallery and Camera picker for onboarding and editing', () => {
     const mediaAppStart = source.indexOf('function openProfileMediaApp')
     const mediaAppEnd = source.indexOf('function removeDraftPhoto')
     const mediaApp = source.slice(mediaAppStart, mediaAppEnd)
 
-    expect(source.match(/@click="openPhotoSourcePicker"/g)).toHaveLength(1)
-    expect(source).toContain('<sky-action-sheet')
+    expect(source.match(/@click="openPhotoSourcePicker"/g)).toHaveLength(2)
+    expect(source).toContain(
+      '<sky-action-sheet\n      id="flare-photo-source-sheet"',
+    )
     expect(source).toContain(
       '<sky-action-button bold @click="openProfileMediaApp(\'photos\')">',
     )

frontend/src/views/apps/FlareApp.vue

@@ -940,29 +940,18 @@ onBeforeUnmount(() => {
                 <X />
               </sky-link>
             </div>
-            <div
+            <sky-button
               v-if="draftPhotos.length < 6"
-              class="flare-photo-onboarding-sources"
-              role="group"
-              :aria-label="phone.t('Apps.flare.addPhotos')"
+              clear
+              class="flare-photo-add"
+              :class="{ 'is-empty': !draftPhotos.length }"
+              aria-controls="flare-photo-source-sheet"
+              aria-haspopup="dialog"
+              @click="openPhotoSourcePicker"
             >
-              <sky-button
-                tonal
-                rounded
-                @click="openProfileMediaApp('photos')"
-              >
-                <Images :size="19" aria-hidden="true" />
-                <span>{{ phone.t('Apps.flare.choosePhotos') }}</span>
-              </sky-button>
-              <sky-button
-                tonal
-                rounded
-                @click="openProfileMediaApp('camera')"
-              >
-                <Camera :size="19" aria-hidden="true" />
-                <span>{{ phone.t('Apps.flare.takePhoto') }}</span>
-              </sky-button>
-            </div>
+              <Plus />
+              <span>{{ phone.t('Apps.flare.addPhotos') }}</span>
+            </sky-button>
           </div>
         </sky-card>
         <sky-list inset strong>
@@ -1710,6 +1699,8 @@ onBeforeUnmount(() => {
               clear
               class="flare-photo-add"
               :class="{ 'is-empty': !draftPhotos.length }"
+              aria-controls="flare-photo-source-sheet"
+              aria-haspopup="dialog"
               @click="openPhotoSourcePicker"
             >
               <Plus />
@@ -1900,6 +1891,7 @@ onBeforeUnmount(() => {
     </div>
 
     <sky-action-sheet
+      id="flare-photo-source-sheet"
       :aria-label="phone.t('Apps.flare.addPhotos')"
       :opened="photoSourceOpened"
       @backdropclick="closePhotoSourcePicker"
@@ -2921,17 +2913,6 @@ onBeforeUnmount(() => {
   grid-column: 1 / -1;
   aspect-ratio: auto;
 }
-.flare-photo-onboarding-sources {
-  grid-column: 1 / -1;
-  display: grid;
-  gap: var(--sky-space-2);
-}
-.flare-photo-onboarding-sources :deep(.sky-button) {
-  min-height: var(--sky-touch-target);
-  height: auto;
-  justify-content: flex-start;
-  padding: var(--sky-space-2) var(--sky-space-4);
-}
 .flare-photo-grid :deep(.flare-photo-add svg) {
   width: 25px;
   height: 25px;