feat: add automated UX check by muhammad-ali-pk · Pull Request #2811 · canonical/canonical.com

muhammad-ali-pk · 2026-07-23T08:03:15Z

Done

[List of work items including drive-bys]

QA

Open the DEMO
Verify the page matches copydoc and figma

Issue / Card

Fixes #

Screenshots

[if relevant, include a screenshot]

webteam-app · 2026-07-23T08:03:18Z

Demo

Jenkins

demos.haus

codecov · 2026-07-23T08:05:55Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.90%. Comparing base (1f82573) to head (ddb744e).
⚠️ Report is 80 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2811      +/-   ##
==========================================
+ Coverage   74.82%   74.90%   +0.08%     
==========================================
  Files          19       19              
  Lines        2363     2363              
==========================================
+ Hits         1768     1770       +2     
+ Misses        595      593       -2

Flag	Coverage Δ
python	`74.90% <ø> (+0.08%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

Pull request overview

Adds a GitHub Actions workflow to trigger an automated UX demo review when a PR is labeled for UX review, integrating with Canonical’s upstream “automated UX QA checklist and quality standards” reusable workflow.

Changes:

Introduces a new ux-review GitHub Actions workflow triggered on pull_request label events.
Invokes an upstream reusable workflow and passes PR metadata plus a Copilot CLI token to enable automated review/commenting.

Comments suppressed due to low confidence (1)

.github/workflows/ux-review.yaml:23

The reusable workflow is referenced by a mutable branch (@feat-reusable-workflow), and the same mutable ref is also passed as an input. Before merging, this should be pinned to an immutable ref (commit SHA, or a version tag) to avoid supply-chain risk and unexpected behavior changes when the branch moves.

    # TEMPORARY: calling the reusable workflow from the upstream
    # "feat-reusable-workflow" branch for testing before it lands on main.
    # REVERT to a pinned commit SHA on main before merging for supply-chain safety.
    uses: canonical/automated-ux-qa-checklist-and-quality-standards/.github/workflows/ux-demo-review.yml@feat-reusable-workflow
    if: "github.event.label.name == 'Review: UX needed'"
    with:
      pr_number: "${{ github.event.pull_request.number }}"
      # Run the skills repo scripts from the same upstream branch.
      ref: feat-reusable-workflow

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

github-actions · 2026-07-23T08:33:22Z

UX review

Automated UX QA review generated from this PR. Stages run: Demo review.

Demo review — juju-charmhub-community-2026-07-23.md

UX demo review: Charmhub community (Juju)

URL: https://canonical-com-2803.demos.haus/juju/charmhub-community
Date: July 23, 2026
Note: The designops checklist fetch (raw.githubusercontent.com/Sophie-32/sites-designops/master/checklists/demo-review.md) returned a 404, so the local fallback checklist (references/default-checklist.md) was used. Initial fetch of the rendered page returned only three lines of text (the "Observability" tab panel), so the raw HTML was retrieved directly and parsed to recover the full static markup, including tab panels not shown by default and all form fields. This page is not JS-heavy for its core content – headings, links, images, and the contact form are all present in server-rendered HTML – but tab‑switching between charm categories and the "Get in touch" modal are JS‑driven and were reviewed from markup only, not interaction.

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs Work	🔵 Minor	❓ Needs Review	⬜ N/A
UX quality check	8	1	1	3	1	0
Brand & style compliance	—	0	3	2	1	—

Total issues: 10 (1 critical, 4 needs work, 5 minor) · Needs review: 2 · N/A sections: none – all checklist sections apply to this page

Issues by page section

Join the community

[Brand & style] 🟡 Needs Work – Superlative claim without support
Evidence: "The Juju Matrix Space is the best way to interact with all the community members..."
"Best way" is an unjustified superlative (style guide B7). Consider "a great way" or naming the specific benefit (for example, "the fastest way to reach the team behind Juju").

[Brand & style] 🟡 Needs Work – Superlative claim without support
Evidence: "...to provide the best support experience for Ubuntu and your full open source stack..." (Canonical support card)
Same issue as above – "best" is not backed by a verifiable claim. Suggest naming the specific benefit instead (for example, "responsive, expert support").

[Brand & style] 🟡 Needs Work – Product name capitalization
Evidence: "The discourse forum is the primary way for the community to discuss juju and charms."
"Juju" is an official product name and should be capitalized per the style guide (A3) – it is correctly capitalized everywhere else on the page ("Juju Matrix Space", "Get started with Juju today"), so this is an inconsistency, not a style choice.

Explore charms on Charmhub

[Brand & style] 🟡 Needs Work – Inconsistent "open source" formatting
Evidence: Postgres card reads "Open-source relational database management system" and Traefik reads "Open-source reverse proxy...", while every other card in the same grid (Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, Vault, Landscape) reads "Open source ..." with no hyphen.
Style guide A2 requires "open source" lowercase, two words, no hyphen when used generically. Fix the two hyphenated instances for consistency.

[Links / Structure] 🔵 Minor – Inconsistent card markup produces a duplicate link
Evidence: The MySQL card has two separate links to the same URL (canonical-charmed-mysql.readthedocs-hosted.com) – one wrapping the logo image, one wrapping the "MySQL" text below it. Every other charm card (Postgres, Kafka, Kubeflow, and so on) uses a single link wrapping both the logo and the name.
This creates an extra, redundant tab stop for keyboard and screen reader users on this one card only. Recommend aligning the MySQL card markup with the other cards.

[Accessibility] 🔵 Minor – Decorative logo images have empty alt text
Evidence: All twelve charm logos (Postgres, MySQL, Charmed MongoDB, Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, Vault, Traefik, Landscape) use alt="".
Per the severity override for logo alt text, this is treated as minor rather than a standard accessibility gap – the surrounding link text or aria-label already carries the accessible name, so no functional loss.

[Brand & style] ❓ Needs Review – Possible over-capitalization
Evidence: "Charmhub includes a large collection of Kubernetes and Machine charms..."
"Kubernetes" is a proper noun and correctly capitalized, but "Machine" (as in "machine charms") does not appear on the style guide's list of terms that should be capitalized. Flagging for a human check on house convention – if machine charms is not treated as a proper term elsewhere on the site, lowercase it for consistency.

[Brand & style] 🔵 Minor – Missing hyphen in compound adjective
Evidence: "Canonical and community made charms are available on Charmhub."
Per A12, compound adjectives before a noun should be hyphenated: "community-made charms".

Get started with Juju today

[CTAs] 🟡 Needs Work – Ungrammatical button label
Evidence: Primary CTA reads "Read Docs"
"Docs" is a common noun, not a product name, so title-casing it alongside "Read" reads oddly, and the phrase is missing an article. Recommend "Read the docs" (sentence case, consistent with the "Contact us" button beside it).

Get in touch (modal form)

[Accessibility] 🔴 Critical – Form field with no accessible name
Evidence: <label class="u-hide" for="about-use-case"></label> immediately precedes the "Tell us more about your needs" <textarea id="about-use-case">. The <label> element exists but is empty, and the fieldset's <legend> (which does contain the heading text) only names the fieldset as a group – it does not become the accessible name of the individual textarea.
As implemented, a screen reader user tabbing to this field will hear no name at all for the control. Fix by adding the field's text (for example, "Tell us more about your needs") inside the existing <label>, keeping it visually hidden if the heading above already serves as the sighted-user label.

[Mobile Considerations] 🔵 Minor – Long country dropdown on a compact form
Evidence: The "Country" <select> in the contact form lists roughly 240 countries in a single unstyled dropdown.
Flagging for mobile review – long native <select> lists are usable but can be slow to scan on small screens. No change required if this is a shared, site-wide form component.

Brand & style compliance

Issues from the Canonical copy style guide check. Organized by severity.

🔴 Critical

None found.

🟡 Needs Work

A3 – Product name capitalization – "discuss juju and charms" should read "discuss Juju and charms" (Join the community section).
A2 – "open source" formatting – "Open-source" is used on the Postgres and Traefik cards while every other card uses "Open source"; standardize on the unhyphenated, lowercase form.
B7 – Superlatives – "the best way to interact" (Matrix space) and "the best support experience" (Canonical support) are both unsupported superlative claims.

🔵 Minor

A8 – Serial comma – Meta description: "the deployment, integration and lifecycle management" is missing the Oxford comma before "and" → "the deployment, integration, and lifecycle management". Note: this text is in the page's <meta name="description">/social-share tags, not visible body copy, but it ships with the page and is worth a pass.
A12 – Hyphenation – "community made charms" → "community-made charms".

❓ Needs review

"Machine charms" capitalization – uncertain whether this is an established house term; confirm against other Juju/Charmhub pages before changing.
Visual indicator for required fields – the contact form's required inputs carry the is-required class and native required attribute (so screen readers will announce them correctly), but whether sighted users see a clear visual cue (asterisk, "required" text) depends on CSS not visible in the static markup – confirm on the rendered page.
Tab-switching and modal behavior – the charm category tabs (Databases / Big data and AI / Observability / Infrastructure) and the "Get in touch" modal are JS-driven; only their markup was reviewed, not their interactive behavior.

⬜ Not applicable

None – this page includes structure/headings, CTAs, links, a form, images, and in-page navigation, so all checklist sections apply.

✅ What looks good

Navigation

The Juju sub-navigation correctly marks "Community" as the current page with both a visual is-selected state and aria-current="page", so users always know where they are in the section.

Structure & Hierarchy

Heading order is clean and logical throughout: H1 "Community and Charmhub" → H2 "Join the community" / "Explore charms on Charmhub" / "Get started with Juju today" → H3 "Get in touch" (modal title). No skipped levels.
All headings are specific and descriptive rather than generic placeholders.

CTAs and links

Link text is consistently descriptive and specific: "Connect with the community on Matrix", "Connect with the community on Discourse", rather than generic "click here" or "learn more".
The two "Contact us" links on the page both point to the same destination (the contact modal), so repeated link text is used consistently.
The charm category tabs use correct ARIA tab/tabpanel/tablist roles with aria-selected and aria-controls, plus a native <select> fallback for small screens – a solid accessible pattern.

Forms

All contact-form fields (first name, last name, email, company, job title, country, phone) have real, associated <label> elements rather than placeholder-only labels, and required fields carry the native required attribute.
The honeypot fields ("Website", "Name") are correctly taken off-screen and out of tab order (tabindex="-1") rather than left visible, and marketing consent copy links out to both the Privacy Notice and Privacy Policy.

Brand & style

"24/7" is written correctly (not "24x7").
"Systems management" and product names – Juju, Charmhub, MicroCloud, Ubuntu Pro, MAAS, Landscape – are capitalized correctly across the main navigation and page body (aside from the single "juju" lowercase instance flagged above).
CTA and description copy is otherwise concise and free of banned filler words (no "leverage", "utilize", "in order to", and so on).

🔲 Manual checks for reviewer

Responsive behavior – resize the browser or use device emulation to check layout and readability at mobile, tablet, and desktop breakpoints, especially the 12-item charm grid and the long country dropdown.
Keyboard navigation – tab through the page to confirm correct focus order, visible focus indicators, and that the MySQL card's duplicate link doesn't create a confusing extra stop.
Authenticated states – not applicable to this page's public content, but confirm if any gated content exists behind the "Get in touch" flow.
JS-rendered content – click through the charm category tabs and open the "Get in touch" modal to confirm the tab panels and modal render and dismiss correctly, and that the unlabeled "Tell us more about your needs" textarea is fixed before this ships.
Discourse post (case studies only) – not applicable; this is not a case study page.

Generated by the automated UX QA review tool.

github-actions · 2026-07-24T11:30:12Z

UX review

Automated UX QA review generated from this PR. Stages run: Demo review.

Demo review — juju-charmhub-community-2026-07-24.md

UX demo review: Charmhub community (Juju)

URL: https://canonical-com-2803.demos.haus/juju/charmhub-community
Date: July 24, 2026
Note: Checklist source https://raw.githubusercontent.com/Sophie-32/sites-designops/master/checklists/demo-review.md returned a 404, so this review used the local fallback at references/default-checklist.md. The page loaded fully as static HTML (no JS-rendered gaps observed in the main content region). Related PR context: Figma file VqD7aqJWV2Cm4l8sth9xLv (node 272-4097) and copy doc 18KE4MzWdRNNe12B-rZXA_22NLg8U6LP2kcV3YTWcHy4 were supplied as design-fidelity/copy context but were not independently opened as part of this HTML-based content review.

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs Work	🔵 Minor	❓ Needs Review	⬜ N/A
UX quality check	6	0	0	3	1	1
Brand & style compliance	—	0	2	1	0	—

Total issues: 6 (0 critical, 2 needs work, 4 minor) · Needs review: 1 · N/A sections: Navigation (standard sitewide nav, not page-specific)

Issues by page section

Join the community

[Brand & style] 🟡 Needs Work – Product name "Juju" not capitalized
Evidence: "The discourse forum is the primary way for the community to discuss juju and charms." (Discourse forum card)
"Juju" is an official product name and should always be capitalized, per the style guide (A3). Fix to "…to discuss Juju and charms."

[Brand & style] 🟡 Needs Work – Inconsistent capitalization of "Discourse"
Evidence: Heading reads "Discourse forum" (capitalized) but the body text below it says "The discourse forum is…" and "The forum is used daily…" (lowercase on second reference).
Since Discourse is used here as a specific, named community platform (paired with "Matrix" and "Canonical support" as proper labels), keep it capitalized on every reference for consistency, e.g. "The Discourse forum is…"

[Accessibility] 🔵 Minor – Card images have generic, non-descriptive alt text
Evidence: alt="Matrix", alt="Discourse", alt="Canonical" on the three feature images.
These function more like illustrative brand images than content graphics, so per the severity override for logo-style images this is treated as minor polish rather than a blocker. Consider alt="" (if purely decorative, since the heading below already names each card) or a short descriptive alt if the images convey extra meaning.

[UX/Readability] 🔵 Minor – One sentence runs long
Evidence: "The forum is used daily by all the Canonical engineers working on charms and it includes a comprehensive list of community curated guides and resources." (~26 words)
Slightly above the 12–20 word target (B3). Consider splitting into two sentences for scannability.

Explore charms on Charmhub

[Brand & style] 🟡 Needs Work – Inconsistent "open source" formatting
Evidence: Postgres, MySQL, and Traefik cards use "Open-source relational database management system" / "Open-source reverse proxy…" (hyphenated), while Kafka, Kubeflow, Spark, Prometheus, Grafana, Loki, and Vault correctly use "Open source…" (two words, no hyphen).
Per the style guide (A2), "open source" should always be lowercase, two words, no hyphen, when used as a common term. Fix the three hyphenated instances to match the rest of the list.

[Accessibility] 🔵 Minor – Kafka charm link has no accessible name
Evidence: <a href="https://charmhub.io/kafka"> wraps an image with alt="" and has no aria-label, unlike every other charm card in the same tab set (Postgres, MySQL, MongoDB, Kubeflow, Spark, Prometheus, Grafana, Loki, Vault, Traefik, and Landscape all have a matching aria-label).
Treated as minor under the logo-image severity override, but this is a clear one-off inconsistency (not an intentional design choice) — add aria-label="Kafka" to match the sibling cards.

[Structure] 🔵 Minor – Inconsistent card markup for MySQL
Evidence: Every other charm card wraps its logo image and name in a single link. The MySQL card instead has two separate links to the same URL — one around the logo image, one around the "MySQL" text label below it.
This creates an extra, redundant tab stop for keyboard and screen reader users on this card only. Recommend matching the single-link pattern used by all other cards.

[Brand & style] ❓ Needs Review – Capitalization of "Machine charms"
Evidence: "Charmhub includes a large collection of Kubernetes and Machine charms, their related information and official documentation."
Unclear whether "Machine charms" is an established proper category name on Charmhub (in which case capitalization is fine) or a generic descriptor (in which case it should be lowercase "machine charms" per the style guide's default rule for "charm"). Flagging for reviewer confirmation against Charmhub's own terminology.

✅ What looks good

Hero: H1 "Community and Charmhub" is short, clear, and in sentence case.

Heading hierarchy: H1 → H2 flows logically with no skipped levels (Join the community, Explore charms on Charmhub, Get started with Juju today).

Join the community: Link text is specific and meaningful — "Connect with the community on Matrix ›" and "Connect with the community on Discourse ›" both tell the user exactly what they'll get, avoiding generic "click here"/"learn more" patterns.

Explore charms on Charmhub: Tabbed structure (Databases, Big data and AI, Observability, Infrastructure) has a clear heading and intro copy above it, and each charm card pairs a name with a one-line, plain-language description of what it does.

CTAs: "Read Docs" and "Contact us" in the closing "Get started with Juju today" section are distinct from each other and read naturally in context.

Forms & Inputs (contact modal): Required fields are marked with is-required styling hooks, autocomplete attributes are set correctly (given-name, family-name, email, organization, tel), and the modal has a clear, task-describing title ("Get in touch").

Accessibility (modal): The optional "Tell us more about your needs" textarea has a supporting visible heading directly above it in the fieldset legend, giving it context even though its own <label> is visually hidden.

⬜ Not applicable

Navigation – The header/footer are the standard sitewide Canonical navigation and footer, not specific to this page's content; no page-specific navigation issues to report.

🔲 Manual checks for reviewer

Responsive behavior – resize the browser or use device emulation to check layout and readability at mobile, tablet, and desktop breakpoints
Keyboard navigation – tab through the page to confirm correct focus order, visible focus indicators, and accessible labels on interactive elements
Authenticated states – log in and check any copy that only appears after authentication
JS-rendered content – interact with the page to trigger dynamic states (errors, success messages, empty states)
Discourse post (case studies only) – not applicable; this is a product page, not a case study

Generated by the automated UX QA review tool.

muhammad-ali-pk · 2026-07-24T11:51:45Z

UX review

Automated UX QA review generated from this PR. Stages run: Demo review.

Demo review — juju-charmhub-community-2026-07-24.md

UX demo review: Charmhub community (Juju)

URL: https://canonical-com-2803.demos.haus/juju/charmhub-community
Date: July 24, 2026
Note: Checklist fetch from https://raw.githubusercontent.com/Sophie-32/sites-designops/master/checklists/demo-review.md returned a 404, so this review uses the local fallback at demo-review/references/default-checklist.md. The copy doc (docs.google.com/document/d/18KE4...) could not be fetched (401 – requires Google authentication), so no copy-doc-to-live-page comparison was possible; this review is based on the live page content only. The Figma file was provided as context, but a pixel-level design-fidelity comparison is out of scope for this content-focused skill – flag any visible design mismatches for the visual designer separately. The page appeared to be a mostly static, server-rendered template rather than a JS-heavy SPA, so the raw HTML was fetched directly and full content (including the tab panels and the "Get in touch" modal, hidden by default) was extracted and reviewed.

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs Work	🔵 Minor	❓ Needs Review	⬜ N/A
UX quality check	10	1	0	1	1	1
Brand & style compliance	6	0	5	9	—	—

Total issues: 16 (1 critical, 5 needs work, 10 minor) · Needs review: 1 · N/A sections: Navigation (breadcrumbs/back links)

Issues by page section

Join the community – Matrix space / Discourse forum / Canonical support

[Accessibility] 🔵 Minor – Generic alt text on illustrative card images
Evidence: alt="Matrix", alt="Discourse", alt="Canonical" on the three card header images.
The alt text just repeats the section's topic rather than describing the image itself. Since each image sits directly above a matching heading ("Matrix space", "Discourse forum", "Canonical support"), the information isn't lost, but more descriptive (or empty, if purely decorative) alt text would be better practice.

[Brand & style – B7 Superlative] 🟡 Needs Work – Unjustified superlative
Evidence: "The Juju Matrix Space is the best way to interact with all the community members and chat with the Canonical engineers working on Juju and charming."
"Best" is an unverifiable superlative. Rewrite to state the specific benefit, e.g. "is a direct way to chat with the community and the Canonical engineers working on Juju."

[Brand & style – B5 Passive voice] 🔵 Minor – Passive construction
Evidence: "The Juju Matrix Space is hosted by Canonical and it is also the home of the broader Ubuntu community chat."
Rewrite active: "Canonical hosts the Juju Matrix Space, which is also the home of the broader Ubuntu community chat."

[Brand & style – A4 Capitalization/consistency] 🟡 Needs Work – Inconsistent casing of "Discourse" (product name)
Evidence: Heading reads "Discourse forum" (capital D), but the body copy reads "the discourse forum is the primary way for the community to discuss juju and charms."
Discourse is a proper platform name and should be capitalized consistently throughout, not just in the heading.

[Brand & style – A3/A4 Capitalization] 🟡 Needs Work – Product name "Juju" not capitalized
Evidence: "...the primary way for the community to discuss juju and charms."
Juju is a proper product name and should always be capitalized, regardless of position in the sentence (unlike "charm", which is correctly lowercase here).

[Brand & style – B5 Passive voice] 🔵 Minor – Passive construction
Evidence: "The forum is used daily by all the Canonical engineers working on charms..."
Rewrite active: "Canonical engineers working on charms use the forum daily..."

[Brand & style – B3 Sentence length] 🔵 Minor – Long, dense sentence (~25 words)
Evidence: "The forum is used daily by all the Canonical engineers working on charms and it includes a comprehensive list of community curated guides and resources."
Consider splitting into two sentences for readability.

[Brand & style – A12 Hyphens] 🔵 Minor – Missing hyphen in compound adjective
Evidence: "...a comprehensive list of community curated guides and resources."
Should be "community-curated guides" (compound adjective before a noun).

[Brand & style – B7 Superlative] 🟡 Needs Work – Unjustified superlative
Evidence: "Our global team of experts is available 24/7 to provide the best support experience for Ubuntu and your full open source stack..."
Rewrite to state the specific benefit rather than an unverifiable "best," e.g. "to provide expert support for Ubuntu and your full open source stack."

[Brand & style – B3 Sentence length] 🔵 Minor – Long, dense sentence (~27 words)
Evidence: "Our global team of experts is available 24/7 to provide the best support experience for Ubuntu and your full open source stack, from infrastructure to applications."
Consider splitting for readability.

[Brand & style – A4 Consistency] 🔵 Minor – Inconsistent casing of the same proper noun
Evidence: Card heading "Matrix space" (lowercase "space") vs. body copy "the Juju Matrix Space" (capitalized "Space").
Pick one form and use it consistently.

Explore charms on Charmhub (intro copy)

[Brand & style – A8 Punctuation] 🔵 Minor – Missing comma and missing sentence-ending period
Evidence: "Charmhub is a curated marketplace for charms which can be readily integrated into any infrastructure"
Add a comma before the non-restrictive "which" clause and a full stop at the end: "Charmhub is a curated marketplace for charms, which can be readily integrated into any infrastructure."

[Brand & style – A4 Capitalization] 🔵 Minor – Inconsistent capitalization
Evidence: "Charmhub includes a large collection of Kubernetes and Machine charms..."
"Kubernetes" is a proper noun and correctly capitalized; "Machine" is a common descriptive term here (paired with lowercase "charms") and should be lowercase for consistency: "Kubernetes and machine charms."

[Brand & style – A12 Hyphens] 🔵 Minor – Missing hyphen in compound adjective
Evidence: "Canonical and community made charms are available on Charmhub."
Should be "community-made charms."

Charm listing – Databases / Big data and AI / Observability / Infrastructure tabs

[Brand & style – A2 "open source"] 🟡 Needs Work – Inconsistent formatting of "open source"
Evidence: "Open-source relational database management system" (Postgres, MySQL), "Open-source reverse proxy and load balancer for HTTP and TCP-based applications" (Traefik) – hyphenated, vs. "Open source monitoring system..." (Prometheus), "Open source distributed event store..." (Kafka), "Open source platform for machine learning and MLOps on Kubernetes" (Kubeflow), "Open source unified analytics engine..." (Apache Spark), "Open source analytics and interactive visualization web application" (Grafana), "Open source log aggregation system..." (Loki), "Open source identity-based secrets and encryption management system" (Vault) – unhyphenated.
Per style guide, "open source" is always two words with no hyphen (except in official proper names). Fix the three hyphenated instances (Postgres, MySQL, Traefik).

[Brand & style – A10 Acronyms] ❓ Needs Review – Acronym not spelled out on first use
Evidence: Kubeflow description: "Open source platform for machine learning and MLOps on Kubernetes."
MLOps is not spelled out on first mention. It's a widely recognized industry term for this audience, so this is a judgment call rather than a clear violation – flagging for reviewer discretion.

Get in touch (contact modal, triggered from "Contact us")

[Forms & Inputs / Accessibility] 🔴 Critical – Textarea has no accessible label
Evidence: <label class="u-hide" for="about-use-case"></label> is empty, and the <textarea id="about-use-case"> has no aria-label or aria-labelledby pointing to the visible heading "Tell us more about your needs" (id="about-use-case-legend", used only by the fieldset, not the textarea).
Sighted users can infer the purpose of the textarea from the nearby visible heading, but a screen reader user tabbing to the field will hear it announced as a blank, unlabeled text box with no indication of what to enter. Fix by either populating the empty <label> with the heading text (visually hidden is fine) or adding aria-labelledby="about-use-case-legend" to the <textarea>.

Brand & style compliance

🔴 Critical

None found.

🟡 Needs Work

A2 – "open source" formatting – Inconsistent hyphenation across charm descriptions.
- Found: "Open-source relational database management system" (Postgres, MySQL); "Open-source reverse proxy and load balancer for HTTP and TCP-based applications" (Traefik) | Correct: "Open source relational database management system"; "Open source reverse proxy and load balancer for HTTP and TCP-based applications"
A3/A4 – Product name capitalization – "Juju" not capitalized mid-sentence.
- Found: "the community to discuss juju and charms" | Correct: "the community to discuss Juju and charms"
A4 – Capitalization consistency – "Discourse" (proper product name) capitalized in the heading but not in body copy.
- Found: "the discourse forum is the primary way" | Correct: "the Discourse forum is the primary way"
B7 – Unjustified superlative – "the best way to interact with all the community members."
- Correct: state the specific benefit instead, e.g. "a direct way to chat with the community."
B7 – Unjustified superlative – "the best support experience for Ubuntu and your full open source stack."
- Correct: state the specific benefit instead, e.g. "expert support for Ubuntu and your full open source stack."

🔵 Minor

A4 – Consistency – "Matrix space" (card heading) vs. "Juju Matrix Space" (body copy) – pick one casing.
A4 – Capitalization – "Kubernetes and Machine charms" | Correct: "Kubernetes and machine charms"
A8 – Punctuation – Missing comma and full stop: "Charmhub is a curated marketplace for charms which can be readily integrated into any infrastructure" | Correct: "Charmhub is a curated marketplace for charms, which can be readily integrated into any infrastructure."
A12 – Hyphens – "community curated guides" | Correct: "community-curated guides"
A12 – Hyphens – "community made charms" | Correct: "community-made charms"
B5 – Passive voice – "is hosted by Canonical" | Correct (active): "Canonical hosts the Juju Matrix Space"
B5 – Passive voice – "is used daily by all the Canonical engineers" | Correct (active): "Canonical engineers use the forum daily"
B3 – Sentence length – "The forum is used daily by all the Canonical engineers working on charms and it includes a comprehensive list of community curated guides and resources." (~25 words) – consider splitting.
B3 – Sentence length – "Our global team of experts is available 24/7 to provide the best support experience for Ubuntu and your full open source stack, from infrastructure to applications." (~27 words) – consider splitting.

❓ Needs review

[UX quality – Mobile Considerations] The vertical tab list (Databases / Big data and AI / Observability / Infrastructure) is replaced with a native <select> on mobile and tablet widths. The static HTML confirms both elements exist with matching aria-selected/selected state, but the JS-driven tab-switching behavior and focus management could not be exercised from a static fetch – recommend a manual pass on mobile.
[Brand & style – A10] "MLOps" acronym not spelled out on first use in the Kubeflow description – judgment call on whether it needs expansion for this audience.

⬜ Not applicable

Navigation – breadcrumbs/back links: This is a top-level marketing page, not part of a multi-step flow, so breadcrumbs are not expected here.

✅ What looks good

Hero

H1 "Community and Charmhub" is in correct sentence case and clearly describes the page.

Structure & hierarchy

Headings flow logically: H1 → H2 ("Join the community") → H2 ("Explore charms on Charmhub") → H2 ("Get started with Juju today"), with no skipped levels.
The "Explore charms on Charmhub" section has clear intro copy above the tabbed charm list.

CTAs and links

CTA text is specific and honest throughout: "Connect with the community on Matrix ›", "Connect with the community on Discourse ›", "Contact us ›", "Read Docs".
The two "Contact us" links (in the card and in the closing CTA block) point to the same destination/action (opening the same "Get in touch" modal), so the "same text → same destination" rule is respected.
No "click here" / "read more" style link text found anywhere on the page.

Accessibility

The charm-exploration tabs use correct ARIA: role="tablist" with an aria-label, role="tab" with aria-selected on each button, and role="tabpanel" with aria-labelledby on each panel.
Charm logo images that are wrapped in a labeled link correctly use empty alt="" (e.g. Postgres, MySQL, MongoDB, and others), with the accessible name provided by the link's aria-label or adjacent link text – a solid accessible pattern.
The "Get in touch" modal's contact fields (first name, last name, email, company, job title, country, phone) all have visible, associated <label> elements, and required fields are marked with an is-required class plus the required attribute.
Honeypot anti-spam fields ("Website", "Name") are correctly hidden off-screen and removed from tab order (tabindex="-1"), so they don't confuse keyboard or screen reader users.

Brand & style

"24/7" is formatted correctly (not "24x7").
"open source" is correctly lowercase and unhyphenated in the majority of instances (e.g. "your full open source stack").
Compound adjectives are correctly hyphenated in several charm descriptions: "identity-based" (Vault), "stream-processing" (Kafka), "large-scale" (Apache Spark), "TCP-based" (Traefik).
No exclamation marks, no Latin abbreviations (e.g., i.e.), and no banned words/phrases (leverage, utilize, going forward, etc.) found in the extracted copy.

🔲 Manual checks for reviewer

Responsive behavior – resize the browser or use device emulation to check layout and readability at mobile, tablet, and desktop breakpoints
Keyboard navigation – tab through the page to confirm correct focus order, visible focus indicators, and accessible labels on interactive elements
Authenticated states – log in and check any copy that only appears after authentication
JS-rendered content – interact with the page to trigger dynamic states (errors, success messages, empty states)
Discourse post (case studies only) – not applicable; this is not a case study page

Generated by the automated UX QA review tool.

Sophie-32 · 2026-07-24T12:01:07Z

UX review

Automated UX QA review generated from this PR. Stages run: Demo review.

Demo review — juju-charmhub-community-2026-07-24.md

UX content audit report – live page

URL: https://canonical-com-2803.demos.haus/juju/charmhub-community
Date: July 24, 2026
Figma: https://www.figma.com/design/VqD7aqJWV2Cm4l8sth9xLv/canonical.com-juju-and--jaas---Sites?node-id=272-4097&t=23yzBS93EKYgiPYQ-0
Copy doc: https://docs.google.com/document/d/18KE4MzWdRNNe12B-rZXA_22NLg8U6LP2kcV3YTWcHy4/edit?tab=t.0
Note: The page uses tabbed content (Databases, Big data and AI, Observability, Infrastructure) that is rendered in HTML but toggled by JavaScript. All tab content was captured from the static HTML. A contact modal form is also present.

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs Work	🔵 Minor	❓ Needs Review	⬜ N/A
UX review	12	0	1	0	2	1
Brand & style compliance	—	0	4	0	—	—

Total issues: 5 (0 critical, 5 needs work, 0 minor) · Needs review: 2 · N/A sections: Mobile considerations

Issues by page section

Hero

[Structure & Hierarchy] 🟡 Needs Work – Hero section has no introductory copy
Evidence: The H1 "Community and Charmhub" is followed by an empty column. No subtitle or introductory paragraph appears in the hero.
The hero should orient visitors – a one or two sentence description of what the page offers (community channels, charm discovery, support) would help users understand the page purpose immediately.

Join the community – Matrix space card

[Brand & style – B7] 🟡 Needs Work – Unjustified superlative
Evidence: "The Juju Matrix Space is the best way to interact with all the community members and chat with the Canonical engineers working on Juju and charming."
"The best way" is an unjustified superlative. Consider: "a great way" or "the recommended way".

Join the community – Discourse forum card

[Brand & style – A3] 🟡 Needs Work – Product name "Discourse" not capitalized
Evidence: "The discourse forum is the primary way for the community to discuss juju and charms."
"Discourse" is a product name and should be capitalized: "The Discourse forum".

[Brand & style – A3] 🟡 Needs Work – Product name "Juju" not capitalized
Evidence: "…discuss juju and charms."
"Juju" should always be capitalized per Canonical product naming rules. Correct to: "…discuss Juju and charms."

Explore charms on Charmhub – charm descriptions

[Brand & style – A2] 🟡 Needs Work – "Open-source" hyphenated
Evidence: Three charm descriptions use "Open-source" with a hyphen:

Postgres: "Open-source relational database management system"
MySQL: "Open-source relational database management system"
Traefik: "Open-source reverse proxy and load balancer for HTTP and TCP-based applications"

Per the Canonical style guide, "open source" is always two words with no hyphen – even as an adjective. Correct to "Open source" (sentence-initial capital is fine). Note: six other charm descriptions on the same page already use the correct "Open source" form (Prometheus, Grafana, Loki, Kafka, Kubeflow, Apache Spark), so this is also an internal consistency issue.

Brand & style compliance

🟡 Needs Work

A2 – "open source" hyphenation – Three charm descriptions use "Open-source" (hyphenated). Should be "Open source" (no hyphen).
- Found: "Open-source relational database management system" in Databases tab (×2) and "Open-source reverse proxy…" in Infrastructure tab | Correct: "Open source…"
A3 – "juju" lowercase – Product name written as "juju" mid-sentence.
- Found: "discuss juju and charms" in Discourse forum card | Correct: "discuss Juju and charms"
A3 – "discourse" lowercase – Product name written as "discourse" mid-sentence.
- Found: "The discourse forum is the primary way" in Discourse forum card | Correct: "The Discourse forum is the primary way"
B7 – Unjustified superlative – "the best way" used without supporting evidence.
- Found: "The Juju Matrix Space is the best way to interact…" in Matrix space card | Correct: "The Juju Matrix Space is a great way to interact…" or "the recommended way"

❓ Needs review

Tabbed content interaction – The four charm category tabs (Databases, Big data and AI, Observability, Infrastructure) rely on JavaScript for toggling. Verify that keyboard navigation works correctly and that tab panels update focus as expected.
Contact modal form – The "Contact us" link opens a modal form via JavaScript. Verify that the modal is keyboard-accessible (focus trap, Escape to close) and that form validation messages appear correctly.

⬜ Not applicable

Mobile considerations – This audit is based on static HTML; responsive layout and truncation checks require browser-based testing (see manual checks below).

✅ What looks good

Hero

Page title "Community and Charmhub" is clear and descriptive.

Secondary navigation

Navigation labels are clear and consistent: How Juju works, Charmhub, JAAS, Community, Docs, Blog.
Current page is correctly marked with aria-current="page" and visual highlight.

Join the community

Three community channel cards are well structured with image, heading, description, and a descriptive call-to-action link.
CTAs are specific and action-oriented: "Connect with the community on Matrix", "Connect with the community on Discourse", "Contact us".
Images have alt text ("Matrix", "Discourse", "Canonical").
Heading hierarchy flows logically: H1 → H2 → p.heading--5 subheadings.

Explore charms on Charmhub

Section has a clear bold lead-in paragraph followed by supporting text.
Charm logos use empty alt="" appropriately since the charm name is provided as adjacent text – correct accessibility practice.
Several charm links include aria-label attributes for screen readers.
Tab interface uses correct ARIA roles (role="tablist", role="tab", role="tabpanel").
Descriptions are concise and informative.

Get started with Juju today

Clear section heading with two well-differentiated CTAs: "Read Docs" (primary) and "Contact us" (secondary).
CTAs are not identically labeled.

Contact form (modal)

All input fields have visible labels (First name, Last name, Email, Company, Job Title, Country).
Required fields are marked with the is-required class and required attribute.
Fields use appropriate autocomplete values for autofill support.

Footer

Standard Canonical footer with legal links, social media icons (all with aria-label), and copyright notice.

🔲 Manual checks for reviewer

Responsive behavior – resize the browser or use device emulation to check layout and readability at mobile, tablet, and desktop breakpoints
Keyboard navigation – tab through the page to confirm correct focus order, visible focus indicators, and accessible labels on interactive elements
Authenticated states – log in and check any copy that only appears after authentication
JS-rendered content – interact with the page to trigger dynamic states (errors, success messages, empty states)
Tab interaction – verify the four charm category tabs switch correctly with keyboard (arrow keys) and that focus management follows WAI-ARIA tabs pattern
Modal accessibility – confirm the contact modal traps focus, closes on Escape, and returns focus to the trigger element on close
Figma fidelity – compare the live demo against the Figma file to check layout, spacing, and visual consistency

Generated by the automated UX QA review tool.

muhammad-ali-pk · 2026-07-24T12:08:02Z

UX review

Automated UX QA review generated from this PR. Stages run: Copy doc review.

Copy doc review — juju-charmhub-community-2026-07-24.md

UX content audit report – copy doc

Document: ux-review-copydoc.md (Juju – Community and Charmhub section, suggested URL canonical.com/juju/charmhub-community)
Date: July 24, 2026
Note: The metadata table's "Page type" and "Target audience" fields are unresolved dropdowns ("Choose"). Based on the content (a community and charm-directory page with no forms or interactive flows), this review treats the doc as a marketing/product landing page for section-gating purposes. Design should not start until the metadata dropdowns are actually resolved and confirmed against this assumption.

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs work	🔵 Minor	❓ Needs review	⬜ N/A
UX quality check	9	6	9	2	5	2

Total issues: 17 (six critical, nine needs work, two minor) · Needs review: five · N/A sections: Forms and inputs – marketing page; Completeness (interactive states) – marketing page

Issues by page section

Metadata

🔴 Critical

[Character limits] – The page description is 185 characters, well over the 160-character limit.
- Found: "Juju is an open source orchestration engine for software operators that enables the deployment, integration and lifecycle management of applications at any scale, on any infrastructure." (185 characters)
- Recommendation: Trim to 160 characters or fewer, for example: "Juju is an open source orchestration engine that enables deployment, integration, and lifecycle management of applications at any scale, on any infrastructure." (163 – still needs a further trim, but closer).
[Structure and hierarchy] – "Page type" is left as the unresolved dropdown placeholder "Choose". This field determines which checklist sections apply, so it should be resolved before the doc is treated as final.
- Found: "Page type (choose from drop down) | Choose"
- Recommendation: Select the correct page type (this review assumes "marketing/landing page") and confirm.
[Navigation] – The navigation field is not filled in; it still contains the template instruction rather than an actual navigation path.
- Found: "Please select the primary navigation for the page. Bubble navigation canonical.com/juju"
- Recommendation: Replace with the confirmed navigation path (e.g. "All Canonical > Juju") separate from the instructional text.
[Links] – The suggested page URL is on the canonical.com domain, but the linked reference points to a different domain entirely (juju.is), which is a domain mismatch.
- Found: "canonical.com/juju/charmhub-community"
- Recommendation: Confirm the intended final domain and fix the link so the visible path and the destination match.
[Structure and hierarchy] – No heading levels (H1, H2, H3) are indicated anywhere in the document, for the hero, card headings, or tab labels.
- Found: "HERO", "EQUAL HEIGHT ROW", "TABBED SECTIONS", "CTA SECTION" are used only as document/component labels, not as marked heading levels for the actual on-page copy.
- Recommendation: Mark the intended heading level for each visible heading (e.g. H1 for "Community and Charmhub", H2 for "Join the community", etc.) so design and development can implement the correct hierarchy.

🟡 Needs work

[Structure and hierarchy] – "Target audience" and "Stage in the funnel" are both left as the unresolved dropdown placeholder "Choose".
- Found: "Target audience (choose from drop down) | Choose"; "Stage in the funnel | Choose"
- Recommendation: Resolve both fields before handoff to design.
[Structure and hierarchy] – "Main action for users to take on the page" and "Main keyword and keyword cluster" are both empty.
- Found: Empty cells.
- Recommendation: Fill in the primary conversion goal and target keyword(s) so CTA priority and SEO intent are clear.
[Structure and hierarchy] – The "og:Image" field still contains only the template instruction, with no image supplied.
- Found: "Please include a link to the image you would like as the page thumbnail. Visual designers will resize them as necessary."
- Recommendation: Add the actual thumbnail image link, or note that one will follow.
[Structure and hierarchy] – The "Page owner" field mixes the actual owner name with an unresolved approvals dropdown.
- Found: "Massimiliano Gori ... Please indicate approvals needed before the page goes into development: Choose"
- Recommendation: Resolve the approvals dropdown separately from the owner name.

Hero

🟡 Needs work

[Structure and hierarchy] – The hero has only a short section label and no supporting value-proposition copy or CTA. The page description in the metadata ("the simplest way to deploy and maintain applications in the cloud") does not appear anywhere in the visible hero copy.
- Found: "Community and Charmhub" is the only content under HERO.
- Recommendation: Add a value-proposition headline and subheading to the hero, and confirm whether a hero CTA is needed, so the strongest message appears first on the page.

Equal height row

🔴 Critical

[CTAs] – The "Contact us" CTA in the Canonical support card links to a Google Doc rather than a real page or live form.
- Found: "Contact us ›"
- Recommendation: Replace with the actual contact/support page or form URL before this reaches design or development.

🟡 Needs work

[Tone and clarity] – The Discourse forum paragraph has two sentences well above the 12–20 word target, and uses passive voice.
- Found: "The forum is used daily by all the Canonical engineers working on charms and it includes a comprehensive list of community curated guides and resources." (25 words, passive: "is used by"); "The forum is the primary way for the development teams to share updates on the products, announce new releases and provide in depth explanations on new concepts." (27 words)
- Recommendation: Split into shorter, active-voice sentences, e.g. "Canonical engineers use the forum daily, and it includes a comprehensive list of community-curated guides and resources."
[Tone and clarity] – The Canonical support paragraph has one sentence well above the 12–20 word target.
- Found: "Our global team of experts is available 24/7 to provide the best support experience for Ubuntu and your full open source stack, from infrastructure to applications." (26 words)
- Recommendation: Split into two shorter sentences for scannability.

Tabbed sections

🟡 Needs work

[Structure and hierarchy] – The tab labels are embedded inline inside the intro paragraph in brackets, rather than presented as a clear list or set of headings, making it hard to tell what is body copy and what is tab structure.
- Found: "...Canonical and community made charms are available on Charmhub. You can find a curated selection of charms below: [Databases] [Big data and AI] [Observability] [Infrastructure]"
- Recommendation: Present the four tab labels as a distinct list, separate from the running paragraph.
[Tone and clarity] – The Postgres and MySQL entries use the exact same description, so they are not differentiated for the reader.
- Found: "Postgres – Open-source relational database management system"; "MySQL – Open-source relational database management system"
- Recommendation: Write a distinct one-line description for each database that reflects its specific strengths.

🔵 Minor

[Tone and clarity] – A missing sentence break creates a run-on in the Charmhub intro copy.
- Found: "...which can be readily integrated into any infrastructure Charmhub includes a large collection..."
- Recommendation: Add the missing period: "...into any infrastructure. Charmhub includes a large collection..."
[Tone and clarity] – "MLOps" is used without expansion; while increasingly common, it is not yet as universally understood as terms like "DevOps".
- Found: "Open source platform for machine learning and MLOps on Kubernetes"
- Recommendation: Consider a brief expansion on first use, or confirm the target audience is technical enough that this is unnecessary.

CTA section

🔴 Critical

[CTAs] – The "Contact us" CTA links to the same Google Doc as the Equal height row card, again pointing to a working draft rather than a live destination.
- Found: "Contact us"
- Recommendation: Same fix as above – replace with the real contact/support destination.

Brand & style compliance

🟡 Needs work

[A2 – "open source"] – "Open source" is incorrectly hyphenated in three places, and inconsistently so, since the surrounding entries in the same list use the correct unhyphenated form.
- Found: "Open-source relational database management system" (Postgres); "Open-source relational database management system" (MySQL); "Open-source reverse proxy and load balancer" (Traefik) | Corrected: "Open source relational database management system"; "Open source reverse proxy and load balancer".
[A3 – Product names] – The "Charmed" product prefix is applied inconsistently. Only the MongoDB entry uses it, even though Canonical's official charm names generally follow the "Charmed [Product]" pattern.
- Found: "Charmed MongoDB" vs. plain "Postgres" and "MySQL" | Recommendation: Confirm whether the Postgres and MySQL entries should read "Charmed PostgreSQL" and "Charmed MySQL" for consistency.

🔵 Minor

[A12 – Hyphens] – A compound adjective is missing its hyphen.
- Found: "in depth explanations" | Corrected: "in-depth explanations"
[A4 – Capitalization] – "Read Docs" is set in Title Case, while other headings in the doc use sentence case.
- Found: "Read Docs" | Recommendation: Consider "Read docs" for consistency, if the design system doesn't dictate Title Case buttons.
[B9 – Commonly confused words] – "Which" is used for a restrictive clause where "that" is the conventional choice.
- Found: "a curated marketplace for charms which can be readily integrated" | Corrected: "a curated marketplace for charms that can be readily integrated"

❓ Needs review

[Metadata] – The page title field appears to contain two separate values ("Juju" and "The simplest way to deploy and maintain applications in the cloud") in what looks like a three-column table row, but the table's separator row only defines two columns.
- Found: "Juju | The simplest way to deploy and maintain applications in the cloud" | Question: Is the intended page title "Juju" alone (four characters), or the combined string (72 characters, which would exceed the 60-character limit)? Please confirm which value is the actual title.
[Tabbed sections] – The charm link text uses "Postgres" rather than "PostgreSQL".
- Found: "Postgres" linking to charmhub.io/postgresql | Question: Is "Postgres" the approved short form for this context, or should it read "PostgreSQL" / "Charmed PostgreSQL" to match Canonical's product naming conventions?
[Tabbed sections] – MongoDB is described as "Source-available" while every other database/tool in the list is described as "Open source".
- Found: "Charmed MongoDB – Source-available document-oriented database" | Question: This may be intentionally accurate (MongoDB's SSPL license is not OSI-approved open source), but please confirm it's a deliberate distinction and not an inconsistency to fix.
[Equal height row] – The Canonical support copy explicitly mentions "this form", but no form is defined anywhere in the doc – only a "Contact us" link.
- Found: "You can fill out this form and one of our sales representatives will be in touch with you shortly." | Question: Does this need an actual embedded contact form with defined fields, or does it link out to an existing global contact form elsewhere on the site? Please clarify so Forms & Inputs can be scoped correctly.
[Metadata] – The suggested URL structure implies this content may sit under an existing /juju page.
- Found: "canonical.com/juju/charmhub-community" | Question: Is this a new page, or does it replace/merge with an existing page that would need a redirect?

⬜ Not applicable

Forms and inputs – N/A: this is a marketing/community landing page. No input fields or field-level form flow is documented (see the Needs review note above about the "Contact us" form reference).
Completeness – interactive states – N/A: hover, focus, error, success, empty, and loading states are out of scope for this page type.

✅ What looks good

CTA link text for the community cards is specific and honest: "Connect with the community on Matrix ›" and "Connect with the community on Discourse ›" both make it clear what happens on click, and both have working, specific destinations.
Charm link text throughout the tabbed sections is descriptive (product names linking to their own Charmhub pages), with no "click here" or "read more" used as standalone link text.
The "24/7" formatting in the Canonical support copy follows the correct style (not "24x7").
Product name capitalization for "Juju," "Charmhub," and "Ubuntu" is consistent and correct throughout.
All four charm categories (Databases, Big data and AI, Observability, Infrastructure) are fully documented with three charms each and no TBD or placeholder markers – the tabbed content itself is complete.
No open comments or unresolved "TBD"/"TK" markers were found in the body copy.

Generated by the automated UX QA review tool.

muhammad-ali-pk · 2026-08-13T16:20:17Z

UX review

Automated UX QA review generated from this PR. Stages run: Demo review.

Demo review — juju-charmhub-community-2026-08-13.md

UX demo review: Charmhub community (Juju)

URL: https://canonical-com-2803.demos.haus/juju/charmhub-community
Date: 2026-08-13
Note: Fetched via raw HTML (not the WebFetch markdown renderer, which returned near-empty output for this page). All four charm-category tab panels are present server-side in the HTML, so tab-switching content was captured in full. Interactive states (which tab is visually active, modal open/close, focus order) still require manual verification.
Checklist source: https://raw.githubusercontent.com/Sophie-32/sites-designops/master/checklists/demo-review.md returned a 404 — used local fallback references/default-checklist.md.
Context provided: Figma file (node 272-4097) and copy doc (18KE4MzWdRNNe12B-rZXA_22NLg8U6LP2kcV3YTWcHy4) were supplied as PR context but were not fetched for this pass, since neither tool has authenticated access to Google Docs/Figma content in this environment. Design-fidelity and copy-doc comparison are flagged under "Needs review" below.

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs Work	🔵 Minor	❓ Needs Review	⬜ N/A
UX quality check	8	1	1	1	2	0
Brand & style compliance	—	0	2	3	—	—

Total issues: 8 (1 critical, 3 needs work, 4 minor) · Needs review: 2 · N/A sections: none (all checklist sections apply to this page)

Issues by page section

Explore charms on Charmhub — charm grid (Databases tab)

[Structure & Hierarchy] 🔴 Critical – Wrong logo displayed for Charmed MongoDB
Evidence: The "Charmed MongoDB" card (aria-label="Charmed MongoDB", link to charmhub.io/mongodb) renders the Ubuntu logo (assets.ubuntu.com/v1/5a6b9b4b-ubuntu-logo.png), not a MongoDB logo. Every other card in the grid (Postgres, MySQL, Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, Vault, Traefik, Landscape) uses a correctly named, product-specific logo asset.
This misrepresents the MongoDB integration and will confuse users scanning the grid by logo. Swap in the correct MongoDB logo asset before this ships.

[Links] 🟡 Needs Work – Inconsistent link structure for the MySQL card
Evidence: Every other charm card wraps the logo image and the heading text in a single <a> (e.g. Postgres: one link, aria-label="Postgres", wrapping both image and heading). The MySQL card instead splits this into two separate, adjacent links to the same destination — one wrapping only the image (aria-label="MySQL"), one wrapping only the heading text (MySQL).
Recommendation: Wrap the MySQL logo and heading in a single link, matching the pattern used by every other card, for a consistent tab order and predictable click target.

Get started with Juju today (CTA strip)

[CTAs] 🔵 Minor – Inconsistent CTA capitalization
Evidence: Read Docs (Title Case) sits next to Contact us (sentence case) in the same CTA pair.
Recommendation: Use sentence case throughout for consistency: "Read docs" or "Read the docs".

Brand & style compliance

🟡 Needs Work

A2 – "open source" formatting – Inconsistent hyphenation of a defined brand term across the same charm grid.
- Found: "Open-source relational database management system" (Postgres and MySQL cards) and "Open-source reverse proxy and load balancer for HTTP and TCP-based applications" (Traefik card) | Correct: "Open source relational database management system" / "Open source reverse proxy…" — no hyphen, matching the seven other cards in the same grid (Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, Vault) that already use the correct unhyphenated form.
B7 – Superlatives – Unjustified superlative claims.
- Found: "The Juju Matrix Space is the best way to interact with all the community members…" and "…provide the best support experience for Ubuntu and your full open source stack" | Correct: state the specific benefit instead, e.g. "a good way to interact with…" / "a great support experience for…", or drop the superlative entirely.

🔵 Minor

A4 – Capitalization – Mid-sentence product/term capitalized that should be lowercase.
- Found: "Charmhub includes a large collection of Kubernetes and Machine charms…" | Correct: "…Kubernetes and machine charms…" (per style guide, "charm" is lowercase except sentence-initial).
A8 – Punctuation – Missing sentence-ending period.
- Found: "Charmhub is a curated marketplace for charms which can be readily integrated into any infrastructure" (no closing period) | Correct: add a period at the end of the sentence.
A12 – Hyphens – Compound adjective before a noun not hyphenated.
- Found: "Canonical and community made charms are available on Charmhub." | Correct: "Canonical and community-made charms…"

❓ Needs review

Design fidelity vs Figma – The supplied Figma file (node 272-4097) was not compared against this build in this pass; a side-by-side visual diff is recommended before sign-off, especially for the charm grid layout and the "Get started" CTA strip.
Copy doc alignment – The supplied copy doc was not diffed against live copy in this pass. If this page's copy doc has already been through stage 1 (copy doc review), confirm the doc reflects the version above; if not, treat this audit as the first copy review for this page.
Tab interaction states – The four charm-category tabs (Databases, Big data and AI, Observability, Infrastructure) are implemented with proper ARIA (role="tablist", role="tab", aria-selected, role="tabpanel"), but visual/focus behavior when switching tabs should be manually verified (focus management, visible focus indicator, only the active panel visible).
Country dropdown length (mobile) – The "Get in touch" form's country <select> contains the full ISO country list (~240 entries). Flagging for mobile review — long native selects can be awkward on small touchscreens; confirm behavior is acceptable on target devices.

✅ What looks good

Accessibility & forms

Charm-card logos correctly use empty alt="" with the accessible name provided by the parent link's aria-label (e.g. aria-label="Postgres") — a valid decorative-image pattern, not a missing-alt-text issue.
The "I agree to receive information…" marketing checkbox is properly labelled via aria-labelledby.
Anti-spam honeypot fields ("Website", "Name") are correctly hidden off-screen (u-off-screen, tabindex="-1") rather than visually hidden in a way that would confuse assistive tech.
Tab component uses full, correct ARIA: role="tablist", role="tab", aria-selected, role="tabpanel", aria-labelledby.
Privacy Notice and Privacy Policy links are present and correctly attached to the contact form's consent copy.

CTAs & links

Link text throughout is specific and descriptive ("Connect with the community on Matrix ›", "Connect with the community on Discourse ›") — no "click here" or "read more" instances found.
CTAs use honest, specific verbs ("Contact us", "Read Docs") rather than vague phrasing.

Structure & copy

Headings follow a logical H1 → H2 → H3 hierarchy with no skipped levels.
Headings are in sentence case throughout ("Join the community", "Explore charms on Charmhub", "Get started with Juju today", "Get in touch").
No exclamation marks, no banned jargon (e.g. "leverage", "utilize", "in order to") found in the extracted copy.
"24/7" is correctly formatted (not "24x7").
Product names are used correctly and consistently: Juju, Charmhub, MicroCloud-style capitalization conventions are followed for the products mentioned.

🔲 Manual checks for reviewer

Responsive behavior – resize the browser or use device emulation to check layout and readability at mobile, tablet, and desktop breakpoints, especially the charm grid and long country dropdown.
Keyboard navigation – tab through the page to confirm correct focus order, visible focus indicators, and accessible labels on interactive elements (including the four category tabs and the contact modal).
Authenticated states – log in and check any copy that only appears after authentication (not applicable to this public page unless gated content exists elsewhere).
JS-rendered content – interact with the page to trigger dynamic states (tab switching, modal open/close, form validation errors, success messages).
Design fidelity – compare the live build against Figma (node 272-4097), particularly the charm grid and CTA strip.
Copy doc alignment – confirm the live copy matches the linked copy doc's latest approved version.

Generated by the automated UX QA review tool.

eliman11 · 2026-08-13T16:53:28Z

UX review

Automated UX QA review generated from this PR. Stages run: Demo review.

Demo review — juju-charmhub-community-2026-08-13.md

UX demo review: Charmhub community

URL: https://canonical-com-2803.demos.haus/juju/charmhub-community
Date: 2026-08-13
Figma reference: https://www.figma.com/design/VqD7aqJWV2Cm4l8sth9xLv/canonical.com-juju-and--jaas---Sites?node-id=272-4097
Copy doc: https://docs.google.com/document/d/18KE4MzWdRNNe12B-rZXA_22NLg8U6LP2kcV3YTWcHy4/edit
Note: Page content is partially JS-rendered. The tabbed charm showcase defaults to showing the "Databases" tab; other tab panel content is present in the static HTML but hidden. WebFetch retrieved all static HTML. Design fidelity against the Figma file and copy doc comparison could not be performed – both require authenticated access.

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs Work	🔵 Minor	❓ Needs Review	⬜ N/A
UX quality check	8	1	3	4	2	1
Brand & style compliance	—	0	3	6	—	—

Total issues: 17 (one critical, six needs work, ten minor) · Needs review: two · N/A sections: breadcrumbs/back links

Issues by page section

Hero

[Structure & Hierarchy] 🔵 Minor – No intro text beneath the H1
Evidence: H1 reads "Community and Charmhub" with no supporting description or subheading in the hero.
A single-line title gives users no immediate context about what the page covers or who it is for. Adding a one- or two-sentence description ("Connect with the Juju community, get enterprise support, and explore charms on Charmhub") would reduce cognitive load before users scroll into the page body.

Join the community

[Structure & Hierarchy] 🟡 Needs Work – Card headings are styled paragraphs, not heading elements
Evidence: "Matrix space", "Discourse forum", and "Canonical support" are rendered as <p class="p-heading--5"> not <h3> elements.
After H2 "Join the community", the page has no semantic H3s. Screen reader users navigating by heading will skip straight from that H2 to the next H2 with no way to jump between cards. Change these to <h3> (or the appropriate heading level) so the outline reads H1 → H2 → H3 consistently throughout the page. The same pattern recurs in the Explore section and the contact modal – address it systematically.

[CTAs] 🔵 Minor – "Contact us" link in community card uses same label as primary section CTA
Evidence: The "Contact us →" link in the Canonical support card and the "Contact us" button in the "Get started" section both invoke the same modal.
Having the same link text at two points in the page is acceptable when both go to the same destination, which they do here. The concern is visual: users arriving at the community section may not immediately read this as a distinct CTA tier rather than a duplicate. Consider "Talk to our team →" or "Get enterprise support →" to give the community card link its own voice.

[Brand & style | B7] 🟡 Needs Work – Unjustified superlative: "the best way to interact"
Evidence: "The Juju Matrix Space is the best way to interact with all the community members…" (Matrix space card)
"Best" should only be used when the claim can be verified. Replace with something specific: "The Juju Matrix Space is the primary place to chat with community members and Canonical engineers."

[Brand & style | B7] 🟡 Needs Work – Unjustified superlative: "best support experience"
Evidence: "…to provide the best support experience for Ubuntu and your full open source stack…" (Canonical support card)
Same issue. Replace with a verifiable benefit statement, e.g. "…with 24/7 enterprise support for Ubuntu and your full open source stack."

Explore charms on Charmhub

[Structure & Hierarchy] 🔵 Minor – Bold lead-in sentence has no terminal punctuation
Evidence: <b>Charmhub is a curated marketplace for charms which can be readily integrated into any infrastructure</b> – no period.
Add a period. As a standalone bold sentence this reads as an incomplete statement.

[Structure & Hierarchy] 🔵 Minor – Identical descriptions for Postgres and MySQL
Evidence: Both Postgres and MySQL are described as "Open-source relational database management system."
Two products sharing a word-for-word description offers no differentiation and looks like a placeholder. Even a brief distinguishing phrase (e.g. "Open source object-relational database" for Postgres vs. "Open source relational database with broad enterprise adoption" for MySQL) helps users choose between them.

[Accessibility] 🔵 Minor – Duplicate adjacent links for MySQL
Evidence: The MySQL card has two separate <a> elements pointing to the same URL – one wrapping the logo image and one wrapping the heading text "MySQL".
Two keyboard-focusable links to the same destination create unnecessary tab stops. Wrap image and heading together in a single <a> (as all other charm cards do) or remove the image link and keep only the text link.

Get started with Juju today

[CTAs] 🔵 Minor – "Read Docs" CTA lacks specificity
Evidence: <a href="https://documentation.ubuntu.com/juju" class="p-button--positive">Read Docs</a>
"Read Docs" is brief to the point of ambiguity. "Read the Juju docs" or "Explore Juju documentation" is marginally clearer about what the user is clicking into.

Contact form (modal – "Get in touch")

[Accessibility] 🔴 Critical – Empty <label> on the "Tell us more about your needs" textarea
Evidence: <label class="u-hide" for="about-use-case"></label> – the label is both visually hidden and contains no text. The associated textarea has id="about-use-case".
A screen reader announcing this field will find no accessible name via its <label>. The fieldset has a group label ("Tell us more about your needs" via aria-labelledby), but browsers do not reliably cascade a fieldset label down to individual inputs – each field needs its own accessible name. Fix by populating the <label> element with the field's description, even if it remains visually hidden: <label class="u-hide" for="about-use-case">Tell us more about your needs</label>.

[CTAs] 🟡 Needs Work – "Submit" is a vague form action
Evidence: <button type="submit" class="p-button--positive js-submit-button">Submit</button>
The UX checklist and Canonical style guide both flag "submit" as a non-specific action. Use a verb that describes what happens: "Send enquiry", "Send message", or "Get in touch" match the modal's heading.

Brand & style compliance

🟡 Needs Work

A3 – Product name not capitalized: "Discourse"
- Found: "The discourse forum is the primary way for the community to discuss juju and charms." (Discourse forum card) | Correct: "The Discourse forum…" – Discourse is a product proper noun and is capitalized in the same card's heading ("Discourse forum").
A3 – Product name not capitalized: "Juju"
- Found: "…the community to discuss juju and charms." (Discourse forum card) | Correct: "…discuss Juju and charms."
B5 – Passive voice in charm showcase intro
- Found: "Canonical and community made charms are available on Charmhub." | Correct: "Canonical and the community publish charms on Charmhub." The passive construction buries the subject and sounds corporate.

🔵 Minor

A2 – "Open-source" hyphenated (three instances)
- Found: "Open-source relational database management system" (Postgres and MySQL descriptions); "Open-source reverse proxy and load balancer…" (Traefik description) | Correct: "Open source…" – Canonical style explicitly disallows the hyphen even when "open source" precedes a noun.
A4 – "Machine charms" unnecessarily capitalized
- Found: "…a large collection of Kubernetes and Machine charms…" | Correct: "…Kubernetes and machine charms" – "machine" is not a proper noun in this context; only "Kubernetes" warrants a capital.
A12 – Missing hyphens in compound modifiers (two instances)
- Found: "community curated guides and resources" | Correct: "community-curated guides and resources"
- Found: "in depth explanations on new concepts" | Correct: "in-depth explanations on new concepts"
A12 – Missing hyphen in compound modifier
- Found: "Canonical and community made charms are available" | Correct: "community-made charms" (if keeping this phrasing; see B5 note above about passive voice)
A8 – Inconsistent form label capitalization
- Found: "Job Title:" in the contact modal | Correct: "Job title:" to match "First name:", "Last name:", "Email:", "Company:" – all other labels use sentence case.
B3 – Multiple sentences exceed 20-word average
- Found (three instances, Discourse forum and Canonical support cards):
  - "The Juju Matrix Space is the best way to interact with all the community members and chat with the Canonical engineers working on Juju and charming." (28 words)
  - "The forum is used daily by all the Canonical engineers working on charms and it includes a comprehensive list of community curated guides and resources." (27 words)
  - "Our global team of experts is available 24/7 to provide the best support experience for Ubuntu and your full open source stack, from infrastructure to applications." (27 words)
    Break each into two shorter sentences or cut redundant phrases.

❓ Needs review

Design fidelity – The provided Figma file (node 272-4097) could not be accessed directly. A reviewer should open the Figma and verify that the live hero (no subtitle), the three-column community layout, and the charm tab section match the approved design. In particular, confirm whether a hero subtitle was designed but not yet implemented.
Copy doc comparison – The provided Google Doc (https://docs.google.com/document/d/18KE4MzWdRNNe12B-rZXA_22NLg8U6LP2kcV3YTWcHy4/edit) could not be accessed without authentication. A reviewer should compare the live page copy against the approved copy doc to confirm all approved text is present and no unapproved changes have been introduced.

⬜ Not applicable

Breadcrumbs / back links – This is a standalone product community page, not part of a multi-step flow. No breadcrumb navigation is expected.

✅ What looks good

Navigation

Canonical top navigation logo has alt="Canonical" and the Juju secondary nav logo's empty alt="" is acceptable because the adjacent <span>Juju</span> provides the link's accessible name.
The Juju secondary sub-navigation clearly marks "Community" as the current page with aria-current="page".
Navigation labels (How Juju works, Charmhub, JAAS, Community, Docs, Blog) are concise and consistent.

Hero

H1 "Community and Charmhub" is meaningful and specific – it accurately names the page content.

Join the community

All three community channel links use descriptive, destination-specific text: "Connect with the community on Matrix →" and "Connect with the community on Discourse →" are exemplary link text.
Images in the community cards have meaningful alt text: "Matrix", "Discourse", "Canonical".
Each card body copy is clearly structured: image → heading → description → CTA.

Explore charms on Charmhub

The tabbed charm showcase includes a mobile-friendly <select> fallback for small screens – a good progressive enhancement.
Most charm card links have aria-label attributes providing accessible names even though the logo images have empty alt="" – the empty alt is appropriate for decorative logos inside labeled links.
Tab role markup is correct: role="tablist", role="tab", and role="tabpanel" with matching aria-controls/aria-labelledby relationships.
Tab labels are in sentence case and descriptive: Databases, Big data and AI, Observability, Infrastructure.
Charm descriptions for the Observability and Big data and AI tabs are varied and informative – they avoid the duplicated-description problem found in the Databases tab.

Get started

Section heading "Get started with Juju today" is action-oriented and specific to the product.
"Read Docs" links to the correct Juju documentation URL.

Contact form (modal)

All required fields (First name, Last name, Email, Company, Job title, Country) have visible, correctly associated <label> elements with for attributes.
Required fields are marked with .is-required.
The country <select> has a <label> and a neutral default option ("Select…") rather than a pre-selected country.
Privacy consent checkbox and links to Canonical's Privacy Notice and Privacy Policy are present.
Modal close button has aria-label="Close active modal" and aria-controls="juju-modal".
Form success and error notifications are pre-rendered in the DOM with appropriate p-notification--positive and p-notification--negative patterns.

🔲 Manual checks for reviewer

Responsive behavior – resize the browser or use device emulation to check layout and readability at mobile, tablet, and desktop breakpoints; in particular verify the charm tabs → select fallback on mobile
Keyboard navigation – tab through the page to confirm correct focus order, visible focus indicators, and accessible labels on interactive elements; test the tabbed charm section
JS-rendered content – interact with the modal contact form to trigger field validation, success, and error states
Authenticated states – no authenticated states are expected on this page
Design fidelity – compare against Figma node 272-4097, particularly the hero (missing subtitle?), community card layout, and charm section
Copy doc comparison – compare live copy against the approved Google Doc

Generated by the automated UX QA review tool.

muhammad-ali-pk · 2026-08-13T17:27:54Z

UX review

Automated UX QA review generated from this PR. Stages run: Demo review.

Demo review — juju-charmhub-community-2026-08-13.md

UX demo review: Charmhub community (Juju)

URL: https://canonical-com-2803.demos.haus/juju/charmhub-community
Date: 2026-08-13
Note: Fetched via raw HTML (not the WebFetch markdown renderer, which returned near-empty output for this page). All four charm-category tab panels are present server-side in the HTML, so tab-switching content was captured in full. Interactive states (which tab is visually active, modal open/close, focus order) still require manual verification.
Checklist source: https://raw.githubusercontent.com/Sophie-32/sites-designops/master/checklists/demo-review.md returned a 404 — used local fallback references/default-checklist.md.
Context provided: Figma file (node 272-4097) and copy doc (18KE4MzWdRNNe12B-rZXA_22NLg8U6LP2kcV3YTWcHy4) were supplied as PR context but were not fetched for this pass, since neither tool has authenticated access to Google Docs/Figma content in this environment. Design-fidelity and copy-doc comparison are flagged under "Needs review" below.

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs Work	🔵 Minor	❓ Needs Review	⬜ N/A
UX quality check	6	2	4	1	2	0
Brand & style compliance	—	0	3	6	—	—

Total issues: 16 (2 critical, 7 needs work, 7 minor) · Needs review: 2 · N/A sections: none (all checklist sections apply to this page)

Issues by page section

Join the community (Matrix / Discourse / Canonical support cards)

[Structure & Hierarchy] 🟡 Needs Work – Card titles are not real headings
Evidence: "Matrix space", "Discourse forum" and "Canonical support" are marked up as <p class="p-heading--5">, not <h3>/<h4> elements, even though they visually read as subheadings under the "Join the community" <h2>. The same styled-<p>-as-heading pattern repeats for every charm name in the grid below (Postgres, MySQL, Kafka, etc.).
Recommendation: Use real heading elements (e.g. <h3>) at this level so screen reader users navigating by heading can find these sections; styling can stay the same.

Explore charms on Charmhub — charm grid (Databases tab)

[Structure & Hierarchy] 🔴 Critical – Wrong logo displayed for Charmed MongoDB
Evidence: The "Charmed MongoDB" card (aria-label="Charmed MongoDB", link to charmhub.io/mongodb) renders the Ubuntu logo (assets.ubuntu.com/v1/5a6b9b4b-ubuntu-logo.png), not a MongoDB logo. Every other card in the grid (Postgres, MySQL, Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, Vault, Traefik, Landscape) uses a correctly named, product-specific logo asset.
This misrepresents the MongoDB integration and will confuse users scanning the grid by logo. Swap in the correct MongoDB logo asset before this ships.

[Links] 🟡 Needs Work – Inconsistent link structure for the MySQL card
Evidence: Every other charm card wraps the logo image and the heading text in a single <a> (e.g. Postgres: one link, aria-label="Postgres", wrapping both image and heading). The MySQL card instead splits this into two separate, adjacent links to the same destination — one wrapping only the image (aria-label="MySQL"), one wrapping only the heading text (MySQL).
Recommendation: Wrap the MySQL logo and heading in a single link, matching the pattern used by every other card, for a consistent tab order and predictable click target.

Get started with Juju today (CTA strip)

[CTAs] 🔵 Minor – Inconsistent CTA capitalization
Evidence: Read Docs (Title Case) sits next to Contact us (sentence case) in the same CTA pair.
Recommendation: Use sentence case throughout for consistency: "Read docs" or "Read the docs".

Get in touch (contact modal form)

[Forms & Inputs] 🔴 Critical – Textarea has no accessible label
Evidence: The "Tell us more about your needs" textarea's <label> element is empty: <label class="u-hide" for="about-use-case"></label>. The visible heading above it ("Tell us more about your needs") is a plain <p>, not programmatically linked to the field, and the matching <legend> text is visually hidden off-screen. A screen reader user tabbing into this field hears no name for it at all.
Recommendation: Give the <label for="about-use-case"> real text content (visually hidden is fine, e.g. "Tell us more about your needs"), or add aria-labelledby pointing at the visible heading.

[Accessibility] 🟡 Needs Work – Decorative separator exposed as real option text in the country dropdown
Evidence: The Country <select> includes <option disabled>——————————————————</option> between the shortlist (France, Germany, Japan, UK, US) and the full alphabetical list. Screen readers will announce this string of dashes as an option.
Recommendation: Use a semantic <optgroup> or a screen-reader-only label (e.g. "All countries") instead of a decorative dash string.

[CTAs] 🟡 Needs Work – Vague submit button text
Evidence: The form's submit button reads "Submit", one of the checklist's explicitly called-out vague CTA labels.
Recommendation: Use a specific action verb, e.g. "Send message" or "Get in touch".

Brand & style compliance

🟡 Needs Work

A2 – "open source" formatting – Inconsistent hyphenation of a defined brand term across the same charm grid.
- Found: "Open-source relational database management system" (Postgres and MySQL cards) and "Open-source reverse proxy and load balancer for HTTP and TCP-based applications" (Traefik card) | Correct: "Open source relational database management system" / "Open source reverse proxy…" — no hyphen, matching the seven other cards in the same grid (Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, Vault) that already use the correct unhyphenated form.
B7 – Superlatives – Unjustified superlative claims.
- Found: "The Juju Matrix Space is the best way to interact with all the community members…" and "…provide the best support experience for Ubuntu and your full open source stack" | Correct: state the specific benefit instead, e.g. "a good way to interact with…" / "a great support experience for…", or drop the superlative entirely.
A3 – Product names – Lowercase "juju" used mid-sentence instead of the capitalized product name.
- Found: "The discourse forum is the primary way for the community to discuss juju and charms." | Correct: "…discuss Juju and charms."

🔵 Minor

A4 – Capitalization – Mid-sentence product/term capitalized that should be lowercase.
- Found: "Charmhub includes a large collection of Kubernetes and Machine charms…" | Correct: "…Kubernetes and machine charms…" (per style guide, "charm" is lowercase except sentence-initial).
A4 – Capitalization – Inconsistent capitalization of the Discourse product name.
- Found: "The discourse forum is the primary way for the community to discuss juju and charms." (lowercase, right after a heading that reads "Discourse forum") | Correct: "The Discourse forum is the primary way…" for consistency with the heading above it.
A8 – Punctuation – Missing sentence-ending period.
- Found: "Charmhub is a curated marketplace for charms which can be readily integrated into any infrastructure" (no closing period) | Correct: add a period at the end of the sentence.
A12 – Hyphens – Compound adjective before a noun not hyphenated.
- Found: "Canonical and community made charms are available on Charmhub." | Correct: "Canonical and community-made charms…"
A12 – Hyphens – Compound adjective before a noun not hyphenated.
- Found: "…announce new releases and provide in depth explanations on new concepts." | Correct: "…provide in-depth explanations…"
B5 – Active voice – Passive construction.
- Found: "The Juju Matrix Space is hosted by Canonical and it is also the home of the broader Ubuntu community chat." | Correct: "Canonical hosts the Juju Matrix Space, which is also home to the broader Ubuntu community chat."

❓ Needs review

Design fidelity vs Figma – The supplied Figma file (node 272-4097) was not compared against this build in this pass; a side-by-side visual diff is recommended before sign-off, especially for the charm grid layout and the "Get started" CTA strip.
Copy doc alignment – The supplied copy doc was not diffed against live copy in this pass. If this page's copy doc has already been through stage 1 (copy doc review), confirm the doc reflects the version above; if not, treat this audit as the first copy review for this page.
Tab interaction states – The four charm-category tabs (Databases, Big data and AI, Observability, Infrastructure) are implemented with proper ARIA (role="tablist", role="tab", aria-selected, role="tabpanel"), but visual/focus behavior when switching tabs should be manually verified (focus management, visible focus indicator, only the active panel visible).
Country dropdown length (mobile) – The "Get in touch" form's country <select> contains the full ISO country list (~240 entries). Flagging for mobile review — long native selects can be awkward on small touchscreens; confirm behavior is acceptable on target devices.

✅ What looks good

Accessibility & forms

Charm-card logos correctly use empty alt="" with the accessible name provided by the parent link's aria-label (e.g. aria-label="Postgres") — a valid decorative-image pattern, not a missing-alt-text issue.
The "I agree to receive information…" marketing checkbox is properly labelled via aria-labelledby.
Anti-spam honeypot fields ("Website", "Name") are correctly hidden off-screen (u-off-screen, tabindex="-1") rather than visually hidden in a way that would confuse assistive tech.
Tab component uses full, correct ARIA: role="tablist", role="tab", aria-selected, role="tabpanel", aria-labelledby.
Privacy Notice and Privacy Policy links are present and correctly attached to the contact form's consent copy.

CTAs & links

Link text throughout is specific and descriptive ("Connect with the community on Matrix ›", "Connect with the community on Discourse ›") — no "click here" or "read more" instances found.
CTAs use honest, specific verbs ("Contact us", "Read Docs") rather than vague phrasing.

Structure & copy

The true heading elements on the page (H1 → H2) follow a logical hierarchy with no skipped levels.
Headings are in sentence case throughout ("Join the community", "Explore charms on Charmhub", "Get started with Juju today", "Get in touch").
No exclamation marks, no banned jargon (e.g. "leverage", "utilize", "in order to") found in the extracted copy.
"24/7" is correctly formatted (not "24x7").
Most product names are capitalized correctly and consistently: Juju (in headings), Charmhub, MicroCloud-style capitalization conventions are followed for the products mentioned (see brand & style findings above for the one lowercase "juju" instance).

🔲 Manual checks for reviewer

Responsive behavior – resize the browser or use device emulation to check layout and readability at mobile, tablet, and desktop breakpoints, especially the charm grid and long country dropdown.
Keyboard navigation – tab through the page to confirm correct focus order, visible focus indicators, and accessible labels on interactive elements (including the four category tabs and the contact modal).
Authenticated states – log in and check any copy that only appears after authentication (not applicable to this public page unless gated content exists elsewhere).
JS-rendered content – interact with the page to trigger dynamic states (tab switching, modal open/close, form validation errors, success messages).
Design fidelity – compare the live build against Figma (node 272-4097), particularly the charm grid and CTA strip.
Copy doc alignment – confirm the live copy matches the linked copy doc's latest approved version.

Generated by the automated UX QA review tool.

github-advanced-security Bot found potential problems Jul 23, 2026

View reviewed changes

Comment thread .github/workflows/ux-review.yaml Fixed

muhammad-ali-pk added the Review: UX needed label Jul 23, 2026

muhammad-ali-pk removed the Review: UX needed label Jul 23, 2026

muhammad-ali-pk marked this pull request as ready for review July 23, 2026 08:06

Copilot AI review requested due to automatic review settings July 23, 2026 08:06

muhammad-ali-pk added the Review: UX needed label Jul 23, 2026

Copilot started reviewing on behalf of muhammad-ali-pk July 23, 2026 08:06 View session

Copilot AI reviewed Jul 23, 2026

View reviewed changes

Comment thread .github/workflows/ux-review.yaml

muhammad-ali-pk force-pushed the automated-ux-check branch from 05a449b to ac2e7c3 Compare July 23, 2026 08:22

muhammad-ali-pk added Review: UX needed and removed Review: UX needed labels Jul 23, 2026

github-advanced-security Bot found potential problems Jul 23, 2026

View reviewed changes

Comment thread .github/workflows/ux-review.yaml Fixed

muhammad-ali-pk added Review: UX needed and removed Review: UX needed labels Jul 23, 2026

muhammad-ali-pk force-pushed the automated-ux-check branch from 65c3c47 to 7b89551 Compare July 24, 2026 09:04

feat: add automated UX review workflow

ddb744e

muhammad-ali-pk force-pushed the automated-ux-check branch from 7b89551 to ddb744e Compare July 24, 2026 11:25

muhammad-ali-pk added Review: UX needed and removed Review: UX needed labels Jul 24, 2026

muhammad-ali-pk self-assigned this Aug 24, 2026

muhammad-ali-pk added Review: UX +1 Review: UX -1 Review: UX needed and removed Review: UX needed Review: UX +1 Review: UX -1 labels Aug 24, 2026

Uh oh!

Conversation

muhammad-ali-pk commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Done

QA

Issue / Card

Screenshots

Uh oh!

webteam-app commented Jul 23, 2026

Demo

Jenkins

demos.haus

Uh oh!

Uh oh!

codecov Bot commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

github-actions Bot commented Jul 23, 2026

UX review

UX demo review: Charmhub community (Juju)

Summary

Issues by page section

Join the community

Explore charms on Charmhub

Get started with Juju today

Get in touch (modal form)

Brand & style compliance

🔴 Critical

🟡 Needs Work

🔵 Minor

❓ Needs review

⬜ Not applicable

✅ What looks good

🔲 Manual checks for reviewer

Uh oh!

Uh oh!

github-actions Bot commented Jul 24, 2026

UX review

UX demo review: Charmhub community (Juju)

Summary

Issues by page section

Join the community

Explore charms on Charmhub

✅ What looks good

⬜ Not applicable

🔲 Manual checks for reviewer

Uh oh!

muhammad-ali-pk commented Jul 24, 2026

UX review

UX demo review: Charmhub community (Juju)

Summary

Issues by page section

Join the community – Matrix space / Discourse forum / Canonical support

Explore charms on Charmhub (intro copy)

Charm listing – Databases / Big data and AI / Observability / Infrastructure tabs

Get in touch (contact modal, triggered from "Contact us")

Brand & style compliance

🔴 Critical

🟡 Needs Work

🔵 Minor

❓ Needs review

⬜ Not applicable

✅ What looks good

🔲 Manual checks for reviewer

Uh oh!

Sophie-32 commented Jul 24, 2026

UX review

UX content audit report – live page

Summary

Issues by page section

Hero

Join the community – Matrix space card

Join the community – Discourse forum card

muhammad-ali-pk commented Jul 23, 2026 •

edited

Loading

codecov Bot commented Jul 23, 2026 •

edited

Loading