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

ANDI hides the dropdown and pop up window on Linearizing the page #195

Open
richa1920 opened this issue Apr 18, 2023 · 4 comments
Open

ANDI hides the dropdown and pop up window on Linearizing the page #195

richa1920 opened this issue Apr 18, 2023 · 4 comments

Comments

@richa1920
Copy link

Hi,

It looks like the ANDI "Linearize Page" tool does not work properly with dropdowns and pop up windows on a page. Below is a situation where a pop window is hidden when we select the Linearize option from the ANDI Tool.
Here is a screenshot of before ANDI-linearized page
image

Here is a screenshot of the ANDI-linearized page:
image

However, when we try checking for the pop up elements by developer tool, we are able to find it(highlighted below)
image

So, basically it creates a whitespace and hides the element of the popover in the page.
Can anyone suggest what is going wrong here?

Thank you!

@JohnCotterSSA
Copy link
Member

Hi, Here's some info from ANDI on what the linearize function does:
Linearize

This setting will "linearize" the page by searching for elements that have been positioned with CSS, and repositioning them in the order in which a screen reader would detect them.

Elements that have been repositioned will have a teal colored halo around them.

This can be useful when testing the meaningful sequence of elements on the page.

So if the dropdowns and popup windows are being positioned with CSS, then ANDI's linearize is changing that CSS property value, and it could definitely cause a display issue.

The linearize function is a troubleshooting function that intentionally causes displays to look different - and it's not always going to be pretty. You might be able to get what you're after if you use sANDI Reading Order function.

Let me know if that helps.

@richa1920
Copy link
Author

Hi Thank you for the reply.
We understand that ANDI "linearize" the page by searching for elements that have been positioned with CSS, and repositioning them in the order in which a screen reader would detect them.
For our case we do see that on linearizing the page, popover is getting completely hidden but we do see the reading order as you mentioned previously for this as well.
image
Also, I would like to mention two more points-

  1. There are other tools that shows the pop up in the reading order on the page after Linearizing.
  2. For the dropdowns, though the positions does get changed it does show it in the page in reading order upon Linearizing.

Please let me know if you need more information on this.

@JohnCotterSSA
Copy link
Member

The screenshot you provided has ANDI tab order flags (yellow) not the reading order flags (purple).

To help diagnose this problem further, we would need a working example of the issue.

@richa1920
Copy link
Author

Hi,
As you mentioned earlier, I tried the reading order pane and it does show purple color reading order for the popover item as well as shown in below screenshot-
image
I need the below queries to be addressed by you-
1.why does it completely hide the popover and show whitespace in that place after repositioning it as shown below
image

2.In dropdown case, it does reposition the dropdown in the reading order as shown below.
image

Apologies, I cannot provide you the working example as of now but it would be great if you can let me know the answer of above queries.
However, I will try to provide the working example as soon as I can.

Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants