| 1080 | } |
| 1081 | |
| 1082 | private get ariaLabel() { |
| 1083 | const { placeholder, inheritedAttributes } = this; |
| 1084 | const displayValue = this.getText(); |
| 1085 | |
| 1086 | // The aria label should be preferred over visible text if both are specified |
| 1087 | const definedLabel = inheritedAttributes['aria-label'] ?? this.labelText; |
| 1088 | |
| 1089 | /** |
| 1090 | * If developer has specified a placeholder |
| 1091 | * and there is nothing selected, the selectText |
| 1092 | * should have the placeholder value. |
| 1093 | */ |
| 1094 | let renderedLabel = displayValue; |
| 1095 | if (renderedLabel === '' && placeholder !== undefined) { |
| 1096 | renderedLabel = placeholder; |
| 1097 | } |
| 1098 | |
| 1099 | /** |
| 1100 | * If there is a developer-defined label, |
| 1101 | * then we need to concatenate the developer label |
| 1102 | * string with the current current value. |
| 1103 | * The label for the control should be read |
| 1104 | * before the values of the control. |
| 1105 | */ |
| 1106 | if (definedLabel !== undefined) { |
| 1107 | renderedLabel = renderedLabel === '' ? definedLabel : `${definedLabel}, ${renderedLabel}`; |
| 1108 | } |
| 1109 | |
| 1110 | return renderedLabel; |
| 1111 | } |
| 1112 | |
| 1113 | private renderListbox() { |
| 1114 | const { disabled, inputId, isExpanded, required } = this; |