Merge branch 'main' into docs/tile-best-practices

RedHat-UX · Nov 12, 2024 · 3a5f7b2 · 3a5f7b2
2 parents 2116b3b + eb9cb2f
commit 3a5f7b2
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 28 deletions.
diff --git a/.changeset/twelve-cups-yawn.md b/.changeset/twelve-cups-yawn.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-button>`: improved accessibility by allowing focus when disabled'
diff --git a/docs/patterns/logo-wall/guidelines.md b/docs/patterns/logo-wall/guidelines.md
@@ -29,20 +29,20 @@ logos.
 
 ### Bordered
 
-<uxdot-example>
+<uxdot-example width-adjustment="1010px">
   <img src="../guidelines-variants-bordered.png"
       alt="An example of a bordered logo wall with 6 logos each inside of a bordered container."
-      width="560"
-      height="55">
+      width="1120"
+      height="110">
 </uxdot-example>
 
 ### Borderless
 
-<uxdot-example>
+<uxdot-example width-adjustment="1010px">
   <img src="../guidelines-variants-borderless.png"
       alt="An example of a borderless logo wall with 6 logos."
-      width="556"
-      height="55">
+      width="1113"
+      height="110">
 </uxdot-example>
 
 ## Layout
@@ -79,7 +79,7 @@ identity by ensuring that their logos meet accessibility standards.
 
 <div class="grid sm-two-columns">
   <uxdot-best-practice variant="do">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-contrast-do.svg"
       alt="Examples of two Red Hat logos in dark and light themes against background colors that ensure enough color contrast."
       width="556"
@@ -89,7 +89,7 @@ identity by ensuring that their logos meet accessibility standards.
   </uxdot-best-practice>
 
   <uxdot-best-practice variant="dont">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-contrast-dont.svg"
       alt="Examples of two Red Hat logos in dark and light themes against background colors that do not provide enough contrast."
       width="556"
@@ -107,7 +107,7 @@ wall.
 
 <div class="grid sm-two-columns">
   <uxdot-best-practice variant="do">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-contrast-do.svg"
       alt="Examples of two Red Hat logos in dark and light themes against background colors that ensure enough color contrast."
       width="556"
@@ -117,7 +117,7 @@ wall.
   </uxdot-best-practice>
 
   <uxdot-best-practice variant="dont">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-contrast-dont.svg"
       alt="Examples of two Red Hat logos in dark and light themes against background colors that do not provide enough contrast."
       width="556"
@@ -136,7 +136,7 @@ with this case</rh-alert>
 
 <div class="grid sm-two-columns">
   <uxdot-best-practice variant="do">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-sizing-do.png"
       alt="Example of a borderless logo wall with similarly sized logos that represent each partner evenly."
       width="556"
@@ -146,7 +146,7 @@ with this case</rh-alert>
   </uxdot-best-practice>
 
   <uxdot-best-practice variant="dont">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-sizing-dont.png"
       alt="Example of a borderless logo wall in which the sizes of logos varies and disproportionately represents each partner."
       width="559"
@@ -160,7 +160,7 @@ with this case</rh-alert>
 
 <div class="grid sm-two-columns">
   <uxdot-best-practice variant="do">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-align-do.png"
       alt="Example of a borderless logo wall in which each logo is horizontally and vertically aligned in its container."
       width="556"
@@ -170,7 +170,7 @@ with this case</rh-alert>
   </uxdot-best-practice>
 
   <uxdot-best-practice variant="dont">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-align-dont.png"
       alt="Example of a borderless logo wall in which each logo is aligned to the bottom of the container."
       width="556"

diff --git a/docs/patterns/logo-wall/index.md b/docs/patterns/logo-wall/index.md
@@ -25,20 +25,20 @@ A logo wall is a visual arrangement of logos representing various brands, compan
 <div class="grid">
   <div>
     <h3>Bordered</h3>
-    <uxdot-example>
+    <uxdot-example width-adjustment="1010px">
       <img src="./overview-sample-bordered.png"
       alt="An example of a bordered logo wall with 6 logos each inside of a bordered container."
-      width="1010"
+      width="1020"
       height="99">
     </uxdot-example>
   </div>
   <div>
     <h3>Borderless</h3>
-    <uxdot-example>
+    <uxdot-example width-adjustment="1010px">
       <img src="./overview-sample-borderless.png"
       alt="An example of a borderless logo wall with 6 logos."
-      width="1010"
-      height="100">
+      width="1113"
+      height="110">
     </uxdot-example>
   </div>
 </div>

diff --git a/docs/patterns/logo-wall/style.md b/docs/patterns/logo-wall/style.md
@@ -61,23 +61,23 @@ 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.
 
-<uxdot-example width-adjustment="560px">
+<uxdot-example width-adjustment="1010px">
   <img src="../style-space-group-bordered.png"
       alt="Example of a bordered logo wall with spacing values."
-      width="560"
-      height="55">
+      width="1120"
+      height="110">
 </uxdot-example>
 
 ### Borderless
  - Logos are evenly spaced.
  - 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.
 
-<uxdot-example width-adjustment="556px">
+<uxdot-example width-adjustment="1113px">
   <img src="../style-space-group-borderless.png"
       alt="Example of a borderless logo wall with spacing values."
-      width="556"
-      height="55">
+      width="1113"
+      height="110">
 </uxdot-example>
 
 ## Interaction states

diff --git 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'}>
         <span aria-hidden="true">
           <slot id="icon"
                 part="icon"

diff --git 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
@@ -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`
       <figure id="container">