Open kjduensing opened 1 year ago
@RLHecht I know y'all are busy, would you mind sharing a quick status update when you get the chance? Thanks!
Hi @kjduensing the sign-in widget is not something our team manages. I believe this is in the design system as an H3 so would need to be changed universally.
We also didn't create the mobile device alert in drupal. It was created by the mobile team and we added it to the static page. So we wouldn't be able to fix this one either unfortunately.
@kjduensing Let me know if i should close this out or take it off our board. Thanks!
@RLHecht got it! I'll write up a bug ticket for the DST
@kjduensing @RLHecht , it looks like they may have updated this to a h2
in the design system. Not an engineer by any means, but is this a matter of just refreshing the component we're using? Not sure why it's rendering as a h3
when the source should be a h2
😕
@kjduensing @RLHecht small bump on this; would y'all or anyone y'all know have an answer to the prior question? I can also try to ask in the design system channel.
That sounds right to me, but also not an engineer so I'm not sure how this gets fixed! We can put in a new sign-in widget if someone can tell us the app code we'll need. Though I don't know if that's what's needed.
So small caveat - I'm not real familiar with the design system components. That said, looking at the docs, it appears you can specify the html tag of your choosing for the headline (Stories -> "View code" on any of the examples):
<va-alert>
<h2 slot="headline">
Track your claim or appeal on your mobile device
</h2>
// ...
</va-alert>
My take on this is whoever owns the sign in widget has rendered this va-alert
with an h2
instead of an h3
.
Hope it helps!
Actually, it might go deeper than that. The hierarchy of components is extremely customizable all the way down, which is great in some ways, but makes it difficult to track down exactly where the headingLevel
property is set.
My take on this is whoever owns the sign in widget has rendered this va-alert with an h2 instead of an h3.
This is fantastic @kjduensing ! Dumb question here on the download letters page
h2
, is there a reason why it's showing up as a h3
on this page?h3
in the code.h3
and simply change it to an h2
. The change is trivial, but there are some challenges:
@jamigibbs and @Mottie this might be a long shot, but by any chance do either of you have answers to Kevin's second question?
@joshkimux If this is the va-alert component, then the way to change the header element for the "Sign in to get your...." text would be to use the headline
slot with whichever header size needed.
This is wha @kjduensing mentioned above: https://github.com/department-of-veterans-affairs/va.gov-team/issues/50215#issuecomment-1525711712
If we're unsure if this is va-alert, can you provide a link to where this is located? I'll be happy to inspect and confirm.
I can confirm this is a va-alert :)
That page looks like it's a static content page, so you'd have to report the problem to the sitewide content people. I remember someone mentioned that they reported the H4
placed before the H1
, but I can't find the reference
@RLHecht do you know of any engineers on the sitewide content team this could be assigned to?
Oh wait, that's using the standard call to action widget - I haven't dived into that code, but here is where the letters app is defined. The call to action alert code does include a headerLevel
.
Update: Whatever calls the cta-widget
code is passing in a headerLevel
prop
Right, @Mottie, but what's calling the CTA widget? I wasn't able to tell what sets the actual headerLevel
prop..
@RLHecht or @SarahKay8 , do you know who we should best route this to? cc: @coforma-terry
Uncertain who owns this code. Not sure about the next steps.
CAIA to check in with DST on Slack.
Hey @eli-oat - did DST shed any light on who owns this code?
@coforma-terry followed back up for further info in the DST channel
@coforma-terry -- per DST, this is owned by the public websites/sitewide team.
@strelichl - we need to transfer this to public websites to implement 👍
@coforma-terry @strelichl Added to our next refinement to review. Thanks!
@laflannery FYSA, since this is about header levels. The CTA widget is used across several health apps pages (e.g. test results, refill rx, schedule an appt, etc.). I'm not certain if the header levels are set per page where it's called, or once and for all. We'll need to think about that during this ticket.
From FE refinement:
va-alert
DS component: https://github.com/department-of-veterans-affairs/va.gov-cms/issues/13860. To use H2 instead, you have to override and pass that in.Un-auth heading levels:
I can't find Drupal Pages for the below. The only pages I can find that have the widget aren't in Drupal so I might have the wrong page or maybe these got moved away from PW, maybe?:
Based on this list (and not including the ones where I couldn't find a Drupal page), H3 does look like it is the correct default heading level - there being 11 H3's and only 9 H2's - there is not an overwhelming majority though. I had to ask Megan Zehnder a question about a page and she mentioned they have been putting more content into widgets so I asked her what she thought would be the more common pattern going forward and she said she would get back to me.
@FranECross are we ok to close this?
@laflannery Based on your last comment and research, is there work for the PW team (or a different team) to do on this ticket, or may it be closed? cc @strelichl @jilladams
@FranECross It would depend on if the headings are correct on all the widgets we own
@FranECross I'm assuming your thumbs up means widgets are good to go and we can close? Just want to make sure!
@strelichl Apologies for the confusing thumbs up. 😉 I was just acknowledging Laura's note and believe we'll need to review the headings on the widgets we own to ensure they are correct. I've added this to my task list and will follow up.
Status
[2024-02-27]
[2024-02-21]
CAIA Assignees
What does your team need support for? Check all that apply.
What do you need help with?
Please be specific about the content or IA support you need and provide any additional documents and/or links that will help us help you. If we need to add a react widget to a page, be sure to provide the code here.
We found in an accessibility audit that the organization of headings was not ordered logically for users with screen readers. We're looking for someone to change the heading levels on the
. Please also see the linked ticket under the Supporting Artifacts section
<SignIn/>
CTA Widget and theva-detailpage-sidebar
to be more accessible to folks using screen readers. I've attached a screenshot of the Headings Map tool output:Specifically:
<h2/>
instead of an<h3/>
.<h3/>
, not a<h2/>
Please feel free to reach out if y'all need more info. Thank you!
Will this new product be released incrementally (for instance 25% of users initially)?
Note: If you checked yes, we'll reach out to discuss details about the content in the react widget.
When do you expect to launch your product to 100% of users?
Please provide an estimated date so our team can create other relevant tickets.
Supporting artifacts
Please provide supporting artifacts as available.
Will this work be going through the Collaboration Cycle?
When does this work need to be done?
Do you plan to bring this to an upcoming content office hours session?
Note: If we think this work would benefit from a collaborative session with you, we may ask you to bring it to office hours or set up a separate time to meet.
About your team
Next steps
Once you’ve submitted this ticket, please post a link to this issue in the #sitewide-content-ia Slack channel and tag Randi Hecht.
If you also need engineering support from the Public Websites team, fill out their intake request form.
If you need a page/URL redirected, a URL changed or a vanity URL set up, please submit a Redirect, URL change, or vanity URL request