Add annotations to VBA Regional Office design

thejordanwood commented 10 months ago

Description

Add accessibility and design annotations to the VBA Regional Office design. This will help engineers as they create the front end designs. Use the Income Limits Sketch file as an example.

Note for all new designs: Use USWDS v3 components when available. Preference is not to mix v3 and v1 components. Consult Amanda.

Design

VBA Regional Office Sketch file

Acceptance criteria

[x] Add annotations to VBA Sketch file
[x] Review with accessibility
[x] Review with engineers
[x] @davidmpickett specifies annotations for open Service Accordion

thejordanwood commented 10 months ago

@xiongjaneg This is the ticket for adding accessibility and design annotations to VBA. I've refined this and think we should add it into next sprint if that works for you!

laflannery commented 10 months ago

I did most everything already (components, heading structure, etc.), just not the expanded accordions. I know a lot of that is editor managed text so it's not necessarily worth me going through that. If any of that can be determined by us though let me know and I can go through that as well

xiongjaneg commented 10 months ago

@laflannery Should I remove the a11y AC from this ticket?

laflannery commented 10 months ago

@xiongjaneg No, it can stay. There will probably be some review with Jordan, just to make sure there aren't questions in what I added or anything additional she adds

xiongjaneg commented 10 months ago

@davidmpickett Here's the ticket that Jordan has for annotations to the design if you want to sync up for additional context you want to provide

davidmpickett commented 9 months ago

Reopening per scrum discussion

thejordanwood commented 9 months ago

@davidmpickett I got ahead of myself! Please add any annotations you feel would be helpful.

davidmpickett commented 9 months ago

Service Accordion annotations (WIP)

These accordions use the borderless variant. This is a change from VAMC & Vet Center Service accordions, which currently use the bordered variant. Pending outcome of #16154, VAMCs may also switch to borderless variant. Not sure how much the service accordion templates are currently shared across Vet Center & VAMCs

National content

Official taxonomy name (h3)

Data source: health_care_service_taxonomy - Name
Component: Accordion / Header
h3

Plain-language name

This element will not be used on VBA accordions, we should remove it from the VBA Annotations sketch page for clarity
This element is used on VAMCs and Vet Centers

Common conditions

This element will not be used on VBA accordions, we should remove it from the VBA Annotations sketch page for clarity
This element is used on VAMCs and Vet Centers

Service description

Data source: health_care_service_taxonomy / field_vba_service_descrip

Manage your benefits online (h4)

Data source: Hard-coded in template
Only show if field_online_self_service for this service has data

You always have the option to apply for...

Data source: Hard-coded in template
Only show if field_online_self_service for this service has data

Learn how to manage [hub label] benefits online

Data source: health_care_service_taxonomy / field_online_self_service
Component: Link / Active

Local and Regional Content - Service Locations

Each Service Location will be it's own card component
Local content is powered by VBA Facility Service -> Service Location
- Cardinality is 1-3
- These should be listed before any Regional content
Regional content is powered by Service Region -> Service Location
- Cardinality is 0-1
- These should be listed after any Local content

Local example

Get help applying for [hub label] (h4)

Data source: health_care_service_taxonomy / field_facility_service_header

Short descriptive sentence

Data source: health_care_service_taxonomy / field_facility_service_descripti

🏢 Visit our office... 📞 Schedule an appointment...

Data source: Service Options is a new field on Service Location. Currently sitting in an integration branch: #15622

Appointments Header (h5)

Data source: Hard-coded in template
Only show if Service Location - Appointments has data. These fields will be created in #15559

Appointment description

Data source: Will be determined in #16153

Appointment phone

Data source: Will be created in #15559

Schedule an appointment online

Data source: Will be created in #15559
Data source will be: Yes/No/Unspecified
Link can be hard coded: https://va.my.site.com/VAVERA/s/

Service location address

Data source: vba_facility_service / field_service_location / service_location_address

Service location phone number(s)

IF: field_use_main_facility_phone is TRUE, repeat phone of vba_facility
ELSE: vba_facility_service / field_service_location / field_phone

Service location email(s)

Data source: vba_facility_service / field_service_location / field_email_contacts

Service location hours heading

Hard code & consider "Service hours" as generic title

Service location hours

Data source: vba_facility_service / field_service_location / field_hours
0|Use the facility's hours = NEW LOGIC -> replace hours with sentence "The service hours are the same as the facility hours."
2|Provide specific hours for this service = field_office_hours & field_additional_hours_info
1|Do not specify hours = hide this & header

Regional example

Task-oriented descriptive header (h4)

Data source: health_care_service_taxonomy -field_regional_service_header

Short descriptive sentence

Data source: health_care_service_taxonomy -field_regional_service_descripti

🏢 Visit our office... 📞 Schedule an appointment...

Data source: service_region / field_service_location
Service Options is a new field on Service Location. Currently sitting in an integration branch: #15622

Appointments Header (h5)

Data source: Hard-coded in template
Only show if Service Location - Appointments has data. These fields will be created in #15559

Appointment description

Data source: Will be determined in #16153

Appointment phone

Data source: Will be created in #15559
NOTE - If no phone number is provided here, the fallback phone number should be the phone number of "Primary VBA facility" from the Service Region

Schedule an appointment online

Data source: Will be created in #15559
Data source will be: Yes/No/Unspecified
Link can be hard coded: https://va.my.site.com/VAVERA/s/

Service location address

Data source: service_region / field_service_location / service_location_address

Service location phone number(s)

IF: field_use_main_facility_phone is TRUE, repeat phone of "Primary VBA facility" from the Service Region
ELSE: service_region / field_service_location / field_phone

Service location email(s)

Data source: service_region / field_service_location / field_email_contacts

Service location hours heading

Hard code & consider "Service hours" as generic title

Service location hours

Data source: service_region / field_service_location / field_hours
0|Use the facility's hours = SHOW hours of "Primary VBA facility" from the Service Region
2|Provide specific hours for this service = field_office_hours & field_additional_hours_info
1|Do not specify hours = hide this & header

davidmpickett commented 9 months ago

Did a quick mock up in Mural to go along with the notes above https://app.mural.co/t/departmentofveteransaffairs9999/m/vagov6717/1677277602711/74cecb64b6eeb9558aa868240cd726b54fcb93a7?wid=0-1700494668694

thejordanwood commented 9 months ago

@davidmpickett I added your annotations to the Sketch file.

department-of-veterans-affairs / va.gov-cms