Sha256: e6b6708be31004bdb71c6463ba881a76675b4e0a2d7d7c0ca7aa7c3724f4cf93
Contents?: true
Size: 1.37 KB
Versions: 28
Compression:
Stored size: 1.37 KB
Contents
import '../../vendor/polyfills/Event.mjs' // addEventListener
function NotificationBanner ($module) {
this.$module = $module
}
/**
* Initialise the component
*/
NotificationBanner.prototype.init = function () {
var $module = this.$module
// Check for module
if (!$module) {
return
}
this.setFocus()
}
/**
* Focus the element
*
* If `role="alert"` is set, focus the element to help some assistive technologies
* prioritise announcing it.
*
* You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the
* component HTML. You might wish to do this based on user research findings, or to avoid a clash
* with another element which should be focused when the page loads.
*/
NotificationBanner.prototype.setFocus = function () {
var $module = this.$module
if ($module.getAttribute('data-disable-auto-focus') === 'true') {
return
}
if ($module.getAttribute('role') !== 'alert') {
return
}
// Set tabindex to -1 to make the element focusable with JavaScript.
// Remove the tabindex on blur as the component doesn't need to be focusable after the page has
// loaded.
if (!$module.getAttribute('tabindex')) {
$module.setAttribute('tabindex', '-1')
$module.addEventListener('blur', function () {
$module.removeAttribute('tabindex')
})
}
$module.focus()
}
export default NotificationBanner
Version data entries
28 entries across 28 versions & 1 rubygems