I have been tasked with building a SPA that has some complex page transitions.
My biggest concern is that these transitions rely on elements expanding on the page to then become the full page (i.e. you click a blue button, the blue background expands to fill the whole page and then the content is displayed.)
Now this is where I am struggling to come up with an accessible solution. I thought about making the text within the original 'button' a link with padding (as the URL will update and the link is for no JavaScript fallback) and then replacing the content of the parent div (the blue background) with the new content.
The problem I have is that I am not sure what would be the best practice for accessibility from the perspective of letting a screen reader user know that a new page has loaded in. Using aria-live is a terrible idea, but with NVDA if I just replace the contents of the div it can have some strange behaviour.
Has anyone ever come across this before? For example this dribble nearly shows what I mean, you click an element and then it opens up into a new page with the content within the element.
For a 'normal' AJAX site when navigating I would simply replace the whole <main> with the new content, make the <h1> programatically focused with a tabindex="-1", update the page <title> and that works fine, but with this type of navigation I am wondering if the same approach is applicable.
I am thinking replacing everything within the <main> element except for the selected 'button' background (including the original link being removed once the new page has loaded) and then loading the content in and managing the focus as described would work, but I am not sure if there is an accepted pattern for this type of navigation as it is so unusual.
I am thinking replacing everything within the element except
for the selected 'button' background (including the original link
being removed once the new page has loaded) and then loading the
content in and managing the focus as described would work, but I am
not sure if there is an accepted pattern for this type of navigation
as it is so unusual
I think this is your best best. The whole visual expanding thing is just eye candy, so as long as it is there you should be able to do this behind the scenes. Make sure you test with screen readers.
Related
I've read many posts about this, but never found something satisfying and I wonder if perhaps new techniques have been developed since those posts.
Basically, I have a fixed navigation header on my site, and a search bar that will get nested and fixed just under it as users start scrolling down.
Most of my anchor/section links are located on different pages than where the user is getting re-directed to when clicking them (so, no "smooth scroll" is happening).
I cannot add padding or a class manually to each of these points because most of them are generated automatically...
Is there perhaps some jquery I could apply that would automatically show these anchor/sections point lower in the screen?
Help :)
I'm trying to handle background color properly in a dynamically generated property sheet in dynamically generated property pages in win32 api using MFC (though I expect my question is general, and not restricted to MFC, but since my code and examples use it, it's germane to my question anyway).
So we have a:
CPropertySheet
containing multiple
CPropertyPage
I generate the contents of any given page dynamically - from file resources using a custom dialog definition language - all irrelevant other than to say - a list of controls and their coordinates is created within a given page, and the page is resized to accommodate them. This logic is working beautifully.
However, what doesn't work is that the controls and background of each page draws using the dialog default color/brush.
I've tried a number of ways to attempt to force it to draw using the white color/brush that a hard-coded property sheet / page would.
There are two important pieces to this:
Page Background
Control (on the page) background
For #1, I've tried:
acquire the background brush from parent window class (it's dialog bkgrd) (same is true if I do this and ask the tab control)
change the property page to use WS_EX_TRANSPARENT (PreCreateWindow is not called by the framework when generating a page viz PropertySheet::AddPage)
For #2, I've tried:
overriding OnWndMsg / WM_CTLCOLORSTATIC to forward that request to (A) the parent (sheet), and (B) to the tab control (which is what wants the white in the first place).
However, anytime I use any of the above "ask for the background / forward the request" up the chain to either the sheet or the tab control - I get the dialog background color, never the white I'd expect.
Using Spy64, I can see that for a fully hardcoded property sheet / page - that the only discernable differences I can see is that the dialog window created in AddPage (or its moral equivalent) has WS_CHILD instead of mine which has WS_POPUP (the rest of the styles appear to be the same, such as WS_VISIBLE|DS_3DLOOK|DS_FIXEDSYS|DS_SETFONT|DS_CONTROL and WS_EX_CONTROLPARENT.
So, other than the WS_CHILD, I see no significant differences from what I'm creating and from another property sheet that works properly from a standard resource (i.e. hard coded).
I'm also flummoxed as to how this works normally anyway - since forwarding things like the ctrlcolor message doesn't respond correctly - and asking for the windows background colors similar doesn't - then how is it in a standard case the background colors of controls and pages comes out as white, and not dialog background?
Any ideas or help would be appreciated - I'm kind of running out of ideas...
When Visual Styles were added in Windows XP they really wanted to show off this new feature so they made the tab background a gradient (really a stretched image) instead of a single color and this caused problems in old applications that did custom drawing with the dialog brush as the background.
Because of this, only applications with a comctl32 v6 manifest got the new look but there was a problem; old propertysheet shell extensions would load in new applications (including Explorer) and things would look wrong.
To work around this they also require you (or your UI framework) to call EnableThemeDialogTexture(.., ETDT_ENABLETAB) to get the correct tab page look.
As if things are not tricky enough, there is a undocumented requirement that you also need a button or a static control on the page!
If you have custom controls they have to call DrawThemeParentBackground when you draw if they are partially transparent.
Turns out my old code had defined an ON_WM_ERASEBKGND handler - and removing that (and all of my above attempts) makes it work.
So simply doing NOTHING is the correct answer. D'oh!!!
I'm leaving my shame here in case someone else trips on this! [Whoops!]
(Still interested if anyone has deeper insight into how this mechanism works under the hood)
Anyone have some code to reorder a ng-repeat using drag and drop that does not require jQuery? (angularjs dependency only)
I've had good results with https://github.com/kamilkp/angular-sortable-view - it's brand new (first commit was last week!), but it's extremely easy to work with. You put an sv-root attribute on the element (probably a div) that's the ancestor of the ng-repeat you want to be able to reorder. Then you put an sv-element attribute on whichever element you're ng-repeating, and drag and drop is handled for you.
You can also optionally put an sv-handle attribute on some element (probably an image, or a Font Awesome icon) inside your ng-repeat, in which case that element gets used as the drag handle. You can also optionally set up "placeholders" (something that shows up as you drag to show where the dragged element will be positioned if you drop it right now) with an sv-placeholder attribute on whatever element is your placeholder. And finally, you can optionally specify an sv-helper attribute on some element to make that element the one that gets dragged. (So if the thing you want the user to see while dragging needs to be different from the thing they see inside the list, that's how you do it).
Oh, and both the sv-placeholder and sv-helper attributes can go either on elements outside the ng-repeat, in which case the same element will be used for every drag situation (use this, for example, if you want a blank gray box as a placeholder the way Trello does it when you drag cards around) -- or those attributes can go on elements inside the ng-repeat, in which case you have access to the local scope of that particular ng-repeat element (use this, for example, if you want your placeholder to be "the text of what I'm dragging around, with opacity 50%, and a dashed border around it").
The demos linked from the https://github.com/kamilkp/angular-sortable-view repo demostrate the usage pretty well, so rather than say more about it I'll just let you poke around in the demos. My personal experience so far has been very favorable.
Oh, and it has no dependencies other than Angular. No jQuery or anything else required.
I'm experimenting with creating a metro style app with Visual Studio 2012, I am not the most experienced designer but one thing with my applications is confusing me.
I have been working with 'basic pages' instead of blank ones for the different pages in my application for design consistency, however it seems that these 'basic pages' have a strange behaviour. Every item I place on the page (buttons, text boxes, etc) will all slide in one by one when the page opens. For example if I run the application and navigate to a page with 10 buttons, it will do a brief animation where each button will slide in from the right side to the left side. When dealing with a large number of items on one page this can take a lot of time as each item slides in seperatley.
Looking at the properties for each item I have been able to change the direction it slides in while loading the page by changing the flow direction. Also with a bit of research I am thinking it could potentially be due to either the metro style 'enterPage' or 'enterContent' animations, though I can not be certain.
I have tried to experiment and figure this out, and search to find out what causes this so I can modify it (Ideally I would like to just group items together to slide in with each other) however it's kind of a difficult thing to search with vague words, so I'm asking here.
What is causing this and how might I go about modifying it?
EnterPage shouldn't be sequencing the animations. They do offset some of the animations of a number of elements, but it shouldn't be each one sequentially.
Are you using WinJS navigation?
Well after a bit of experimentation I figured out that putting all my page content inside a grid made them all come in at once like I wanted. I probably should have tried that earlier but everything was already inside an outer grid for the page, so I thought that woulda handled it.
I don't quite understand it fully, but that works for now.
I have a sliding carousel of items, each of which includes its own like button. I want the like buttons to have comments; that is, when the user clicks Like, he should be presented with a prompt to leave a comment (http://developers.facebook.com/blog/post/397/). I'm starting to doubt that these goals are compatible and would like to hear if anyone has already achieved it.
The comments on the Like buttons are wider than the items in the carousel, and correctly overflow onto other carousel items. However, some of these items are outside the clipping box, since the carousel items are necessarily inside a div with overflow: hidden (otherwise we wouldn't achieve the effect of the items scrolling into existence upon paging). Because of this, if I click Like on the rightmost item currently visible, the comments prompt that appears will be partially outside the clipping box and thus partially visible.
It appears to me the only possible hope of allowing the comments prompt to overflow the carousel container is to place the prompt outside the container in the dom. This way, assuming we can visually position the prompt next to its Like button where it belongs, it's no longer constrained by the container. This seems within possible, since at the time of this writing the comment prompt is implemented as a separate iframe from the button itself; i.e., this XFBML:
<fb:like width="450"></fb:like>
yields (approximately) this HTML:
<iframe src="facebook.com/like_button.php"></iframe>
<iframe src="facebook.com/comments_widget.php"></iframe>
But if I try to move the comments iframe in the dom, it instantly and permanently becomes empty. Even if I could find a way to detach certain events and prevent this, it shows that an intricate solution is called for, and one which Facebook can break at any time in the future with changes to their implementation. Thus, I can't move the comments in the dom, and thus, the prompt is always in danger of being clipped. Facebook says this on the subject:
If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting setting the overflow property to a value other than hidden, such as visible, scroll, or auto.
Clearly in the case of a carousel it's not possible to remove overflow: hidden. Has anyone found a way around this, or should I give up and spend my time elsewhere?
Thanks