ui5-shellbar: truncated text in popovers is not visible

[JarrettChan]

Bug Description

The ui5-li in popovers of ui5-shellbar do not show the full text to the sighted user in some way. Affects menu popover, overflow shellbar items popover. Hover does not reveal the full text.

Expected Behavior

User should be able to view the full non-truncated text in some way.

Steps to Reproduce

1. Go to https://sap.github.io/ui5-webcomponents/playground/components/ShellBar/
2. Reduce screen width
3. Append to the text content for a slotted [slot="menuItems"] so that it would overflow in the menu popover
4. Open menu

Isolated Example

https://codesandbox.io/s/ui5-webcomponents-forked-wi8vzt?file=/index.html

Context

• UI5 Web Components version: 1.7.1
• OS/Platform: MacOS 12.5.1
• Browser: Chrome Version 105.0.5195.125 (Official Build) (x86_64)
• Affected component: ui5-shellbar, ui5-li

Log Output / Stack Trace / Screenshots

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: SuccessFactors
• Business impact: Affects usage with high zoom / mobile view / languages with longer phrases/characters

[georgimkv]

Hi @SAP/ui5-webcomponents-topic-p This issue is about long text being truncated in the Shellbar Popover. Perhaps it should be wrapping instead.

[dobrinyonkov]

Hi @JarrettChan, according to the visual design of the component, the text inside the menu items should not wrap, but truncate as implemented. Please use the title attribute to show a tooltip with the whole text when an item is hovered.

<ui5-li title="Very long text that truncate...">
    Very long text that truncate...
</ui5-li>

Kind Regards, Dobrin

[JarrettChan]

@dobrinyonkov , Ok I can probably control the menu popover ui5-li since I believe it's copied over from the [slot="menuSlot"] but not the overflow popover ui5-li since that's defined by ui5-shellbar https://github.com/SAP/ui5-webcomponents/blob/main/packages/fiori/src/ShellBarPopover.hbs

Please help with the ui5-li in the overflow popover

[JarrettChan]

Hi @yanaminkova, @dobrinyonkov, My a11y colleague rejected this solution as the tooltip is not visible to keyboard or touch users. Could the overflow list use wrapping-type="Normal" for an overflow title to be accessible to keyboard or touch users?