add back id="hint" (#1192)

Author: claviska

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

@@ -22,6 +22,7 @@ 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,13 +234,14 @@ 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,6 +1310,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         ></button>
 
         <slot
+          id="hint"
           name="hint"
           part="hint"
           class=${classMap({

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

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

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

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

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

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