[SF][A11y]: Text spacing not applied to selected values and entered inputs into some components

[GongRichard]

Bug Description

Use Stylus chrome extension to apply text spacing and observe the text spacing isn't applied to the below components

1. ui5-combobox

2. ui5-date-picker

3. ui5-daterange-picker

4. ui5-datetime-picker

5. ui5-input

6. ui5-multi-combobox

7. ui5-multi-input

8. ui5-select

9. ui5-step-input

10. ui5-textarea

11. ui5-time-picker

Expected Behavior

Text spacing should be applied correctly to entered values.

Context

• UI5 Web Components version: {1.6.0}
• OS/Platform: {...}
• Browser: {Chore}
• Affected component: {...}

Priority

• [ ] Low
• [x] Medium
• [ ] High
• [ ] Very High

The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:

• Breaks entire application or system - High or Very High
• Accessibility issue - Medium or High
• Functional issue - Medium or High
• Visual issue - Low or Medium

Note: The priority might be re-evaluated by the issue processor.

Stakeholder Info (if applicable)

• Organization: {SAP SuccessFactors}
• Business impact: {...}

[LidiyaGeorgieva]

Hello @GongRichard ,

I tested the listed components with the following configuration:

/*{    line-height:1.5 !important;    letter-spacing:0.12em !important;    word-spacing:0.16em !Important;  }   p {    margin-bottom:2em !important;  }

and I found only two controls that have issues:

1. ui5-combobox - text spacing applies correctly
2. ui5-date-picker - text spacing applies correctly
3. ui5-daterange-picker - text spacing applies correctly
4. ui5-datetime-picker - text spacing applies correctly
5. ui5-input - text spacing applies correctly
6. ui5-multi-combobox - text spacing applies correctly
7. ui5-multi-input - text spacing applies correctly
8. ui5-select - text spacing applies correctly
9. ui5-step-input - issue that can be seen in sample "Step Input with min, max, step and valuePrecision"
10. ui5-textarea - text spacing applies correctly
11. ui5-time-picker - issue for the placeholder and the value

Please retest and confirm.

Best Regards, Lidiya

[GongRichard]

Hi @LidiyaGeorgieva , Yes, you are right. I only tested by adding css in body tag. Now I applied the css to the wc html tag. Except ui5-step-input and ui5-time-picker, others works well.

Thanks, Richard

[GongRichard]

Hi @LidiyaGeorgieva, We use ui5-input inside a SF customized webcomponents, the css can't be applied to the input. Do you know the reason?

Thanks, Richard

[LidiyaGeorgieva]

Hello @SAP/ui5-webcomponents-topic-b please take over.

For the following components have issues when text spacing is changed with Stylus chrome extension:

• ui5-step-input - issue that can be seen in sample "Step Input with min, max, step and valuePrecision"
• ui5-time-picker - issue for the placeholder and the value

Issues are not reproducible for openui5.

[LidiyaGeorgieva]

Hi @LidiyaGeorgieva, We use ui5-input inside a SF customized webcomponents, the css can't be applied to the input. Do you know the reason?

Thanks, Richard

Hello @GongRichard ,

We suspect the reason is the same as the reason for the reported issues - ui5-input is internal for the ui5-input-sf-goal-form (and for ui5-time-picker and ui5-step-input). Hint for the fix can be searched in the ui5-date-picker (since it works as expected). Most possibly some CSS styles for the Input should be set with value "inherit" in order the Input to receive the CSS styles from the outer control.

Best Regards, Lidiya

[GongRichard]

Hi @LidiyaGeorgieva , Thanks a lot. I will try the solution as ui5-date-picker to see if can fix the issue. Thanks, Richard

[ilhan007]

Hello @GongRichard, you said offline that you still have issues with the ComboBox, could you share them with us here?

[GongRichard]

I checked ui5-combobox’s style, line-height, letter-spacing and word-spacing were set to normal, whether they should were set to inherit? And for ui5-date-picker, ui5-daterange-picker, ui5-datetime-picker, ui5-input, ui5-multi-combobox, ui5-multi-input, ui5-step-input, ui5-textarea and ui5-time-picker, they have this same code issue.

[ilhan007]

Hi @unazko @LidiyaGeorgieva could you check this new input by @GongRichard