Merge branch 'next' into card-image-rounding

packages/webawesome/docs/docs/resources/changelog.md

@@ -22,7 +22,6 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed the missing `nanoid` dependency in `package.json` [discuss:1139]
 - Fixed a bug in `<wa-slider>` that prevented the hint from showing up [discuss:1172]
 - Fixed a bug in `<wa-textarea>` where setting `resize="auto"` caused the height of the textarea to double [issue:1155]
-- Fixed a bug in `<wa-color-picker>`, `<wa-checkbox>`, `<wa-input>`, `<wa-radio-group>`, `<wa-switch>`, and `<wa-textarea>` that prevented screen readers from announcing hints [issue:1186]
 - Fixed a bug in `<wa-card>` that caused slotted media to have incorrectly rounded corners [issue:1107]
 - Fixed a bug in `<wa-button-group>` that prevented pill buttons from rendering corners properly [issue:1165]
 - Fixed a bug in `<wa-button-group>` that caused some vertical groups to appear horizontal [issue:1152]

packages/webawesome/src/components/checkbox/checkbox.ts

@@ -234,14 +234,13 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
       </label>
 
       <slot
-        id="hint"
-        part="hint"
         name="hint"
         aria-hidden=${hasHint ? 'false' : 'true'}
         class="${classMap({ 'has-slotted': hasHint })}"
+        id="hint"
+        part="hint"
+        >${this.hint}</slot
       >
-        ${this.hint}
-      </slot>
     `;
   }
 }

packages/webawesome/src/components/color-picker/color-picker.ts

@@ -1310,7 +1310,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         ></button>
 
         <slot
-          id="hint"
           name="hint"
           part="hint"
           class=${classMap({

packages/webawesome/src/components/input/input.ts

@@ -432,9 +432,8 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
       </div>
 
       <slot
-        id="hint"
-        part="hint"
         name="hint"
+        part="hint"
         class=${classMap({
           'has-slotted': hasHint,
         })}

packages/webawesome/src/components/radio-group/radio-group.ts

@@ -370,7 +370,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
         <slot part="form-control-input" @slotchange=${this.syncRadioElements}></slot>
 
         <slot
-          id="hint"
           name="hint"
           part="hint"
           class=${classMap({

packages/webawesome/src/components/switch/switch.ts

@@ -243,7 +243,6 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
       </label>
 
       <slot
-        id="hint"
         name="hint"
         part="hint"
         class=${classMap({

packages/webawesome/src/components/textarea/textarea.ts

@@ -374,7 +374,6 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
       </div>
 
       <slot
-        id="hint"
         name="hint"
         part="hint"
         aria-hidden=${hasHint ? 'false' : 'true'}