I'm using Select2 version 3.4.8 and have recently noticed that the code is adding a title attribute to each form control in my page, using the text of the associate label for the title. I assume the Select2 developers meant this as an accessibility improvement, but it is a dubious choice, as there already is an associated label.
I am looking for a way to disable this without patching select2.js directly. I've looked through the documentation and couldn't find anything. Is there a way to do this, or do I either have to patch select2.js (perhaps commenting out line 692) or write a few lines of script to remove title attributes after they've been added to .select2-container divs? (Or is this fixed in version 3.5.0?)
When loading the page add the following script:
$(".select2-selection__rendered").removeAttr('title');
This will remove the title.
The title attribute here is useless, but also harmless. It gets applied to an offscreen version of the element that has tabindex="-1". An element with tabindex="-1" cannot receive keyboard focus by default, and this will never be announced by assistive tech (unless explicitly given focus with javascript).
Only the associated label will be announced. I've verified this behavior with VoiceOver/Chrome.
Related
Is it possible to set the validation error color on form fields manually? I couldn't really figure out how it was doing the validation on their site. Seems like the browser is doing it automatically based on the type attribute. But what CSS would I need to attach to trigger that state? I need to do a custom validation on a text field and the one that browser does automatically is not enough.
As I already wrote as a comment.
You just need to add the invalid class to your element.
Next time you could use the inspect element tool which is built-in in Chrome.
On the sign up page for Tumblr, it has three boxes, one for password, one for email, and one for your url. What interests me is the URL bit. Whatever you type is followed by .tumblr.com. You can't put the cursor after it or highlight it or delete it. How does it do that?
I check the source and it has the attribute data-ghostwriter=".tumblr.com". I didn't recognize it, so I googled it, and still nothing. I'm assuming it's a custom attribute, even though that seems like something that HTML would have rules against, but I can't find anything about it in the linked javascript files.
So, two questions. How do they do it, and can you use custom HTML attributes?
edit: So html5 allows data- custom attributes and using jsbeautifier, the code their inputs is:
http://pastebin.com/b5Yd51Mi
How does this work though, I'm still a bit confused.
The "data-" attributes are explicitly allowed in HTML5. Anything can follow "data-" (well, anything within bounds of some reasonable syntactic rules for HTML attribute names). Generally you'd access the values with the "getAttribute()" method on HTML element nodes.
Now, while all that's true, it's a little fishy that tumblr is serving up those pages with an XHTML doctype :-)
This older SO question describes how the effect is done. They position a translucent box right over the input field. When you start typing, they make the box visible and fill it with two <span> elements: the first, with a copy of what you've typed, styled to be dark like text in the real input field, and the second, with the static ".tumblr.com" suffix, and styled to be light grey and "ghosty".
I'm sure I can't be the first person to have this problem, but I haven't had any luck finding the solution.
I'm using Shadowbox in its simplest form; just doing an image popup with a link like
Click here to view the image.
This works fine, but has one very odd side effect: When I click the link, all of the select inputs (i.e. drop-down boxes) of the form on my page disappear. A little snooping with Firebug reveals that the CSS is being modified to give the <select> tags the property visibility: hidden. When the image is dismissed, the inputs reappear.
Not surprisingly, this happens consistently across browsers.
Since the inputs all reappear, I could probably just leave things as they are. However, if (for example) the image can't be loaded, and the script can't display it, the inputs stay invisible. Also, it looks strange and it's driving me batty. :D
Other factors that may or may not be relevant:
I have done very little with Shadowbox in the past and could very well be missing something embarrassingly obvious.
My page and its form are generated by CakePHP.
The page uses jQuery, and Shadowbox is using the jQuery adapter.
The vanishing inputs do not have class attributes. They do have id attributes that are generated by CakePHP, but these names are very specific to my application and very unlikely to cause any CSS collisions.
As far as I can tell, all of the select inputs vanish, and no other element, input or otherwise, on the page is affected at all. (Even the labels associated with the inputs are unaffected.)
Versions: Shadowbox 3.0.3, jQuery 1.4.2, CakePHP 1.3
This is a semi-bug in shadowbox, most likely. The select tags are being hidden because in some versions of IE, they are rendered using windows native controls, and thus always appear "above" any other element with a z-index. This obviously is a problem for ShadowBox, so the solution is to hide them while showing the box. Shadowbox should clearly do this only for troublesome browsers, but I think they're taking a more generic approach of always hiding them.
I'm trying to style my select box, I assume I need some type of javascript method.
I'm using rails - and sticking with prototype/scriptactulous.
Does anyone know of any solutions?
EDIT:
CSS doesn't do nearly what I'm trying to accomplish:
alt text http://img16.imageshack.us/img16/1373/dropdownk.png
I wrote a prototype select box control today. It allows styling everything- the select input box, the button, the dropdown box(where options are shown), the scrollbar and its buttons, the options, adding images to options. The class can replace select inputs automatically just by calling the script if select controls have class="replacemeselect" or be called manually. There are a bunch of customization options and you can have multiple styles of selects on a page if you need it. Unlike IPS this class handles keyboard events and has a scrollbar.
You may look at the demo: http://awsumlabs.com/selectreplace and use the library if you like it.
For styling select boxes you actually need js. In CSS you can style everything, but the button. The problem is that the button is os dependent and is not controlled by the browser. So maybe the man asks the right question. I'm searching for a protoype/script.aculo.us solution too. I use these frameworks and I don't want to change to mootools ot jquery.
In fact I found an interesting prototype project- IPS. http://yura.thinkweb2.com/playground/in-place-select/
There are also select multiple controls(I need select for one element only now so maybe I'll stick to ips). livepipe.net/control/selectmultiple is one of them.
I'm doing my own Ajax thing with dropdowns. I've positioned an input over a select tag. When stuff is typed into input it collects from the database and populates the select menu. Problem is its not noticeable. Is there a way to make the select menu open as if a user has clicked on it?
Nope, you're going to have to use something like a DIV with overflow: auto to emulate the behavior of an opened select.
The HTML5 <datalist> element would help out here, but since there are only a few browsers that support it at the moment, you will have to rely on a JS implementation.
The following was the least buggy implementation I could find from a simple Google search
http://dhtmlx.com/docs/products/dhtmlxCombo/index.shtml. It supports Ajax as well as up/down arrow keys.
StackOverflow also uses it's own implementation of auto-complete when you start typing tags, maybe you can get some ideas from looking at the source code?