bcgov
Application Details View - Fee Amount
📖 User Story
🔹 As a host, authenticated with Service BC and being directed to the registration form
🔹 I want to view the fee information,
🔹 so that, I can understand the total fee amount required for my registration.
Context
We need to show hosts that a registration fee will be charged after completing the registration form. We do not know the fee structure until Mid-June. The fee structure may be based on property location, type of users (i.e., hosts and platforms. we focus on hosts for the 1st iteration) and the exact amount will not be available until property info is entered.
📏 Business Rules
- [ ] Keep fee amount $0 for now until we confirm fee structure
🎭 Story Scenarios
Scenario: Viewing Registration Fee Information
Given a user is in the process of completing their registration, When the user reaches the payment or fee information section, Then the system should display the total fee amount required for the registration, And include a detailed breakdown of the fee components, if applicable, And update the displayed fee information in real-time if the user makes any selections that affect the total fee.
Figma Link to desktop context:
https://www.figma.com/file/R9GF5wvwq2TrnbnsbhPfvV/STR-Host-Application-Tickets?type=design&node-id=716-34395&mode=design&t=TMQ5w9Fx8jKGhdsX-4
Figma Link to mobile context:
https://www.figma.com/file/R9GF5wvwq2TrnbnsbhPfvV/STR-Host-Application-Tickets?type=design&node-id=2002-30167&mode=design&t=TMQ5w9Fx8jKGhdsX-4
Figma link to mobile prototype:
https://www.figma.com/proto/R9GF5wvwq2TrnbnsbhPfvV/STR-Host-Application-Tickets?type=design&node-id=2002-30167&t=Jtte5NB25NktAhCv-9&scaling=min-zoom&page-id=716%3A34327&starting-point-node-id=2002%3A30167&show-proto-sidebar=1
Fee summary mobile toggle demo:
https://www.loom.com/share/3e65d8c155f54c54bb336edac8c7e5e4?sid=40a28c1a-76c0-4057-97bd-05f0b4bbcc36
🔗 Mural Links
Story in Mural: https://app.mural.co/t/citzservicebcbcros0435/m/citzservicebcbcros0435/1706554024951/153dc4e4f3fbbd7cfc1352e0c804cb105960321e?wid=0-1710967967723
🌐 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
🌍 Global Scenarios
## Data Validation # Mikaela to confirm: Do we need to do these for MVP - data validation required for inputing data in the right format - as defined by business rules.Internet Connection
Scenario 1: Standard Internet Connection
- Given I am accessing the website from a standard internet connection
- When I navigate to any page on the site
- Then the page should load completely within 2 seconds, ensuring a fast and efficient user experience.
Scenario 2: Optimizing Dashboard for Hosts with Low Internet Connectivity
- Given a user accesses [Form Name] with a low-speed internet connection
- When the user attempts to load and interact with the dashboard page
- Then [Form Name] should prioritize critical content and functionality, loading essential elements first to ensure usability.
Mobile Responsiveness
Scenario 1: Mobile Responsiveness
- Given I am accessing [Form Name] on a mobile device
- When I click on the "[Link Name]" link
- Then [Form Name] should display correctly and be easily editable on my device, ensuring a responsive design.
@atronse hey please check that I did the right link to figma
Updated the desktop link to point directly to the Fee summary frame and added a links to the mobile context and prototypes
-
[ ] Fee summary should be collapsed by default on Mobile page.
-
[ ] If you move between the collapsed view of the Mobile Fee summary and the desktop view of the Fee summary, the control to open the fee summary is hidden. https://www.loom.com/share/2f12a5487a6c4cfaae41ecda5a5ec058?sid=7e197fba-e5bf-406f-844e-c21c6dc4e894
-
[ ] The fee summary is lacking some accessibility context. I think that we would benefit from having main and aside regions, and aside should be applied to the fee summary, I think aria-live region as well as it will be updating dynamically. This could be the scope for another story though, I'm not sure.
-
[ ] There should be some extra margin at the bottom of the footer, so that the links in the footer are accessible. Also, this will help with the next button being hidden behind the open fee summary.
-
[ ] Missing drop shadow on the Fee summary component
-
[ ] Target area for the fee summary collapse/expand should be the whole bar, not just the icon
-
[ ] The dash on the empty fee summary is not announced. Maybe we could add some hidden text with a screen reader only class -- text value="null"
From a content perspective the fee summary is always present in the HTML so I think a role of complementary works here:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role
Hey all do you need my input here? @atronse if what you're asking in the above message is new requirements from what was in the story then it is a new story.
