Hello I ask pretty much a similar question yesterday and I don't know why it behaves like that at least for me
<label>Upload songs/images
<label for="song" class="button small-12 hollow">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</label>
And when I try attaching a plug-in (jQuery plugin) to that input element I'm asking for help is because I would really like to use it thanks and I have asked everywhere and tried searching online but no luck.
Was trying to use this with button https://www.fyneworks.com/jquery/multifile/
Any suggestions are welcome.
Full answer available in response to your other question; in short, the label needs to wrap around the file input control, and remove the label's for attribute.
Related
I just upgraded my Ember addon from version 3.0 to version 3.8, and I get this warning now:
Interaction added to non-interactive element no-invalid-interactive
An example of this is something like:
<div class="some-class" onclick={{action "selectDate" "today"}}>
<div> more content </div>
</div>
When you click the action, it should take you to a new route.
What are my options to fix it the right way, so that it is accessible?
The solution here depends on what the action should do.
Refactoring an action that triggers a transition
Since this action takes the user to a new route, it should be a link element, <a> and not a button. This gives assistive technology/screen reader users a clue that interacting will take them somewhere new in the app.
This can be refactored to a link-to in Ember, which will wrap the content in <a>:
{{#link-to someRoute}}
<div> more content </div>
{{/link-to}}
someRoute could be a computed property if it needs to be informed by multiple pieces of data. Otherwise, it could be a string.
Refactoring an interaction that keeps you on the same page
In cases where the action does not take you to a different page, it may be appropriate to use a <button>. An example of this would be a button that expands a collapsible container or toggles a setting. However, the w3 validator tells us that you can't put divs inside of buttons. You can use Phrasing Content that is non-interactive, such as <span>.
<button class="some-class" onclick={{action "toggleSomething"}}>
<span> more content </span>
</button>
Learn More
To catch more accessibility problems in an app, try out ember-a11y-testing which audits your app for problems and gives you a report of how to fix them.
This question was answered as part of "May I Ask a Question" Season 2 Episode 3. If you would like to see us discuss this answer in full you can check out the video here: https://youtu.be/nQsG1zjl8H4
I already searched the forum for this (for example: HTML/CSS: Foundation stylesheet wont link) , but there was no answer which helped for my case.
I downloaded the current version of Foundation here:
https://foundation.zurb.com/sites/download.html/
Then I put it into my project folder and made a link to it inside my index.html. The link looks like this:
<link rel="stylesheet" href="Foundation/css/foundation.css">
Other links to external sources worked.
So I tried out the implementation and copypasted some code from foundations examples, this one:
<div class="card-info info">
<div class="card-info-label">
<div class="card-info-label-text">
FYI
</div>
</div>
<div class="card-info-content">
<h3 class="lead">Chappie</h3>
<p>In the near future, crime is patrolled by a mechanized police
force. When one police droid, Chappie, is stolen and given new
programming, he becomes the first robot with the ability to think
and feel for himself.</p>
</div>
</div>
However, nothing happens. I just get the strings outputted without any styling, so I guess that the link doesnt work.
My site is running on angular, could this pose an issue? And if so, why does the other link work but this one not?
For building blocks to work you have to copy the SCSS / CSS content from the bottom, which you need additionally to the foundation.css file.
So I want to be able to do this common suggestion functionality in ionic 2:
Here is a starting point of reference. Pretty basic.
<ion-content padding>
<form novalidate>
<ion-item>
<ion-label fixed>Location</ion-label>
<ion-input required type="text"></ion-input>
</ion-item>
</form novalidate>
</ion-content padding>
I can rig the input to googles AutoComplete box. However, since I cannot force a selection in that provided box, I cannot work with it. So this is not an option in my case. Apart from that one problem, everything would work as expected.
I can't use a SearchBar here. It just donsn't fit into the form properly. I can't have a Label and a SearchBar. The Searchbar just vanishes.
I can't put a List inside an Item. So I can't add a list under the Input.
I can revisit 3, but put the list under the Item. This isn't really what I want to do though. The List is connected to the Input Moving it outside just creates new problems with how the form behaves unless there is a way to make it float?
Does anyone have any alternative techniques that I could try? Am I missing something obvious here?
We are writing test cases for WPF application. Inside WPF application we are opening a web browser window (internet explorer) and trying to find input element.
We installed 'TestStack.White.Uia3.0.13.3' package for finding elements inside the browser.
We able to find button element which is rendered inside HTML page like <button class="accbtn" id="SignIn">User SignIn</button>
to find this element we written code like window.Get<Button>(SearchCriteria.ByAutomationId("SignIn").AndOfFramework(WindowsFramework.InternetExplorer));
In a similar way we are trying to find textbox. Which is rendered on html page like <input id="userid" type="email" name="login" value="">
to find this element we written code like var textbox = window.Get<TextBox>(SearchCriteria.ByAutomationId("userid").AndOfFramework(WindowsFramework.InternetExplorer))
But it is not finding element from the page. I see difference like the rendered html have type='email' instead of type='text' but I thought it should find.
Any suggestions?
I fixed this issue using AutomationElement of a window. There is a like https://msdn.microsoft.com/en-us/library/system.windows.automation.automationelement.findfirst(v=vs.110).aspx which describes how to get automationelement.
After I got automationelement followed valuepattern to insert value into textbox
I'm new in Ember.
As I know, the Ember is consist of [.js/.hbs(handlebars)].
when I search the component in the google, I got 2 kinds of source.
1st is like 'HTML'
<input type="checkbox" class="btn btn-success active" />CheckBox01<br />
and 2nd is like more 'Ember'.
{{input type="checkbox" checked=true}}CheckBox02
but I think these are same.. so I don't select what I use.
Frankly I want to follow 2nd style, but when I try it('https://www.npmjs.com/package/ember-cli-toggle'), I got failed.
so I just use 1st style these days. and It is more easy to me because I used to handle HTML.
Anyway, the question is what are the different between Ember Style and HTML Style.
Thanks.
Value binding is the main difference. You can as well do dynamic value binding and since they are handlebars, you get the sophistication of many more helpers.
Please read Ember documentation here, if you have not so.
https://guides.emberjs.com/v2.10.0/templates/input-helpers/
Thanks