Oksana Azarova [2022-12-14 11:38PM UTC]
Hi team!
We currently using Polaris Popover to show help text with link in this section (screenshot attached). The problem is that when navigate with Tab (and back: Shift + Tab), focus does not return to its activator.
Works fine in sendbox, but not in our section
I tried different scenarios with setting preventFocusOnClose ,autofocusTarget , but nothing helps. Maybe somebody has heard about similar issue and knows possible ways of troubleshooting. Thank you! image.png
**[Oksana Azarova](https://github.com/oksanashopify)** [2022-12-14 11:38PM UTC]
Hi team!
We currently using [Polaris Popover](https://polaris.shopify.com/components/popover) to show help text with link in this section (screenshot attached). The problem is that when navigate with Tab (and back: Shift + Tab), focus does not return to its activator.
Works fine in [sendbox](https://codesandbox.io/s/kind-rosalind-47kkjb?file=/App.js), but not in [our section](https://admin.web.quantity-limits-popover.oksana-azarova.us.spin.dev/store/shop1/catalogs/1/editor/products/1)
I tried different scenarios with setting `preventFocusOnClose` ,`autofocusTarget` , but nothing helps. Maybe somebody has heard about similar issue and knows possible ways of troubleshooting. Thank you! [image.png](https://files.slack.com/files-pri/T017D49VC3F-F04FA7MLYFL/image.png)
**[Oksana Azarova](https://github.com/oksanashopify)** [2022-12-15 03:15PM UTC]
Working on solution, [suggested in this channel](https://shopify.slack.com/archives/C01H7LC0EEL/p1671061380203029)
**[Guilherme Santos](https://github.com/gui-santos)** [2022-12-15 03:24PM UTC]
Richard's solution looks good! I think that's the way to fix it
**[Guilherme Santos](https://github.com/gui-santos)** [2022-12-15 03:24PM UTC]
Did you have success with it?
**[Oksana Azarova](https://github.com/oksanashopify)** [2022-12-15 03:29PM UTC]
Didn’t fixed my issue right away, so still working on implementation.
**[Chloe Rice](https://github.com/chloerice)** [2022-12-15 03:36PM UTC]
Hey Oksana, is your activator an interactive element (like a `
**[Oksana Azarova](https://github.com/oksanashopify)** [2022-12-15 03:36PM UTC]
Hi @chloerice! it’s a `
**[Chloe Rice](https://github.com/chloerice)** [2022-12-15 03:39PM UTC]
Hmmm :think-outside-the-box: Can you link to your code?
**[Oksana Azarova](https://github.com/oksanashopify)** [2022-12-15 03:42PM UTC]
I’m currently in a process of creating new spin for it, decided to split a11y improvement in separate PR, so I will let you know as soon as it’s ready. Thank you for reaching out!:thank:
**[Oksana Azarova](https://github.com/oksanashopify)** [2022-12-15 04:53PM UTC]
@chloerice Ok, here is a [PR](https://github.com/Shopify/web/pull/80087), where I’m trying to resolve return focus popover to it’s activator. Url to spin attached in PR description.
Still doesn’t work for me. What am I missing?:thinking_face:
**[Chloe Rice](https://github.com/chloerice)** [2022-12-15 05:11PM UTC]
Thanks Oksana, I'll take a look :eyes: What page and feature should I navigate to to get to the HelpPopover?
**[Oksana Azarova](https://github.com/oksanashopify)** [2022-12-15 05:18PM UTC]
Good question! Sorry for not specifying it from the beginning :facepalm-w-lightskin:. I just posted all the steps in PR description. Please let me know if you would have any other questions. Thank you!:pray::slightly_smiling_face:
**[Chloe Rice](https://github.com/chloerice)** [2022-12-15 06:05PM UTC]
I'm having trouble figuring out how to enable catalogs in my spinstance, but my first hunch that I was going to test is removing the wrapper div from the activator and put the `ref` directly on the `button` element :fingers-crossed-bart:
**[Oksana Azarova](https://github.com/oksanashopify)** [2022-12-15 06:06PM UTC]
I just noticed if I remove the “price input” from the DOM focus returns to it activator :open_mouth:. Maybe there is something wrong with this section :thinking_face: [image.png](https://files.slack.com/files-pri/T017D49VC3F-F04G4Q92G3S/image.png)
**[Oksana Azarova](https://github.com/oksanashopify)** [2022-12-16 03:59PM UTC]
Hi @chloerice!
Just want to share great news that we managed to fix the issue.
It was a team work:blobhighfive:!
Thank you @rdott for great example with [LocationPicker.tsx](https://github.com/Shopify/web/pull/63970) - it gave us an idea to add `activatorRef` and set focus on activator when `onClose` [Popover](https://polaris.shopify.com/components/popover).
Thank you @tatianau for pair programming session! It helped us to find out that we have to add `preventFocusOnClose` to Popover in order to prevent focus moving to the next close interactive element instead of Popover activator.
Here is [PR](https://github.com/Shopify/web/pull/79894) with successful implementation
chloerice
commented
1 year ago
Hi team! We currently using Polaris Popover to show help text with link in this section (screenshot attached). The problem is that when navigate with Tab (and back: Shift + Tab), focus does not return to its activator. Works fine in sendbox, but not in our section I tried different scenarios with setting
preventFocusOnClose,autofocusTarget, but nothing helps. Maybe somebody has heard about similar issue and knows possible ways of troubleshooting. Thank you! image.png:thread: Slack Thread
Hi team! We currently using [Polaris Popover](https://polaris.shopify.com/components/popover) to show help text with link in this section (screenshot attached). The problem is that when navigate with Tab (and back: Shift + Tab), focus does not return to its activator. Works fine in [sendbox](https://codesandbox.io/s/kind-rosalind-47kkjb?file=/App.js), but not in [our section](https://admin.web.quantity-limits-popover.oksana-azarova.us.spin.dev/store/shop1/catalogs/1/editor/products/1) I tried different scenarios with setting `preventFocusOnClose` ,`autofocusTarget` , but nothing helps. Maybe somebody has heard about similar issue and knows possible ways of troubleshooting. Thank you! [image.png](https://files.slack.com/files-pri/T017D49VC3F-F04FA7MLYFL/image.png)
Working on solution, [suggested in this channel](https://shopify.slack.com/archives/C01H7LC0EEL/p1671061380203029)
Richard's solution looks good! I think that's the way to fix it
Did you have success with it?
Didn’t fixed my issue right away, so still working on implementation.
Hey Oksana, is your activator an interactive element (like a `
Hi @chloerice! it’s a `
Hmmm :think-outside-the-box: Can you link to your code?
I’m currently in a process of creating new spin for it, decided to split a11y improvement in separate PR, so I will let you know as soon as it’s ready. Thank you for reaching out!:thank:
@chloerice Ok, here is a [PR](https://github.com/Shopify/web/pull/80087), where I’m trying to resolve return focus popover to it’s activator. Url to spin attached in PR description. Still doesn’t work for me. What am I missing?:thinking_face:
Thanks Oksana, I'll take a look :eyes: What page and feature should I navigate to to get to the HelpPopover?
Good question! Sorry for not specifying it from the beginning :facepalm-w-lightskin:. I just posted all the steps in PR description. Please let me know if you would have any other questions. Thank you!:pray::slightly_smiling_face:
I'm having trouble figuring out how to enable catalogs in my spinstance, but my first hunch that I was going to test is removing the wrapper div from the activator and put the `ref` directly on the `button` element :fingers-crossed-bart:
I just noticed if I remove the “price input” from the DOM focus returns to it activator :open_mouth:. Maybe there is something wrong with this section :thinking_face: [image.png](https://files.slack.com/files-pri/T017D49VC3F-F04G4Q92G3S/image.png)
Hi @chloerice! Just want to share great news that we managed to fix the issue. It was a team work:blobhighfive:! Thank you @rdott for great example with [LocationPicker.tsx](https://github.com/Shopify/web/pull/63970) - it gave us an idea to add `activatorRef` and set focus on activator when `onClose` [Popover](https://polaris.shopify.com/components/popover). Thank you @tatianau for pair programming session! It helped us to find out that we have to add `preventFocusOnClose` to Popover in order to prevent focus moving to the next close interactive element instead of Popover activator. Here is [PR](https://github.com/Shopify/web/pull/79894) with successful implementation