Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SF_ACC Successfactors : FlexibleColumnLayout in IE11 sometime shows aria-labels as visible #2723

Closed
mydavidzhang opened this issue Jan 23, 2021 · 4 comments · Fixed by #3085

Comments

@mydavidzhang
Copy link

mydavidzhang commented Jan 23, 2021

Describe the bug
FlexibleColumnLayout in IE11 sometime shows aria-labels as visible on top right corner when First column is collapsed and only Middle column visible

To reproduce
Steps to reproduce the behavior:

  1. Create <ui5-flexible-column-layout layout="TwoColumnsMidExpanded"><div slot="startColumn">1</div><div slot="midColumn">2</div></ui5-flexible-column-layout>
  2. Open page on IE11
  3. Click arrow icon of flexible column layout to collapse first column
  4. Could see aria-labels on top left sometime like overlapped "First Column", "Middle Column" and "Last Column".

Expected behavior
aria-labels should NOT be visible

Screenshots
Screenshot 2021-01-22 234243
Screen Shot 2021-01-22 at 11 51 05 PM

Context

  • UI5 Web Components version : 0.29.0
  • OS/Platform: Windows
  • Browser: IE11 only
  • Other information: Not reproducible in all cases. Can try put different content in startColumn and midColumn like some drop down list. However if one use case can reproduce this issue then could always consistently reproduce it.

Affected components
FlexibleColumnLayout

Organization:
Successfactors

@vladitasev
Copy link
Contributor

Hi @mydavidzhang

I could not reproduce the issue. I tried multiple times with/without cache.

I could imagine something like this could happen on initial load (while CSS is not loaded yet), but never on clicking the arrows.

You could try with this CSS on your HTML page:

.ui5-hidden-text {
	position: absolute;
	clip: rect(1px,1px,1px,1px);
	user-select: none;
	left: 0;
	top: 0;
}

Let me know if it helps at all and we'll take it from there.

Regards,
Vladi

@mydavidzhang
Copy link
Author

mydavidzhang commented Jan 26, 2021

Hi Vladi,
This issue happened in IE11 sometime. Looks the .ui5-hidden-text was there for these labels. And after modified and tried that css in library node_modules/@ui5/webcomponents-fiori/dist/generated/themes/FlexibleColumnLayout.css.js I found the position, user-select, left and top worked when issue happened. Looks the clip css did not work sometimes and that's why the label shows on screen.
To allow screen reader to read these labels suggestion to change top value to negative value like -100rem (or just -2rem), or change both left and top to negative values so that make sure the label is invisible on screen.

Currently below override CSS solution works.

import { addCustomCSS } from "@ui5/webcomponents-base/dist/Theming";
addCustomCSS('ui5-flexible-column-layout',
`
:host .ui5-hidden-text {
  top: -10rem;
}
`);

Thanks

@ilhan007 ilhan007 assigned ilhan007 and unassigned vladitasev Feb 18, 2021
@ilhan007
Copy link
Member

Hello @mydavidzhang thanks for checking.

We think it's safe to add negative coordinates to ensure the labels are not visible in IE. We will create PR for that.

BR,
ilhan

@ilhan007 ilhan007 added the ACC label Mar 12, 2021
ilhan007 added a commit that referenced this issue Apr 2, 2021
Add negative coordinates to the a11y invisible texts to ensure they remain out of the view port. Alredy this is the case in most of the browsers, but on IE they can be still observed.

FIXES: #2723
CLOSES: #2723
ilhan007 added a commit that referenced this issue Apr 2, 2021
Add negative coordinates to the a11y invisible texts to ensure they remain out of the view port. Already this is the case in most of the browsers, but on IE they can be still observed. The negative coordinates do not affect the a11y and do not prevent Screen Readers from announcing the texts.

FIXES: #2723
CLOSES: #2723
ilhan007 added a commit that referenced this issue Apr 2, 2021
Add negative coordinates to the a11y invisible texts to ensure they remain out of the view port. Already this is the case in most of the browsers, but on IE they can be still observed. The negative coordinates do not affect the a11y and do not prevent Screen Readers from announcing the texts.

FIXES: #2723
CLOSES: #2723
ilhan007 added a commit that referenced this issue Apr 2, 2021
Add negative coordinates to the a11y invisible texts to ensure they remain out of the view port. Already this is the case in most of the browsers, but on IE they can be still observed. The negative coordinates do not affect the a11y and do not prevent Screen Readers from announcing the texts.

FIXES: #2723
CLOSES: #2723
@ilhan007
Copy link
Member

ilhan007 commented Apr 9, 2021

Fix is released with 0.29.14

@mydavidzhang mydavidzhang changed the title Successfactors : FlexibleColumnLayout in IE11 sometime shows aria-labels as visible SF_ACC Successfactors : FlexibleColumnLayout in IE11 sometime shows aria-labels as visible Oct 20, 2022
@petyabegovska petyabegovska moved this to Completed in Maintenance - Topic P Jun 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Completed
3 participants