We have Blocker component, which use TransitionGroup to trigger animations by adding/removing elements to the DOM. Animation speed is controlled with CSS. However, how long we keep Blocker in the DOM, is controlled by TransitionGroup. It's ok, as after animation is finished, we can keep a node in as long as needed - it's not visible anyway.
However, there are some issues:
PickerInput tests waits for Blocker to disappear from DOM, and both waitFor and TransitionGroup timeouts are 1000ms. This makes tests flaky. Just tweaking timeouts would work. However, in real life you can use Picker immediately after Blocker gets isEnabled=false. When got isEnabled=false, it immediately gets pointer-events: none, so you can click through it. Tests shouldn't wait for animation to finish either.
a18y-wise, we also want DOM state to reflect that Blocker is disabled.
Suggested solution
Stack overflow suggest to use aria-busy=true|false for this. Let's use it. This way aria-busy would reflect Blocker state in DOM, w/o any animation delays
Let's update our tests to use aria-busy to detect if loading is done. This would remove the need to wait for animation and TransitionGroup to complete.
Now
We have Blocker component, which use TransitionGroup to trigger animations by adding/removing elements to the DOM. Animation speed is controlled with CSS. However, how long we keep Blocker in the DOM, is controlled by TransitionGroup. It's ok, as after animation is finished, we can keep a node in as long as needed - it's not visible anyway.
However, there are some issues:
Suggested solution
Stack overflow suggest to use aria-busy=true|false for this. Let's use it. This way aria-busy would reflect Blocker state in DOM, w/o any animation delays
Let's update our tests to use aria-busy to detect if loading is done. This would remove the need to wait for animation and TransitionGroup to complete.
Let's also replace 'alert' role with 'presentation' or 'none'. The Blocker is a visual component, and doesn't add any semantic. Check that we have aria-busy role somewhere on the picker/table rows containers to indicate that they are loading. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role