Is it possible to nest elements with aria-hidden="true" and aria-hidden="false"?
For example:
<div aria-hidden="true">
some hidden content
<div aria-hidden="false">
some visible content
</div>
</div>
This seems not to work for me. I tested it with NVDA and its functionality to display a full list of links on the page. If I set aria hidden true on the body I could not manage to get any links even when I started to set aria hidden to false on some child elements. Currently it looks like I cannot overwrite the aria hidden state in a child element.
I know this might be a quite unusual approach but the problem itself is unusual as well. A huge light box which contains a whole site itself(no simple modal dialog to be short).
No, that is not possible.
You hide the element and its children.
As an example, when creating a modal window you hide everything but the modal, like this:
<div aria-hidden="true" id="page-wrap">
<main role="main">
<p>content</p>
</main>
</div>
<div aria-hidden="false" id="myModal" aria-labelledby="myModal-title">
<h1 id="myModal-title">Sign up!</h1>
...
</div>
This will then hide the #page-wrap and show the #myModal to assistive technologies
Related
I can see lots of answers for this but not quite the right solutions..
Essentially i'm displaying numerous emails in a thread (looks like iMessage a bit) on a page. The messages are looped within a repeated element, with the HTML email displayed inside it.
I have no control over the HTML in the email content as it could be from anywhere.. the problem is that the HTML in the email is inheriting CSS styling from the page style sheets.. this is making it all look weird..
I can't overrule the CSS with a more specific CSS, as there could be any classes or id's coming in the email that match those in the main style sheet..
I've tried adding all:initial to the wrapper div like this:
div.sentMsgBody *{
all: initial !important;
}
This however seems to override any styles that comes with the email and so looks really naff..
Anyone got any ideas how to display the email content with its own HTML without taking on the main styles?
Thanks!!
Addition:
I've been asked to show my code, though that's quite tricky...
there's loops of a certain div in the page like this:
<div id="page">
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
</div>
Of course each loop of this div could have any HTML at all as its showing emails...
eg:
<div id="page">
<div class="sentMsgBody">
<div class="Header">My Email</div>
<div class="Main">This is my email body</div>
<div class="Footer">Email Footer</div>
</div>
<div class="sentMsgBody"> ... ... </div>
<div class="sentMsgBody"> ... ... </div>
</div>
Here the Header and Footer etc may take css from the main page...
I thought about iFrames but they are messy, i don't know how big the content will be for each one, are a bugger with being responsive too, and there could be dozens that have to be created dynamically from the content of each div that is loaded by ajax from a handler.
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
I have a problem in my web application in the chat part with jQuery Mobile and cordova.
I decided to fixed the footer with an textaera and a button to send message. But when I touch the textarea to write a message my keybord doesn't show up. I guess it is hide :S
Any idea to fixe that?
Here is my code:
<div data-role="content" class="bg">
<div class="chat-liste">
<div class="chat-left">
</div>
<div class="chat-content">
</div>
<div class="chat-form" data-role="footer" data-position="fixed">
<textarea class="chat-form-text"></textarea><input type="submit" class="chat-form-submit send"/>
</div>
</div>
</div>
Thanks :)
Actually the keyboard is not html but a part of the system widgets so it's impossible to hide it behind a html element.
Be sure that no other invisible elements above the textarea are recieving / stealing it's touch event. Prerequisite is that your textarea can be touched.
Would need to see your css and code too to tell if it's a html problem or there is somewhere in your jq an event.preventDefault() on this element.
When it's html-problem. Try to give the textarea a higher z-index like this:
<textarea class="chat-form-text" style="z-index:10000;"></textarea>
I have a page where I have three panels...left panel,center panel,right panel...My question is this...I have a link in my center panel and that link takes to another page...But I want the new page to be displayed in the center panel with the condition that left and right panel should remain as such...I am able to display the 2nd page in center panel but I am not able to hold back the left and right panel...
My code:
<div id="wrapper">
<div id="centerPanel">
center panel
View Appeals
</div>
</div>
<div id="leftPanel">
leftpanel
</div>
<div id="rightPanel">
rightpanel
</div>
Here is one way of doing it, although it may not be what you're looking for.
I made a div for each page like so for the content:
<div id="pagewrap" style="">
<!---------------Home Page--------------->
<div id="Content1">
<object id="dHome" data="home.html" style="overflow:hidden;margin:5px;">
</object>
</div>
<!----------------Gallery Page--------------->
<div id="Content2">
<object id="dGallery" data="gallery.html">
</object>
</div>
</div>
and so on...
As you can see above, I used objects as my pages to load external html data.
I set the width of the wrapper - pagewrap to the sum of the widths of all the pages, and used Jquery to move the pages to the left or right, depending which button was clicked.
Here is the code when paging to the right:
$('#pagewrap').animate({'marginLeft' : "-=650px"},200);
and left:
$('#pagewrap').animate({'marginLeft' : "+=650px"},200);
The above 650px is the with of all my content pages.
Or you could just change the source file of the object!
Hope this helps
I have a page of things that looks like this (and yes, I have included the scriptaculous javascripts, because the toggle actually does work):
<html>
<div id="container">
<div id="thing1" class="thing" >
<p>Some visible stuff 1</p>More1
<div id="extra1" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
<div id="thing2" class="thing">
<p>Some visible stuff 2</p>More2
<div id="extra2" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
<!-- 96 more entities of class="thing" -->
<div id="thing99" class="thing">
<p>Some visible stuff 99</p>More99
<div id="extra99" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
</div>
</html>
When I click on the "More99" link at id="thing99" which is way down at the bottom of the page, , the div at id="extra99" appears as it should, but the page then the page automatically scrolls back to the top.
When I clck the "More1" link at the top, it stays focused at the top.
Is there anyway I can keep the page from scrolling back to the top and/or to refocus it back to where I just clicked? I don't want to scroll back down and find out which one I just made visible.
Try return false; after your Effect.toggle(); calls.
More99
This isn't the ideal way of handling this, but it should fix your immediate problem. Ideally, you would remove all of your Javascript from your HTML, and do away with all onclick attributes, handling everything from a remote block of Javascript.
Jonathan & Tatu started me on the right track. I tried "return false", and it worked some of the time.
With the "return false" concept in hand, I searched GOogle and stumbled on this page for hrefs and return false.
That "#" tag kept returning me to the top of the page. I tried href="" without the "return false", and it worked as desired, but it randomly reloaded the page as well.
The following solution gave me what I wanted consistently:
More99
Everything worked as desired, and no random page reloads.