From d798b85e971de245591d3a75aa6ae6338ba35782 Mon Sep 17 00:00:00 2001 From: Marionne Patel <95588923+marionnegp@users.noreply.github.com> Date: Tue, 5 Nov 2024 18:16:54 -0500 Subject: [PATCH 1/3] docs(uxdot-best-practice): change Do/Don't heading space and icons (#2034) --- uxdot/uxdot-best-practice.css | 2 +- uxdot/uxdot-best-practice.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/uxdot/uxdot-best-practice.css b/uxdot/uxdot-best-practice.css index a5dc0c438a..997262a3d9 100644 --- a/uxdot/uxdot-best-practice.css +++ b/uxdot/uxdot-best-practice.css @@ -17,7 +17,7 @@ span { display: flex; flex-direction: row; align-items: center; - gap: var(--rh-space-sm); + gap: var(--rh-space-md); } #do span { diff --git a/uxdot/uxdot-best-practice.ts b/uxdot/uxdot-best-practice.ts index 45076036ba..93b2522984 100644 --- a/uxdot/uxdot-best-practice.ts +++ b/uxdot/uxdot-best-practice.ts @@ -13,7 +13,7 @@ export class UxdotBestPractice extends LitElement { render() { const { variant } = this; - const icon = variant === 'do' ? 'check-circle' : 'close-circle'; + const icon = variant === 'do' ? 'check-circle-fill' : 'close-circle-fill'; const title = variant === 'do' ? 'Do' : 'Don\'t'; return html`
From c8059332767ba4880067f662cd9251c0d7e47c05 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Wed, 6 Nov 2024 13:43:22 -0500 Subject: [PATCH 2/3] docs: fix images sizes on logo wall pattern (#2025) * docs: fix images sizes on logo wall pattern * docs: correct image sizes logo wall pattern --- docs/patterns/logo-wall/guidelines.md | 28 +++++++++++++-------------- docs/patterns/logo-wall/index.md | 10 +++++----- docs/patterns/logo-wall/style.md | 12 ++++++------ 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/docs/patterns/logo-wall/guidelines.md b/docs/patterns/logo-wall/guidelines.md index 8dc4a88a17..230ba4dde1 100644 --- a/docs/patterns/logo-wall/guidelines.md +++ b/docs/patterns/logo-wall/guidelines.md @@ -29,20 +29,20 @@ logos. ### Bordered - + An example of a bordered logo wall with 6 logos each inside of a bordered container. + width="1120" + height="110"> ### Borderless - + An example of a borderless logo wall with 6 logos. + width="1113" + height="110"> ## Layout @@ -79,7 +79,7 @@ identity by ensuring that their logos meet accessibility standards.
- + Examples of two Red Hat logos in dark and light themes against background colors that ensure enough color contrast. - + Examples of two Red Hat logos in dark and light themes against background colors that do not provide enough contrast. - + Examples of two Red Hat logos in dark and light themes against background colors that ensure enough color contrast. - + Examples of two Red Hat logos in dark and light themes against background colors that do not provide enough contrast.
- + Example of a borderless logo wall with similarly sized logos that represent each partner evenly. - + Example of a borderless logo wall in which the sizes of logos varies and disproportionately represents each partner.
- + Example of a borderless logo wall in which each logo is horizontally and vertically aligned in its container. - + Example of a borderless logo wall in which each logo is aligned to the bottom of the container.

Bordered

- + An example of a bordered logo wall with 6 logos each inside of a bordered container.

Borderless

- + An example of a borderless logo wall with 6 logos. + width="1113" + height="110">
diff --git a/docs/patterns/logo-wall/style.md b/docs/patterns/logo-wall/style.md index 255c162152..d69383c8f5 100644 --- a/docs/patterns/logo-wall/style.md +++ b/docs/patterns/logo-wall/style.md @@ -61,11 +61,11 @@ Logo walls define layout rules for spacing logos, and their styles. - Logos are evenly spaced. - Logos are in a container with 16px of padding on all sides and a corner radius of 3px. - + Example of a bordered logo wall with spacing values. + width="1120" + height="110"> ### Borderless @@ -73,11 +73,11 @@ Logo walls define layout rules for spacing logos, and their styles. - Logos are in a container with 16px of top and bottom padding and 8px of left and right padding. - All containers using the borderless style have the same height but will likely have different widths depending on the dimensions of the logo. - + Example of a borderless logo wall with spacing values. + width="1113" + height="110"> ## Interaction states From eb9cb2ff7c9bbad809597a1d7b257d71b6de0e51 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Mon, 11 Nov 2024 10:52:21 -0500 Subject: [PATCH 3/3] fix(button): aria disabled button (#2042) * fix(button): buttons should be focusable when disabled * chore(button): add changeset * fix(button): use aria-disabled directly on shadow button --- .changeset/twelve-cups-yawn.md | 5 +++++ elements/rh-button/rh-button.ts | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/twelve-cups-yawn.md diff --git a/.changeset/twelve-cups-yawn.md b/.changeset/twelve-cups-yawn.md new file mode 100644 index 0000000000..a76f5761ae --- /dev/null +++ b/.changeset/twelve-cups-yawn.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: improved accessibility by allowing focus when disabled' diff --git a/elements/rh-button/rh-button.ts b/elements/rh-button/rh-button.ts index bec80811f2..f0a1b569a9 100644 --- a/elements/rh-button/rh-button.ts +++ b/elements/rh-button/rh-button.ts @@ -114,7 +114,7 @@ export class RhButton extends LitElement { type="${ifDefined(this.type)}" value="${ifDefined(this.value)}" @click="${this.#onClick}" - ?disabled="${this.disabled || this.#internals.formDisabled}"> + aria-disabled=${String(!!this.disabled || !!this.#internals.formDisabled) as 'true' | 'false'}>