Skip to content

Commit a7de0cd

Browse files
unazkounazko
authored
fix(ui5-color-picker): provide meaningful labels for the inner input components (#5217)
Issue description: The screen reader should announce meaningful messages in relation to the inner input controls of the "ui5-color-picker". Solution: The "accessibleName" property is enabled for the "ui5-slider" and "ui5-range-slider" components. The missing label references for the "ui5-color-picker" inner input components are added as per specification. Related to: #5015 Related to: #5023
1 parent 9bd9d24 commit a7de0cd

13 files changed

+128
-10
lines changed

‎packages/main/src/ColorPicker.hbs

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
min="0"
2121
max="1530"
2222
value="{{_hue}}"
23+
accessible-name="{{hueSliderLabel}}"
2324
@ui5-input="{{_handleHueInput}}"
2425
></ui5-slider>
2526
<ui5-slider
@@ -29,6 +30,7 @@
2930
max="1"
3031
step="0.01"
3132
value="{{_alpha}}"
33+
accessible-name="{{alphaSliderLabel}}"
3234
@ui5-input="{{_handleAlphaInput}}"
3335
></ui5-slider>
3436
</div>
@@ -47,6 +49,7 @@
4749
class="ui5-color-picker-hex-input"
4850
value="{{hex}}"
4951
@keydown="{{_onkeydown}}"
52+
accessible-name="{{hexInputLabel}}"
5053
@ui5-change="{{_handleHEXChange}}"
5154
value-state="{{hexInputErrorState}}"
5255
></ui5-input>
@@ -62,6 +65,7 @@
6265
id="red"
6366
class="ui5-color-picker-rgb-input"
6467
disabled="{{inputsDisabled}}"
68+
accessible-name="{{redInputLabel}}"
6569
value="{{_color.r}}"
6670
></ui5-input>
6771
<ui5-label>R</ui5-label>
@@ -71,6 +75,7 @@
7175
id="green"
7276
class="ui5-color-picker-rgb-input"
7377
disabled="{{inputsDisabled}}"
78+
accessible-name="{{greenInputLabel}}"
7479
value="{{_color.g}}"
7580
></ui5-input>
7681
<ui5-label>G</ui5-label>
@@ -80,6 +85,7 @@
8085
id="blue"
8186
class="ui5-color-picker-rgb-input"
8287
disabled="{{inputsDisabled}}"
88+
accessible-name="{{blueInputLabel}}"
8389
value="{{_color.b}}"
8490
></ui5-input>
8591
<ui5-label>B</ui5-label>
@@ -90,6 +96,7 @@
9096
disabled="{{inputsDisabled}}"
9197
class="ui5-color-picker-rgb-input"
9298
value="{{_alpha}}"
99+
accessible-name="{{alphaInputLabel}}"
93100
@ui5-input="{{_handleAlphaInput}}"
94101
@ui5-change="{{_handleAlphaChange}}"
95102
></ui5-input>

‎packages/main/src/ColorPicker.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
66
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
77
import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
88
import Float from "@ui5/webcomponents-base/dist/types/Float.js";
9+
import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
910
import {
1011
getRGBColor,
1112
HSLToRGB,
@@ -17,6 +18,16 @@ import Input from "./Input.js";
1718
import Slider from "./Slider.js";
1819
import Label from "./Label.js";
1920

21+
import {
22+
COLORPICKER_ALPHA_SLIDER,
23+
COLORPICKER_HUE_SLIDER,
24+
COLORPICKER_HEX,
25+
COLORPICKER_RED,
26+
COLORPICKER_GREEN,
27+
COLORPICKER_BLUE,
28+
COLORPICKER_ALPHA,
29+
} from "./generated/i18n/i18n-defaults.js";
30+
2031
// Styles
2132
import ColorPickerCss from "./generated/themes/ColorPicker.css.js";
2233

@@ -179,6 +190,10 @@ class ColorPicker extends UI5Element {
179190
];
180191
}
181192

193+
static async onDefine() {
194+
ColorPicker.i18nBundle = await getI18nBundle("@ui5/webcomponents");
195+
}
196+
182197
constructor() {
183198
super();
184199

@@ -533,6 +548,34 @@ class ColorPicker extends UI5Element {
533548
this._setMainColor(this._hue);
534549
}
535550

551+
get hueSliderLabel() {
552+
return ColorPicker.i18nBundle.getText(COLORPICKER_HUE_SLIDER);
553+
}
554+
555+
get alphaSliderLabel() {
556+
return ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA_SLIDER);
557+
}
558+
559+
get hexInputLabel() {
560+
return ColorPicker.i18nBundle.getText(COLORPICKER_HEX);
561+
}
562+
563+
get redInputLabel() {
564+
return ColorPicker.i18nBundle.getText(COLORPICKER_RED);
565+
}
566+
567+
get greenInputLabel() {
568+
return ColorPicker.i18nBundle.getText(COLORPICKER_GREEN);
569+
}
570+
571+
get blueInputLabel() {
572+
return ColorPicker.i18nBundle.getText(COLORPICKER_BLUE);
573+
}
574+
575+
get alphaInputLabel() {
576+
return ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA);
577+
}
578+
536579
get inputsDisabled() {
537580
return this._wrongHEX ? true : undefined;
538581
}

‎packages/main/src/RangeSlider.hbs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
aria-valuemin="{{min}}"
1818
aria-valuemax="{{max}}"
1919
aria-valuetext="From {{startValue}} to {{endValue}}"
20-
aria-labelledby="{{_id}}-sliderDesc"
20+
aria-labelledby="{{_ariaLabelledByProgressBarRefs}}"
2121
aria-disabled="{{_ariaDisabled}}"
2222
></div>
2323
</div>
@@ -34,7 +34,7 @@
3434
aria-valuemin="{{min}}"
3535
aria-valuemax="{{max}}"
3636
aria-valuenow="{{startValue}}"
37-
aria-labelledby="{{_id}}-startHandleDesc"
37+
aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
3838
aria-disabled="{{_ariaDisabled}}"
3939
>
4040
<ui5-icon name="source-code" slider-icon></ui5-icon>
@@ -56,7 +56,7 @@
5656
aria-valuemin="{{min}}"
5757
aria-valuemax="{{max}}"
5858
aria-valuenow="{{endValue}}"
59-
aria-labelledby="{{_id}}-endHandleDesc"
59+
aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
6060
aria-disabled="{{_ariaDisabled}}"
6161
>
6262
<ui5-icon name="source-code" slider-icon></ui5-icon>

‎packages/main/src/RangeSlider.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -768,6 +768,18 @@ class RangeSlider extends SliderBase {
768768
return this.shadowRoot.querySelector(".ui5-slider-progress");
769769
}
770770

771+
get _ariaLabelledByStartHandleRefs() {
772+
return [`${this._id}-accName`, `${this._id}-startHandleDesc`].join(" ").trim();
773+
}
774+
775+
get _ariaLabelledByEndHandleRefs() {
776+
return [`${this._id}-accName`, `${this._id}-endHandleDesc`].join(" ").trim();
777+
}
778+
779+
get _ariaLabelledByProgressBarRefs() {
780+
return [`${this._id}-accName`, `${this._id}-sliderDesc`].join(" ").trim();
781+
}
782+
771783
get styles() {
772784
return {
773785
progress: {

‎packages/main/src/Slider.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
aria-valuemin="{{min}}"
2828
aria-valuemax="{{max}}"
2929
aria-valuenow="{{value}}"
30-
aria-labelledby="{{_id}}-sliderDesc"
30+
aria-labelledby="{{_ariaLabelledByHandleRefs}}"
3131
aria-disabled="{{_ariaDisabled}}"
3232
data-sap-focus-ref
3333
part="handle"

‎packages/main/src/SliderBase.hbs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
{{> handles}}
3737
</div>
3838

39+
<span id="{{_id}}-accName" class="ui5-hidden-text">{{accessibleName}}</span>
3940
<span id="{{_id}}-sliderDesc" class="ui5-hidden-text">{{_ariaLabelledByText}}</span>
4041
</div>
4142

‎packages/main/src/SliderBase.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,18 @@ const metadata = {
100100
type: Boolean,
101101
},
102102

103+
/**
104+
* Defines the accessible aria name of the component.
105+
*
106+
* @type {string}
107+
* @defaultvalue: ""
108+
* @public
109+
* @since 1.4.0
110+
*/
111+
accessibleName: {
112+
type: String,
113+
},
114+
103115
/**
104116
* @private
105117
*/
@@ -794,6 +806,10 @@ class SliderBase extends UI5Element {
794806
get tabIndex() {
795807
return this.disabled ? "-1" : "0";
796808
}
809+
810+
get _ariaLabelledByHandleRefs() {
811+
return [`${this._id}-accName`, `${this._id}-sliderDesc`].join(" ").trim();
812+
}
797813
}
798814

799815
export default SliderBase;

‎packages/main/src/i18n/messagebundle.properties

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,27 @@ COLOR_PALETTE_DIALOG_TITLE=Change Color
9191
#XTIT: Color Palette dialog title of the Color Picker
9292
COLOR_PALETTE_MORE_COLORS_TEXT=More Colors...
9393

94+
#XACT: Aria information for the ColorPicker Alpha slider
95+
COLORPICKER_ALPHA_SLIDER=Alpha control
96+
97+
#XACT: Aria information for the ColorPicker Hue slider
98+
COLORPICKER_HUE_SLIDER=Hue control
99+
100+
#XTOL: Six symbol hexadecimal group representing CSS color hex string
101+
COLORPICKER_HEX=Hexadecimal
102+
103+
#XTOL: Red color for the ColorPicker control
104+
COLORPICKER_RED=Red
105+
106+
#XTOL: Green color for the ColorPicker control
107+
COLORPICKER_GREEN=Green
108+
109+
#XTOL: Blue color for the ColorPicker control
110+
COLORPICKER_BLUE=Blue
111+
112+
#XTOL: Alpha chanel transparency value for RGBA color mode
113+
COLORPICKER_ALPHA=Alpha
114+
94115
#XACT: DatePicker 'Open Picker' icon title
95116
DATEPICKER_OPEN_ICON_TITLE=Open Picker
96117

‎packages/main/test/pages/RangeSlider.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<body class="rangeslider1auto">
2929
<section class="group">
3030
<h2>Basic Range Slider</h2>
31-
<ui5-range-slider id="basic-range-slider" end-value="20"></ui5-range-slider>
31+
<ui5-range-slider id="basic-range-slider" accessible-name="Basic Range Slider" end-value="20"></ui5-range-slider>
3232

3333
<h2>Range Slider with custom min and max properties and tooltip</h2>
3434
<ui5-range-slider id="basic-range-slider-with-tooltip" min="50" max="200" show-tooltip></ui5-range-slider>

‎packages/main/test/pages/Slider.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<body class="slider1auto">
2929
<section class="group">
3030
<h2>Basic Slider</h2>
31-
<ui5-slider id="basic-slider" min="0" max="10"></ui5-slider>
31+
<ui5-slider id="basic-slider" accessible-name="Basic Slider" min="0" max="10"></ui5-slider>
3232

3333
<h2>Basic Slider with tooltip</h2>
3434
<ui5-slider id="basic-slider-with-tooltip" min="0" max="20" show-tooltip></ui5-slider>

0 commit comments

Comments
 (0)