[MultiComboBox]: User unable to see the complete additional text if it is lengthy

pppwr7 commented 1 year ago

Describe the bug

Hi Colleagues,

We have received an incident raised by accessibility testing team. We have a multicombobox provided to the user. The options have text and additional text property being set. In scenarios where the additional text is lengthy , it gets wrapped and ellipses are shown.

User never gets to see what the complete text was. Could there be a possibility of providing a tooltip kind of feature which shows complete text when user hovers over the option.

Changing the element width is not a full proof solution as we may not know what the max length is.

Isolated Example

https://codesandbox.io/s/dynamicpage-flexiblecolumn-forked-0m7i8r?file=/src/App.js

Reproduction steps

open the dropdown to see the issue where additional text is wrapped.

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

latest

UI5 Web Components Version

latest

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Declaration

[X] I’m not disclosing any internal or sensitive information.

MarcusNotheis commented 1 year ago

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

LidiyaGeorgieva commented 1 year ago

Hello @SAP/ui5-webcomponents-topic-rl please have a look.

MapTo0 commented 1 year ago

The issues is not reproducible in OpenUI5: https://jsbin.com/bebevuteyi/edit?html,output Therefore I consider that as a bug, not a FR.

MapTo0 commented 1 year ago

After some debugging I noticed that all the styles that should be changed belong to the ui5-list The popover needs its content to grow in order to be wider. In this case the additional-text of the list item is set to truncate instead of grow the list item itself. I managed to reach the desired behaviour after removing some styles.

@SAP/ui5-webcomponents-topic-p Could you please check?

I am also adding my test page for easier debugging.

    <ui5-multi-combobox>
        <ui5-mcb-item text="EUR" additional-text="European Currency"></ui5-mcb-item>
        <ui5-mcb-item text="USD" additional-text="US DOLLARS Currency"></ui5-mcb-item>
        <ui5-mcb-item text="INR" additional-text="Indian Currency"></ui5-mcb-item>
        <ui5-mcb-item text="AED" additional-text="Arabic Currency"></ui5-mcb-item>
        <ui5-mcb-item text="YEN" additional-text="Japanese Currency"></ui5-mcb-item>
    </ui5-multi-combobox>

    <br>
    <br>

    <ui5-list separators="None" mode="MultiSelect">
        <ui5-li type="Active" additional-text="European Currency">EUR</ui5-li>
        <ui5-li type="Active" additional-text="US DOLLARS Currency">USD</ui5-li>
        <ui5-li type="Active" additional-text="Indian Currency">INR</ui5-li>
        <ui5-li type="Active" additional-text="Arabic Currency">AED</ui5-li>
        <ui5-li type="Active" additional-text="Japanese Currency">YEN</ui5-li>
    </ui5-list>

Best regards, Martin

SAP / ui5-webcomponents