I'm making a React website where I display popups using createPortal and my popups have buttons that take you to different popups (e.g. there's one popup where a user can confirm a session, and when they click the confirm button, another popup comes up saying their session has been confirmed). I want to create an animation where the text from the first popup slides out and the text from the second popup slides in when the button is clicked, but I can't find any suitable ways of doing so without glitches or bugs. I tried Framer Motion, but there was an issue where the components would only animate when entering the DOM, not when leaving.
Here's my component structure:
<CustomPortal> // made with createPortal
<Modal>
<ConfirmSession /> // this should slide out
<SessionConfirmed /> // this should slide in
</Modal>
</CustomPortal>
Any ideas on how to accomplish this?
Related
I want to create a popup next to some data that contains a few input fields. Let's pretend that the we have the following document structure
<input name="before-the-data" type="text />
<div id="the-data"><!-- presents some data --></div>
<input name="after-the-data" type="text />
When you tab forward from before-the-data the popover should open and focus should go to the first input in this popover. This popover is appended to the body kinda of like Modal from material-ui so that it lies above the rest of the content. Similarly the popover should open when you tab backwards from after-the-data.
The popover should behave as if it were inside #the-data for navigation purposes but the actual position would be at the end of <body> for presentation purposes.
To achieve this effect, I set tabindex="0" on #the-data and trigger opening the modal and shift focus into it. This works fine so far.
Now for the question: How do I best create the following effect?
You should be able to navigate back out of the modal. My idea was this: When focus shifts from it or the user clicks outside the modal, we close it and restore focus to the element that had focus before it opened up. This can be done with a simple onblur handler and a onclick on a backplane. To support tabbing, the resulting modal looks like this:
<div id="backplane" onclick="closeAndRestoreFocus()"
onfocusout="checkCloseAndRestoreFocus()">
<div id="beforecanary" onfocus="shiftFocusBefore()" tabindex="0"/>
<!-- popover content -->
<div id="aftercanary" onfocus="shiftFocusAfter()" tabindex="0"/>
</div>
You can see that I added two divs that you can tab to beforecanary and aftercanary. When they get focused they shift focus to before-the-data and after-the-data respectively, to simulate as if the popover was actually inside #the-data.
At this point, you hopefully have understood what I am trying to create. Thus, the question: How good is this approach in general with respect to accessibility and how can I make sure I follow best practices of WAI-ARIA?
we close it and restore focus to the element that had focus before it opened up
That might be considered a tab trap, 2.1.2 No Keyboard Trap. Isn't the element that had focus before the popup the #the-data? So if I tab from before-the-data to #the-data, the popup will open. If I press esc to close the popup (you didn't mention that esc would close the popup but it should), the focus goes back to #the-data, which will automatically open the popup again, won't it? (Because onfocus() ran again.)
If I just tab through the entire process, I think it would work. It's just the dismissing of the popup that causes the problem. Tabbing straight through everything would move focus from before-the-data to #the-data to the elements in the popup to after-the-data then to the rest of the page, right?
When tabbing backwards, from after-the-data to #the-data, is the focus moved into the last element in the popup? Since I'm tabbing backwards, it needs to be on the last item so that I can continue tabbing backwards through the popup and then to before-the-data.
The popover should behave as if it were inside #the-data for navigation purposes but the actual position would be at the end of <body> for presentation purposes.
If the popup is in the DOM at the end, that would not allow a natural tab order. You can certainly put it there but then you have to manage the tab order. It would be much simpler if the popup was truly part of #the-data. Then the browser handles the tab order naturally.
You also have to be careful with automatically opening a popup but it might be a violation of 3.2.1 On Focus. See "Example of a Failure: A help dialog". It sort of describes what you are doing but is a little different. In the failure example, focus is moving to an input field, and the popup opens automatically and the focus moves from the input to the popup. Your case is a little different because you move the focus off the input first (or before-the-data) and then the popup displays, which would not violate 3.2.1. I just wanted to point this out in case you change your interaction model.
So in summary, your current behavior is kind of like a skip link. Skip links are often implemented as "hidden" links that only become visible when you tab to them and allow you to jump to a location on the page. The fact that they become visible upon focus is how your popup works (since it too becomes visible when it receives focus). The difference is that skip links do not dismiss if you press esc. They do dismiss if you click outside of them. I think that's the behavior you're trying to mimic. If you ignore my comment earlier that esc should dismiss your popup, then you'll be ok. I only had that comment because it sounded like your popup was like a modal dialog.
is it possible dragging a text along with cursor while mouse is clicked on angular2? I'm designing a web "painter" app and want to be able to click on a textbox and drag it around the page as long as the mouse is still pressed, like you could do in any simple editing app.
snippets of code or links to websites that have examples would be helpful as I'm a visual learner! Assume I know my way around angular 2 (which I like to believe I do, to an extent)
You dont need angular for this you can do it simply in HTML5 with the 'draggable' property:
<div draggable>My draggable text</div>
In my metro style app (windows 8) I have created an page overlay and a flyout displaying an message. When the user clicks on the page the flyout message goes to hidden. But I want flyout to remain even when the user clicks on the overlay page. I am using HTML5 and WinJS.
Is there anyway I can achieve the above scenario using someother control or can I prevent the page to stop reacting to events when the user taps/clicks on the screen.
This is not really supported -- the Flyout itself doesn't have the concept of being persistent/sticky/modal. If you look at the code in base.js, you'll see that it doesn't expose any code to leverage the inbuilt sticky behavior that is used in the appbar (which is kinda of flyout, it turns out.
There are a couple things you can do:
Pass "_sticky: true" to the constructor of the flyout. e.g <div data-win-control="WinJS.UI.Flyout" data-win-options="{ _sticky: true}">
Attach a click handler to the top of the document, and if it's on the click eating div that the flyout creates, cancel the event
Create your own UI by simply adding a new div to the body, and absolute positioning it.
I have a very simple Chrome extension which produces a bubble pop-out in the top-right of the screen. In the bubble I present the mobile version of our site.
Currently when the extension icon is clicked the bubble pops out and the mobile homepage loads. The user can click around within the bubble and use the mobile site as they wish.
However, once the user clicks outside the bubble is closes. Clicking again repeats the above process.
I wondered if there was a way to make the bubble pop-up/out persistent? So, instead of it disappearing when the user clicks elsewhere it stays loaded until the user clicks the extension icon again. This way the button acts as an on/off switch rather than a single event trigger.
Is this possible, and would someone mind directing me to the code which would help me do this?
As stated in the FAQs, this is not possible. However, chrome.windows.create may meet your needs.
I am developing a Chrome extension with browser action. I want to make some action on clicking on browser action icon (it is easy, not a problem), and show popup if user clicks on down arrow at the right side of the icon (that is a problem). So, we will receive a functionality similar to the firefox toolbarbutton from XUL. Is it possible to do such thing with Google Chrome?
Just want to make button, like that:
button
If it is pressed on the main part - it will do something, if on the right "drop-down" part - it will show quick settings page.
But I see only single button possibility.
The entire browserAction button works as a single button. There is no way to detect if a specific area was clicked. The best you can do is either have multiple extensions each having their own button for different actions or have options in the popup that the user selects with a second click.