Strata Hotel Stepper

# 📖 User Story

**As a user**, immediately after choosing to either use an SBC-Connect Account and have the Strata Hotel role assigned
**I want** to be presented with the "Contact Information" page **featuring a stepper for each step in the application (Contact Information, Business Details, Strata Hotel Details, and Review and Confirm)**
**So that** I can easily navigate through the application process and have constant access to my account information, notifications, and other essential tools.

## Context:

A user will have authenticated using "BC Services Card" or "Business BCeID", then behind the scenes, the "SBC-Connect" platform will check to see if the user already has an account with SBC-Connect. If they do, the user will be presented with a screen that shows all of their accounts and directs them to pick an account or create a new one.

Our system will also check to see what role they have. If they don't have a role, they will select their role (previous story). This stepper only applies to users with the "Strata Hotel Role."

The user will then go to a page that serves as an envelope for the rest of the application process, called the STR Envelope. Within the registration form, the following pages will be included:

- Contact Information Page
- Business Details Page
- Strata Hotel Details Page
- Review and Confirm Page

## UX/UI Designs:

## 📏 Business Rules

- [ ] The title of this page is "Strata Hotel Registration Application"
- [ ] The icons on the stepper are meaningful
- [ ] The stepper will have 4 steps: Contact Information, Business Details, Strata Hotel Details, and Review and Confirm
- [ ] The stepper should highlight the "Contact Information" step when the user is on that page
- [ ] Users can navigate to different steps by clicking on the icons in the stepper
- [ ] Users will be redirected to the corresponding page after clicking a step

## Technical Breakdown (copied from a previous story so I don't know if these are accurate or not

- [ ] UI - create a page for Strata Hotel registration and add a stepper (reuse existing component and modify configuration as necessary)
- [ ] No backend modifications required

## 🎭 Story Scenarios

### Scenario 1: User has an SBC Account and has selected one of the accounts.

**Given** I have the "Strata Hotel" role assigned
**When** I click to select my account or have selected my role (previous step)
**Then** I should be taken directly to the "Strata Hotel Registration Application Form"
**And** I should see a stepper indicating the steps in the application process: Contact Information, Business Details, Strata Hotel Details, and Review and Confirm
**So that** I can efficiently navigate through my application with all necessary information and tools at my disposal.

🌐 Accessibility Scenarios

### Keyboard Users
Scenario: Comprehensive Keyboard Navigation
Given I am a keyboard user on the website
When I use the Tab key to navigate through the website
Then all interactive elements should be accessible and highlighted
And I should be able to activate these elements using the Enter or Space key

Scenario: Full Content Accessibility via Keyboard
Given I am a keyboard user navigating the website
When I traverse through different pages and sections
Then all content should be fully accessible using the keyboard alone
And there should be no traps that prevent me from navigating away using the keyboard

### Screen Reader Users
Scenario: Accessible Image Descriptions
Given I am using a screen reader on the website
When I encounter images
Then each image should have descriptive alt text that conveys the same message as the image

Scenario: Structured Navigation for Screen Readers
Given I am navigating the website using a screen reader
When I move through different page elements
Then the content should be structured with proper headings
And the reading order should

Start by locating the existing stepper component and the Strata Hotel registration entry point. Verify the four required steps, the highlighted Contact Information state, and navigation from each step icon. Done means the page title and four-step navigation meet the listed business and accessibility scenarios, with no backend changes.

Written by the indexing model from the issue text.