So I have this code:
<div style="top: 143.4px; left: 345.85px; display: block;" class="w size-200" tabindex="1" id="sitetour-wrapper">
<span id="sitetour-pointer"></span>
<div class="content-wrapper">
<span id="sitetour-header" class="sitetour-header">Test Text</span>
<div id="sitetour-content">
Why this is not being read
<div id="demo-bb" class="demo-bg">
<div></div>
</div>
</div>
</div>
<div id="sitetour-footer">
<button style="display: block;" type="button" title="back" id="sitetour-back-btn" class="back-btn btn-link">Back</button>
<button style="display: none;" type="button" title="next" id="sitetour-next-btn" class="submit-btn">Next</button>
<button type="button" title="close" class="btn-link cancel-btn" id="sitetour-close-btn">Close</button>
</div>
</div>
And I want it so that when I focus on #sitetour-header the screen reader will read the contents of the text accordingly.... but this code doesn't read it properly when using NVDA + Firefox...what did I do wrong?
I've tried to reproduce this issue in codepen, jsfiddle and using static html and all three are reading the text using firefox and NVDA. If the text is not being read, it's likely due to interference from other aspects of the page. If you're able to say how it's not being read properly that could also help figure out what's going on.
Related
I have this html
<body aurelia-app="main">
<section class="section is-small">
<nav-bar class="au-target" au-target-id="5">
<div class="container">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item au-target" route-href="route: home" au-target-id="1" href="#/">
<span class="icon is-medium">
<i class="fas fa-lg fa-home" aria-hidden="true"></i>
</span>
</a>
<a role="button" click.delegate="burgerClicked()" aria-label="menu" aria-expanded="false" data-target="myNavBar" class="au-target navbar-burger burger" au-target-id="2">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="myNavBar" class="au-target navbar-menu" au-target-id="3">
<div class="navbar-start">
<div class="navbar-item">
<a route-href="route: games" class="au-target" au-target-id="4" href="#/games">My Games</a>
</div>
</div>
</div>
</nav>
</div>
</nav-bar>
<router-view name="main" class="container au-target" au-target-id="6">
<available-games games.bind="games" class="au-target" au-target-id="11" bindable="games">
<div class="columns">
<ul class="column level">
<li class="level-item">
<game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
<button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
Warhammer 40k
</button>
</game-button>
</li><li class="level-item">
<game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
<button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
Age of Sigmar
</button>
</game-button>
</li><!--anchor-->
</ul>
</div>
</available-games>
</router-view>
</section>
</body>
it looks fine, until I expand it all the way, and then there is no space (height wise) between the full width buttons. I presume, I'm misunderstanding something about how I should be using bulma.
good
bad
note: this is the extent of my scss
#import "~bulma";
#import "~#fortawesome/fontawesome-free/scss/fontawesome.scss";
$fa-font-path: "~#fortawesome/fontawesome-free/webfonts";
#import "~#fortawesome/fontawesome-free/scss/regular.scss";
#import "~#fortawesome/fontawesome-free/scss/solid.scss";
First off, a tip: fix formatting a bit to make it more consistent to readers - more clarity to the HTML hierarchy.
Possible steps:
1) It looks like you might need some padding between each <button> element inside some <style> tags or in your scss file that target the specific class attribute/element you need.
2) I'm confused about your <game-button> element. Is it a custom element you created? If it's not, see the MDN Web Docs for examples of how to create custom HMTL elements if you need it.
3) If <game-button> is not a custom element you created, see Bulma's documentation for buttons because Bulma only requires a <button> element to work (and spacing wouldn't be an issue).
4) Check out this GitHub post regarding spacing between buttons. Although their implementation is different, you may still need to wrap your buttons in a <div class="buttons"></div> element. If there are issues after with inconsistent vertical alignment, I'd suggest using CSS display: flex;, align-items: center, and justify-content: center for centered alignment.
I am posting the code. In the line <div class='qrcode-value'></div> it will scan the qr code and I want to make it as link so that it will redirect to the other website once clicking on it. Instead of copy and paste.
<div id="content-overlay" style='display: none'>
<div class='qrcode-value'>
</div>
</div>
<a href="http://google.com">
<div class='qrcode-value'>
anything
</div>
</a>
fiddle https://jsfiddle.net/athulmathew/r73pn4w8/2/
You can use JavaScript to do this.
<div id="content-overlay" style='display: none'>
<div class='qrcode-value' onclick="location.href = 'https://stackoverflow.com/questions/56946816/link-to-same-page-using-div-class';">
</div>
</div>
Read more about onclick event here.
I have the following code:
#foreach(var data in Model.test){
<div style="margin: 3% 0 3% 2%;">
<button type="button"
class="btn btn-warning"
style="display:block; width:40%;overflow-wrap:normal;white-space:normal;padding:.5%;"
data-toggle="collapse" data-target="##data.option">
#data.Name
</button>
<div id="#data.option" class="collapse" style="width:40%;float:right;white-space:normal; overflow:scroll;">
<br />
<div>
<a>
Title: #data.Name<br />
#foreach (var item in data.Documents)
{
<p>Related Document: #item.Name</p>
}
</a>
</div>
</div>
</div>
}
When I tried general example from bootstrap site it works fine.. but when I plug in the values etc I want it fails.. what am I missing? This is in a view of an MVC web app.
I changed the id to be an incremental counter.. so now it works. As pointed out I may have had a duplicate somewhere there.
There were spaces and special chars which was causing this issue. After removing them all it worked.
I'm very new to CSS and HTML and I'm facing a very strange issue here, I have text area in my html as below.
<div class="ContentBox BPMSectionBody LastContentBox noHeader" id="div_3_1_1_2_11_1_1_1_1_1_1_10_1" data-view-managed="false">
<div class="Text_Area fullWidthTextArea CoachView CoachView_hidden CoachView_show" id="div_3_1_1_2_11_1_1_1_1_1_1_10_1_1" data-eventid="" data-viewid="Text_Area8" data-config="config99" data-bindingtype="String" data-binding="local.userAction.comments"
data-type="com.ibm.bpm.coach.Snapshot_7a0c03cc_ccef_4582_a1bc_7ccc8e9be488.Text_Area">
<div class="textLabel">
<label class="text controlLabel" id="div_3_1_1_2_11_1_1_1_1_1_1_10_1_1_label">Enter Cancellation Comments</label>
<div class="coachValidationDiv">
<img class="coachValidationImg smallImg CoachView_hidden" role="alert" alt="Error" src="/teamworks/webasset/2064.7a0c03cc-ccef-4582-a1bc-7ccc8e9be488/W/Error_icon_24x24.png">
<span class="coachValidationText" style="visibility: hidden;">!</span>
</div>
</div>
<textarea tabindex="0" class="dijitTextBox dijitTextArea dijitExpandingTextArea BPMTextAreaFont" id="dijit_form_Textarea_16" aria-labelledby="div_3_1_1_2_11_1_1_1_1_1_1_10_1_1_label" style="-ms-overflow-x: auto; -ms-overflow-y: hidden; box-sizing: border-box;"
rows="1" data-dojo-attach-point="focusNode,containerNode,textbox" widgetId="dijit_form_Textarea_16" autocomplete="off" value=""></textarea>
</div>
</div>
And a button as below :
<div class="Button pageFlowButton CoachView CoachView_show" id="div_3_1_1_2_12_1_2" data-eventid="boundaryEvent_17" data-viewid="Button10" data-config="config83" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_7a0c03cc_ccef_4582_a1bc_7ccc8e9be488.Button">
<button class="BPMButton BPMButtonBorder" type="button">Continue With Selected Action</button>
</div>
when I start typing in textarea and having my cursor still in the textarea and i click on button for the first time instead of action being taken, text area gets focused.
When I click button second time it works fine.
Can any body please help,what can be the possible reason here??
In case you are using jQuery, I guess you should use:
$('.Text_Area').click(function(noFocus){
noFocus.preventDefault();
});
I'm having problem with IE 6 (what a surprise : D)
On this site, in the content, I cannot click on the first few links. But after a few items, the links are working fine.
This problem appears if I load a page with ajax from the menu.
I couldn't figure out the problem, has anybody seen something like this before?
The HTML code is:
<div id="cont" style="display: block;">
<div class="localHeader">
<span> Szállás > Magánszállás </span>
</div>
<div class="subList">
<div class="productContainer">
<div class="img">
<img style="width: 200px;" src="/up/21/480_98_szarka2_255.jpg">
</div>
<div class="text">
<div class="productName">
<a title="Szarka család" href="/cats/showItem/21" rel="history"> Szarka család </a>
</div>
<div class="productDatas">
kato55#freemail.hu
<br>
<a title="Szarka család" href=""></a>
<br>
+36 84 314 062
</div>
<div class="productText"></div>
<a title="Szarka család" href="/cats/showItem/21" rel="history" class="moreButton"> Részletek </a>
</div>
</div>
</div>
</div>
Of course the .productContainer is repeating in the .subList.
Thanks.
Make sure that you have explicitly set overflow:auto on .productContainer. If that doesn't work, try Googling "clearfix" and see if that doesn't fix your problem.
You should ensure that your HTML validates against the DocType you're using, at the moment it doesn't and this can effect how browsers render parts of the page.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbalatonnet.com%2Fcats%2FlstSubCat%2F13