Web Components are a concept used in modern web development to break a web application into small, more-easily manageable parts. A Web Component is a small, visual template created with the intention of re-using it. This will be a repository for maintaining all web components that I create.
This README.md will be updated with various notes and resources over time.
/* Android, Chrome, iOS, Safari */
-webkit-
-webkit-transition: all 0.30s ease-in-out;
/* Firefox */
-moz-
-moz-transition: all 0.30s ease-in-out;
Internet Explorer */
-ms-
-ms-transition: all 0.30s ease-in-out;
/* Opera */
-o-
-o-transition: all 0.30s ease-in-out;
Of interesting note is that keyboard accessibility can be improved/added through the addition of the tabindex attribute to an element that would otherwise not show the accessibility outline when receiving focus as do most form elements.
First and foremost, if we want to capture input from the keyboard, we’ll need to use elements that can accept the focus: primarily links (<a>) and form controls (<input>, <select>, <textarea> and <button>). [[18]][ref18]
But suppose we need to have other elements capture input/show focus from the keyboard - like a <div>?
I quickly thought about simply adding the tabindex attribute to an element and after some preliminary tests in FF2/Win and IE7/Win it seems that's all that is necessary to make an element focusable.
The tabindex value can allow for some interesting behaviour.
- If given a value of "-1", the element can't be tabbed to but focus can be given to the element programmatically (using element.focus()).
- If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document.
- Values greater than 0 create a priority level with 1 being the most important.
I tend to shy away from trying to declare any tabindex as the regular document flow should be predictive enough but if creating a JavaScript-enabled interface, there may be times where tying something to a link actually doesn't make the most sense and having an element be able to receive focus via the keyboard as well as from the mouse can only be a good thing. - ACCESSIBILIY! - Making Elements Focusable with Tabindex