Skip to content

Commit

Permalink
fix(select, slider, combobox): display label in screen reader instruc…
Browse files Browse the repository at this point in the history
…tions. (#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 .
  • Loading branch information
anveshmekala authored Feb 24, 2023
1 parent bcf0d22 commit 3a7f112
Show file tree
Hide file tree
Showing 3 changed files with 5 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/components/combobox/combobox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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={{
Expand Down
4 changes: 2 additions & 2 deletions src/components/select/select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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}
Expand Down
3 changes: 2 additions & 1 deletion src/components/slider/slider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit 3a7f112

Please sign in to comment.