ember-self-focused
Helps make a ember (single page) application more friendly to screen readers.
The screen reader reads out the content of a web page on load or page refresh. In Single Page Application (SPA) there is no page refresh after the initial page load, the UI gets updated without page refresh, which makes it difficult for a screen reader user to be aware of the UI change. However, if the container of the dynamic content can be focused, the screen reader will start reading out the content of the focused container.
Focusing the content of the dynamic container can be a tedious and repeated job.
For ember applications, this addon solves the problem.
Installation
ember install ember-self-focused
Usage
Add the self-focused
component to all the desired templates/component corresponding to the routes.
{{#self-focused}}
<!-- html block to be yielded -->
{{/self-focused}}
if the html block to be yielded
is a component and accepting attributes to act upon, the same attribute needs to be passed to the self-focus
component.
{{#self-focused foo=bar}}
<!-- {{custom-component foo=bar}} -->
{{/self-focused}}
Since the div will be focused, it will have a focus outline/highlight, if that is not desired, please add the following styles:
.self-focused:focus {
outline: none
}
Probably also add the following or similar styles:
// following will serve as a visual hint for currently active link to the sighted users
a.active {
background: #000000;
color: #ffffff;
}
// following will serve as a visual hint for currently active link to the sighted users
a.active after {
content: 'Currently active link.';
font-size: 0;
}
Implementation overview
-
self-focused
component- on initialization invokes
updateIsFirstRender
method of thefocus-manager
service. - on
render
invokes thesetNodeToBeFocused
method of thefocus-manager
service, passing the self HTML node as the argument.
- on initialization invokes
-
focus-manager
service carries out the functionality of focusing the desired node.-
focus-manager
utilizes two state variables, namelyisFirstRender
andnodeToBeFocused
.- initial value of the
isFirstRender
is set totrue
- initial value of the
nodeToBeFocused
is set tonull
- initial value of the
-
focus-manager
has two private methods namely_setFocus
and_removeTabIndex
.-
_setFocus
method- adds
tabindex=-1
to thenodeToBeFocused
- invokes native
focus()
method on it - attaches
_removeTabIndex
method to thenodeToBeFocused
as theclick
andblur
event handler - sets
nodeToBeFocused
tonull
- adds
-
_removeTabIndex
method, removes thetabindex
,click
andblur
event handler fromnodeToBeFocused
-
-
focus-manager
service exposes two methods, namelyupdateIsFirstRender
andsetNodeToBeFocused
, which are consumed byself-focused
component.-
updateIsFirstRender
setsisFirstRender
tofalse
if it is not already. -
setNodeToBeFocused
method- accepts a HTML node as an argument.
- verifies the state of
isFirstRender
and ifisFirstRender
istrue
, which is the case for very first invocation, it bails out. - if
nodeToBeFocused
is notnull
, it bails out. - otherwise, it updates
nodeToBeFocused
with the passed argument, and schedules the private_setFocus
method, in theafterRender
queue.
-
-
Contributing
Running tests
-
ember test
– Runs the test suite on the current Ember version -
ember test --server
– Runs the test suite in "watch mode" -
ember try:each
– Runs the test suite against multiple Ember versions
Running the dummy application
ember serve
- Visit the dummy application at http://localhost:4200.
License
This project is licensed under the BSD-2-Clause License.