Contact information- Page 1

### 📖 User Story
### User Story
**As a** Team Lead,
**I want** the Strata Hotel representative to fill out the "Step 1 - Contact Information" page,
**so that** we can collect accurate and complete contact information for both the registrant and the Strata Hotel representative, ensuring clear communication channels.

### Acceptance Criteria

### Context:
On the Contact Information page, we want to collect the contact details of the person filling out the form and the Strata Hotel representative(s). It's possible that it's the same person or a different person. To reduce repetitive manual data entry, we use a checkbox to allow the user to indicate if the person filling out the form is also the representative. We also give users the ability to add an additional Strata Hotel representative.

**DECISION** on Aug 15: For MVP, Strata Hotel users can only add one additional representative. We have a placeholder to change this rule after go-live.

#### 🎨 UX/UI Link:

### 📏 Business Rules

- [ ] Display stepper and highlight "Contact Information" stepper.
- [ ] Users can navigate to any steps of the application form by clicking on the icon of steps.
- [ ] Users can navigate to the next step by clicking the "Next" button.
- [ ] When users move to the next page or other pages of the application form, the stepper will indicate whether the page has all the required information (red/green indicator).
- [ ] If the user does not tick the checkbox for "Are you the Strata Hotel representative?", show the section "Person Completing Registration," asking for phone number (required), extension (optional), and email address (required). The full name will be pre-populated from the BC Service Card and is locked.
- [ ] If the user ticks the checkbox for "Are you the Strata Hotel representative?", hide the section "Person Completing Registration."
- [ ] Contact details for the primary and additional contact person include:
- First Name (required)
- Last Name (required)
- Position/Title (required)
- Phone number (required)
- Extension (optional)
- Fax number (optional)
- Email address (required)
- [ ] The first and last names should be pre-populated from the BC Service Card or Business BCeID and locked.
- [ ] Users can add additional contacts by clicking the "Add Another Contact" button.
- [ ] Users can add only one more contact.
- [ ] Users can remove additional contacts one at a time by clicking "Remove" (this removes the entire additional contact card, not just clears the fields).
- [ ] Support mobile view.
- [ ] Field validations https://bcgov.sharepoint.com/:x:/r/teams/09399/Shared%20Documents/Product-Scrum%20Team%20Chat/Field%20validation%20and%20Status%20Table.xlsx?d=wd73427566b6148b48776b7c8682de8e9&csf=1&web=1&e=WDe7vr
- [ ]

### 🎭 Story Scenarios

#### Scenario 1: User clicks on "Create Strata Hotel Application" from the Dashboard
- **Given** the user is authenticated, has chosen an account, and has the role "Strata Manager"
- **When** the user clicks "Create Strata Hotel Application" from the dashboard
- **Then** the user is presented with the Strata Hotel Application Form and "Step 1 - Contact Information" page loads
- **Then** the title of the page should be displayed as "Step 1 - Contact Information" with a subheading "Person Completing Registration" and "Strata Hotel representative"

#### Scenario 2: User doesn't check that they are a Strata Hotel representative
- **Given** a user sees the checkbox labeled "Are you the Strata Hotel representative?",
- **When** they leave the checkbox unchecked,
- **Then** they need to fill out the contact information for the person completing the form
- **And Then** their response should be recorded in the database.

#### Scenario 3: Person Completing Registration Section - name auto-populates
- **Given** the user is filling out the "Person Completing Registration" section,
- **When** the page loads,
- **Then** the "Name" field should be auto-populated from the SBC Connect Account with a note stating "This is your legal name as it appears in your SBC Connect Account."

#### Scenario 4: User checks that they are a Strata Hotel representative
- **Given** a user sees the checkbox labeled "Are you the Strata Hotel representative?",
- **When** they select the checkbox,
- **Then** their response should be recorded in the database.

#### Scenario 5: Strata Hotel Representative Section - name auto-populates
- **Given** the user is filling out the "Strata Hotel Representative" section,
- **When** the page loads,
- **Then** the "Name" field should be auto-populated from the SBC Connect Account with a note stating "This is your legal name as it appears in your SBC Connect Account."

#### Scenario 6: Person Completing Registration Contact Details Section
- **Given** the user is in the "Person Completing Registration" section,
- **When** entering contact details,
- **Then** they should be presented with fields for:
- Phone number, extension
- Email address

#### Scenario 7: Strata Hotel Representative Section
- **Given** the user is filling out the "Strata Hotel Representative" section,
- **When** entering the contact details,
- **Then** the following fields should be available:
- First Name, Last Name
- Position/Title with associated text "Enter your current job title or position"
- Phone number, Extension
- Fax number (optional)
- Email address with a highlighted note: "Email will be the default method of communication notices sent to applicants."

#### Scenario 8: Add Additional Contacts
- **Given** the user has filled out the contact information,
- **When** they need to add another contact,
- **Then** they should be able to click a button labeled "Add Another Contact."

#### Scenario 9: Remove Contacts Added
- **Given** the user has filled out additional Strata Hotel rep contact information,
- **When** they want to remove one additional contact,
- **Then** they should be able to click a button labeled "Remove."

#### Scenario 10: Next button functionality
- **Given** I am on the "Step 1 Contact Details" page,
- **When** I click the "Next" button at the bottom of the page,
- **Then** I should be navigated to the "Step 2 Business Details" page,
- And any information I have entered in "Step 1 Contact Details" should be stored in the database.
- and any validations should be run
-
### Scenario 11: User moves off the "Contact Information" page, and validations are triggered.

**Given** the user is on the "Contact Information" page of the STR Strata Hotel Registration Form
**When** the user tries to move to the next step by clicking the "Next" button or any step in the stepper
**Then** form validation should be triggered for all required fields on the "Contact Information" page
**And** if there are missing or incorrect fields, those fields should display error messages and have a red line around them (I can't remember if this is actually what happens)
**And** the step on the stepper should show a red X to indicate there are errors
**And** the user should not be allowed to proceed to the next step until all errors are resolved.

**Example Validation Error:**

- **Given** a required field like "First Name" is left blank
- **When** the user tries to move to the next step or clicks another step on the stepper
- **Then** the "First Name" field should display an error message, such as "First Name is required," and have a red line around it
- **And** the stepper should display a red X on the "Contact Information" step.

##

🌐 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 be logical and sequential

Scenario: Descriptive Form Fields
Given I am filling out a form using a screen reader
When I navigate through the form fields
Then each field should be clearly labeled with descriptive text
And instructions should be directly associated with their respective inputs

### Low Vision Users
Scenario: Effective High Contrast Mode
Given I am a user with low vision on the website
When I enable high contrast mode
Then all content should display with high color contrast suitable for low vision
And the layout should remain coherent and unchanged

Scenario: Text Resizing Accommodation
Given I am a user with low vision on the website
When I increase the text size
Then the text should resize without loss of information or functionality
And the page layout should adapt accordingly without disrupting the user experience

Scenario: Personalized Styling Preferences
Given I am a user with low vision adjusting settings on the website
When I customize my styling preferences, including colors, fonts, and spacing
Then these adjustments should be applied consistently across all pages
And the changes should persist during my entire session or until altered by me

No repository files, tests, or entry points are named in the issue. Start by locating the existing Strata Hotel application form and its Contact Information step, then compare the implementation with the listed business rules and scenarios. Done means the page supports the specified fields, representative/contact controls, navigation, persistence, validation, mobile layout, and accessibility behavior.

Written by the indexing model from the issue text.