From 3a7f11238d52e7b5cec1cd2dd597d0184d7e0ce3 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Thu, 23 Feb 2023 18:10:57 -0600
Subject: [PATCH] fix(select, slider, combobox): display label in screen reader
 instructions.  (#6500)

**Related Issue:** #5627

## Summary

This PR will add valid label to the component with `aria-label` . User's
can wrap the component with `calcite-label` or use `label` prop .
---
 src/components/combobox/combobox.tsx | 2 +-
 src/components/select/select.tsx     | 4 ++--
 src/components/slider/slider.tsx     | 3 ++-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/combobox/combobox.tsx b/src/components/combobox/combobox.tsx
index e5f7b5cf56d..823f2bc9520 100644
--- a/src/components/combobox/combobox.tsx
+++ b/src/components/combobox/combobox.tsx
@@ -1233,7 +1233,7 @@ export class Combobox
           aria-controls={`${listboxUidPrefix}${guid}`}
           aria-expanded={toAriaBoolean(open)}
           aria-haspopup="listbox"
-          aria-labelledby={`${labelUidPrefix}${guid}`}
+          aria-label={getLabelText(this)}
           aria-live="polite"
           aria-owns={`${listboxUidPrefix}${guid}`}
           class={{
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index c87089960be..4d81dd6160c 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -20,7 +20,7 @@ import {
   HiddenFormInputSlot
 } from "../../utils/form";
 import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
-import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
+import { connectLabel, disconnectLabel, LabelableComponent, getLabelText } from "../../utils/label";
 import {
   componentLoaded,
   LoadableComponent,
@@ -363,7 +363,7 @@ export class Select
     return (
       <Fragment>
         <select
-          aria-label={this.label}
+          aria-label={getLabelText(this)}
           class={CSS.select}
           disabled={this.disabled}
           onChange={this.handleInternalSelectChange}
diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx
index 05cd6207337..722ab25ab93 100644
--- a/src/components/slider/slider.tsx
+++ b/src/components/slider/slider.tsx
@@ -24,7 +24,7 @@ import {
 } from "../../utils/form";
 import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
-import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
+import { connectLabel, disconnectLabel, LabelableComponent, getLabelText } from "../../utils/label";
 import {
   componentLoaded,
   LoadableComponent,
@@ -637,6 +637,7 @@ export class Slider
     return (
       <Host id={id} onTouchStart={this.handleTouchStart}>
         <div
+          aria-label={getLabelText(this)}
           class={{
             ["container"]: true,
             ["container--range"]: valueIsRange,