Group 3: Banner and Image audit on the website #2906
Conversation
In this audit I fixed the following component pages: - Accordion - Alert - App-footer - App-header - App-side-nav - ApplicationState - badge -Icons - Segmented group - app-frame --- All other pages (x) total are okay with no changes needed
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
The pages you updated look good! I looked through and there are some banners that need to be updated in other tabs:
- Accordion - code tab - title tag
- Alert - code tab - tag
- Alert - code tab - generic content
- App Side Nav - code tab
- App side nav - code tab - portals
- Application state - code tab - title tag
- Icons - code tab - color
- Icons - code tab - aligning icons
- Icons - code tab - animated icons
- Icons - version history tab - 4.9.0
- Segmented group - specifications tab - base component
- Stepper nav - code tab - without panels
Thank you for calling these out @shleewhite! I made those changes. |
|
Some questions:
(This might be true for all the Specs pages, if this is ok then all good to ignore me)
|
I think we’ve been pretty consistent about placing the image first and then the chart in the specifications tab, so changing that order might open up a bigger discussion.
Good callout, yeah, it’d be out of scope for this work. It might be worth making a backlog ticket so we can revisit it later. |
|
@LilithJames-HDS The anatomy image above the table on the specification page makes sense because the content in the table is referencing the content in the image. Additionally, the image is more important as it showcases each element that makes up the component, and therefore should come first. As for the other two items, they are outside the scope of this project. For the alerts, this is because there is predefined spacing between certain elements, and these are components followed by text, which I'm not sure is defined since it's not common. If these are updated to images, the spacing issue would likely resolve. Feel free to create a ticket if you'd like. Good call-out about the badges. Please create a ticket and include locations for any outdated badges you come across. |
| !!! Insight | ||
|
|
||
| The default `@titleTag` is `"div"` because the correct value is dependent on the individual page. We strongly encourage consumers to update the `@titleTag` to meet WCAG Success Criterion [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) as the visual experience should match what is presented to the user with assistive technology. | ||
|
|
There was a problem hiding this comment.
See suggestions I added for a similar banner:
https://github.com/hashicorp/design-system/pull/2897/files#r2114906824
Group 3: @LilithJames-HDS and @shleewhite
What:
You’ll review and approve PRs that update banner and image placement across our documentation pages. Each PR will follow these standards:
Each PR will include context and a summary of changes.
You’ll review alongside a design partner, ensuring both design and engineering teams are involved in each update.
📌 Summary
If merged, this PR will complete updates for the following component pages as part of the audit:
Images updated:
All other pages (5) total are okay with no changes needed.
🔗 External links
Jira ticket: HDS-4425
Google Sheet file: Here
👀 Component checklist
💬 Please consider using conventional comments when reviewing this PR.