2017-08-22 10:53:26 +03:00
|
|
|
import Component from '@ember/component';
|
|
|
|
import {htmlSafe} from '@ember/string';
|
2015-10-28 14:36:45 +03:00
|
|
|
|
|
|
|
export default Component.extend({
|
2015-08-27 20:41:14 +03:00
|
|
|
tagName: 'a',
|
|
|
|
anchor: '',
|
|
|
|
classNames: ['sr-only', 'sr-only-focusable'],
|
|
|
|
// Add attributes to component for href
|
|
|
|
// href should be set to retain anchor properties
|
|
|
|
// such as pointer cursor and text underline
|
|
|
|
attributeBindings: ['href'],
|
|
|
|
// Used so that upon clicking on the link
|
|
|
|
// anchor behaviors or ignored
|
2016-06-11 19:52:36 +03:00
|
|
|
href: htmlSafe('javascript:;'),
|
2015-08-27 20:41:14 +03:00
|
|
|
|
2015-12-15 14:09:34 +03:00
|
|
|
click() {
|
2019-01-02 12:58:55 +03:00
|
|
|
let el = document.querySelector(this.anchor);
|
2015-08-27 20:41:14 +03:00
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
if (el) {
|
2015-08-27 20:41:14 +03:00
|
|
|
// Scrolls to the top of main content or whatever
|
|
|
|
// is passed to the anchor attribute
|
2019-01-02 12:58:55 +03:00
|
|
|
document.body.scrollTop = el.getBoundingClientRect().top;
|
|
|
|
|
|
|
|
let removeTabindex = function () {
|
|
|
|
el.removeAttribute('tabindex');
|
|
|
|
};
|
2015-08-27 20:41:14 +03:00
|
|
|
|
|
|
|
// This sets focus on the content which was skipped to
|
|
|
|
// upon losing focus, the tabindex should be removed
|
|
|
|
// so that normal keyboard navigation picks up from focused
|
|
|
|
// element
|
2019-01-02 12:58:55 +03:00
|
|
|
el.setAttribute('tabindex', -1);
|
|
|
|
el.focus();
|
|
|
|
el.addEventListener('blur', removeTabindex);
|
|
|
|
el.addEventListener('focusout', removeTabindex);
|
2015-08-27 20:41:14 +03:00
|
|
|
}
|
2015-12-15 14:09:34 +03:00
|
|
|
}
|
2015-08-27 20:41:14 +03:00
|
|
|
});
|