b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
108 lines
No EOL
3.1 KiB
JavaScript
Executable file
108 lines
No EOL
3.1 KiB
JavaScript
Executable file
'use strict';
|
|
/* global SettingsListener */
|
|
|
|
(function(exports) {
|
|
|
|
function AccessibilityQuicknavMenu() {
|
|
SettingsListener.observe('accessibility.screenreader_quicknav_modes', '',
|
|
function observe(aValue) {
|
|
this.updateModes(aValue.split(','));
|
|
}.bind(this));
|
|
SettingsListener.observe('accessibility.screenreader_quicknav_index', 0,
|
|
function observe(aValue) {
|
|
this.updateCurrentMode(aValue);
|
|
}.bind(this));
|
|
this.render();
|
|
}
|
|
|
|
AccessibilityQuicknavMenu.prototype = {
|
|
container: null,
|
|
currentMode: 0,
|
|
modes: [],
|
|
|
|
render: function render() {
|
|
this.element = document.createElement('div');
|
|
this.element.id = 'accessibility-quicknav';
|
|
this.element.dataset.zIndexLevel = 'accessibility-quicknav-menu';
|
|
this.element.dataset.type = 'value-selector';
|
|
this.element.setAttribute('role', 'dialog');
|
|
this.element.addEventListener('click', this);
|
|
this.element.innerHTML =
|
|
`<div id="accessibility-quicknav-container">
|
|
<section>
|
|
<ul role="listbox">
|
|
</ul>
|
|
</section>
|
|
</div>`;
|
|
|
|
if (this.modes.length) {
|
|
this.updateModes(this.modes);
|
|
}
|
|
|
|
var screen = document.getElementById('screen');
|
|
screen.appendChild(this.element);
|
|
},
|
|
|
|
updateModes: function updateModes(aModes) {
|
|
this.modes = aModes;
|
|
if (!this.element) {
|
|
return;
|
|
}
|
|
|
|
var ul = this.element.querySelector('ul');
|
|
ul.innerHTML = '';
|
|
for (var i in aModes) {
|
|
var li = document.createElement('li');
|
|
li.setAttribute('role', 'option');
|
|
if (i == this.currentMode) {
|
|
li.setAttribute('aria-selected', true);
|
|
}
|
|
li.setAttribute('aria-moz-quick-activate', true);
|
|
li.dataset.quicknavIndex = i;
|
|
var label = document.createElement('label');
|
|
label.setAttribute('role', 'presentation');
|
|
li.appendChild(label);
|
|
var span = document.createElement('span');
|
|
span.dataset.l10nId = 'accessibility-quicknav_' + aModes[i];
|
|
label.appendChild(span);
|
|
ul.appendChild(li);
|
|
}
|
|
},
|
|
|
|
updateCurrentMode: function updateCurrentMode(aCurrentMode) {
|
|
this.currentMode = aCurrentMode;
|
|
if (!this.element) {
|
|
return;
|
|
}
|
|
|
|
var item = this.element.querySelector('li[aria-selected=true]');
|
|
if (item) {
|
|
item.removeAttribute('aria-selected');
|
|
}
|
|
item = this.element.querySelectorAll('li[role=option]')[aCurrentMode];
|
|
if (item) {
|
|
item.setAttribute('aria-selected', true);
|
|
}
|
|
},
|
|
|
|
show: function show() {
|
|
this.element.classList.add('visible');
|
|
},
|
|
|
|
hide: function hide() {
|
|
this.element.classList.remove('visible');
|
|
},
|
|
|
|
handleEvent: function quicknavMenu_handleEvent(aEvent) {
|
|
var index = Number(aEvent.target.dataset.quicknavIndex);
|
|
// This configures the screen reader to use the selected mode for quicknav
|
|
SettingsListener.getSettingsLock().set({
|
|
'accessibility.screenreader_quicknav_index': index
|
|
});
|
|
|
|
this.hide();
|
|
}
|
|
};
|
|
|
|
exports.AccessibilityQuicknavMenu = AccessibilityQuicknavMenu;
|
|
}(window)); |