Pressed state of trumbowyg toolbar buttons not being read out by NVDA but are being read out by VoiceOver - wai-aria

I would like the pressed state of the trumbowyg toolbar buttons (bold/italic etc) to be read out by NVDA screen reader. I have implemented the aria-pressed solution, which works fine for VoiceOver; it reads out select/deselect when the buttons have been selected and deselected, however not for NVDA:
function addValuesToTextEditorButtons() {
const toggleButton = element => {
// Check to see if the button is pressed
var pressed = (element.getAttribute("aria-pressed") === "true");
// Change aria-pressed to the opposite state
element.setAttribute("aria-pressed", !pressed);
}
const handleBtnKeyDown = event => {
// Prevent the default action to stop scrolling when space is pressed
event.preventDefault();
toggleButton(event.target);
}
var buttons = $('.trumbowyg-button-pane .trumbowyg-button-group button[type="button"]');
buttons.each(function (index, element) {
let title = element.title.split(' ')[0]
element.value = title
element.setAttribute('aria-label', title)
element.setAttribute('aria-pressed', false)
element.setAttribute('role', 'button')
element.addEventListener('click', event => {
handleBtnKeyDown(event)
})
element.removeAttribute('tabindex')
});
}

First off, verify that the element you're setting aria-pressed on is a real button (or role='button'). It looks like that's true from your code snippet but would be the first thing to verify. ARIA attributes are only valid on certain elements. (See https://www.w3.org/TR/html53/dom.html#allowed-aria-roles-states-and-properties)
Some screen readers might still announce the value of the attribute even if it's not valid so sometimes that explains why one SR works (such as VO) whereas another does not (NVDA).
I've used aria-pressed successfully with all screen readers without a problem. For NVDA, it will announce the element as a "toggle button" and will say "pressed" or "not pressed" depending on the value.

Related

detecting altKey on MacOS in zoomchart

I'm implementing functionality to create a link between two nodes on Shift+Alt+Click. Like this
function graphSelectionChange(event){
var selection = event.selection;
if (selection.length === 2 && event.altKey){
var fromitem=selection[0];
var toitem=selection[1];
chart.addData({
links:[{
"id":"ll"+nextId,
from:fromitem.id,
to:toitem.id,
"style":{"label":"newLink"}
}]
});
nextId += 1;
}
}
The altKey seems not to be detected. According to this http://jsfiddle.net/Rw4km/ it is the alt/option button on a keyboard. Any clue?
Use click event (it also has selection attribute).
Selection event does not have altKey property.
There are other selection changes, like selected nodes disappearing, that do not have associated mouse clicks an you probably do not want a link added in such case.

Committing the changes in Handsontable from outside

By Default when we enter a value inside a cell in Handsontable and the press Enter key or go to another cell or other part of the page, the value we have already entered into the cell will be committed automatically (after validation).
But I have a new requirement now. I want to manually commit the changes form outside of Handsontable (e.g. with calling a JavaScript function).
The real story is that I have rendered dropdown control inside some cells in Handsontable. When the user enters a number in a cell without pressing Enter key; and then clicks on the dropdown control in another cell; I do not have access to their new entered value.
I am going to commit their former changes when they click on the dropdown.
Any Idea?
Update:
I created a jsFiddle and did my best to keep it as simple as possible. http://jsfiddle.net/mortezasoft/3c2mN/3/
If you change the Maserati word to something else and without pressing Enter choose an option in dropdown, you can still see the name Maserati is shown as an alert dialog.
<div id="example"></div>
var data = [
["", "Maserati"],
["", ""],
];
$('#example').handsontable({
data: data,
minSpareRows: 1,
colHeaders: true,
contextMenu: true,
cells: function (row, col, prop) {
var cellProperties = {};
if (col===0 && row===0) {
cellProperties.renderer = selectBoxRenderer;
cellProperties.readOnly =true;
}
return cellProperties;
}
});
function selectBoxRenderer(instance, td, row, col, prop, value, cellProperties) {
var $select = $("<select><option></option> <option>Show the name</option></select>");
var $td = $(td);
$select.on('mousedown', function (event) {
event.stopPropagation(); //prevent selection quirk
});
$td.empty().append($select);
$select.change(function () {
//Default value is Maserati but we are gonna change it.
alert($('#example').handsontable('getData')[0][1]);
});
}
You can add instance.destroyEditor() to the mousedown handler on $select. This will commit the changes on first click, but will also require another click to open the select menu.
$select.on('mousedown', function (event) {
event.stopPropagation(); //prevent selection quirk
instance.destroyEditor();
});
The reason behind second click problem is that instance.destroyEditor() re-renders the table, which causes the original select element to be destroyed, so the click event cannot take effect.
To solve this, add
if ($td.find('select').length!=0) return;
at the beginning of the renderer. This way existing select elements will not be overwritten when re-rendering.

Kendo UI Grid Editor Complete

I have a Kendo Grid, where I have defined an Editor like this:
#(Html.Kendo().Grid(Model.Data)
.Name("GridINT")
.Editable(editable => editable
.Mode(GridEditMode.PopUp)
.TemplateName("MyTemplateName")
.Window(w => w.Width(500))
.Window(w => w.Title("My Template")))
Before I engage the editor, I bind a mouseup handler to the rows, and I tweak the style of the command button. When the editor closes, whether by Submit, Cancel, or 'X', my handler and style tweaks are gone for the affected row. I need to restore them, but I haven't found the valid event. I have bound the cancel click event like this:
$('.k-grid-cancel').bind('click', function ( e ) {
colorCommandCells();
});
but if I restore my handler/style to a grid row here, the editor's closing process undoes what I have done.
Bottom line: how can I know that the editor is finished updating the grid (which it does, as I have described, even if the editor is cancelled) and which row was the one that the editor messed with?
This is the code that colors the command cells:
function colorCommandCells() {
// This block colors the command cell according to ISNEW. It must run every time the DataBound event occurs.
var grid = $("#GridINT").data("kendoGrid");
var gridData = grid.dataSource.view();
for (var i = 0; i < gridData.length; i++) {
var currentUid = gridData[i].uid;
var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");
var editButton = $(currentRow).find(".k-grid-edit");
var aColor = gridData[i].ISNEW == 1 ? "#FFCCFF" : "transparent";
var aText = gridData[i].ISNEW == 1 ? "Add" : "Edit";
var parent = $(editButton).closest("td");
$(parent[0]).css('background-color', function () { return aColor; });
editButton[0].innerHTML = "<span class=\"k-icon k-edit\"></span>" + aText;
}
}
Basically the Grid is rebound each time after such operations, and it is good to either use delegate events attached to the tbody of the Grid or bind the events each time when the dataBound event of the Grid occurs.
There are two parts to this answer: First, when building the DataSource for the Grid, assign a function to the Sync Event.
.Events(e => e.Sync("syncGrid"))
Also, when building the Grid, assign a function to the Cancel event.
.Events(e => e.DataBound("gridIsDataBound").Cancel("cancelEditor").Edit("gridEdit"))
You have to have both, because the Sync event will fire if the popup editor is closed via "Submit" and the Cancel event will fire if the popup editor is closed via "Cancel" or "X". Both functions should call something like this, where colorACommandCell is where I restore my style values:
function closeEditor() {
var timer;
clearTimeout(timer);
timer = setTimeout(colorACommandCell, 100);
}
There is still some activity related to the Grid that occurs after the editor closes (this is what clobbers my style tweaks). I found that, if I queued up my "fixes" to wait 0.1 seconds, then they would not get overwritten. Ideally, however, I'd like to have a more certain event that fires when the Editor is REALLY finished. I don't expect to be able to trust this timer on every machine that runs my code.

jQuery click event behaves differently with live function in Firefox

Using the event click with live function leads to strange behavior when using Firefox*.
With live in Firefox, click is triggered when right-clicking also! The same does not happen in Internet Explorer 7 neither in Google Chrome.
Example:
Without live, go to demo and try right clicking
the paragraphs. A dialog menu should
appear.
With live, go to demo and try right
clicking "Click me!". Now both dialog
menu and "Another paragraph" appear.
*tested with firefox 3.5.3
As far as I know, that is a known issue (bug?). You can easily work around it by testing which button was clicked as follows:
$('a.foo').live("click", function(e) {
if (e.button == 0) { // 0 = left, 1 = middle, 2 = right
//left button was clicked
} else {
//other button was clicked (do nothing?)
//return false or e.preventDefault()
}
});
you might prefer using a switch depending on your specific requirements, but generally you would probably just want to do nothing (or or simply return) if any button other than the left button is clicked, as above:
$('a.foo').live("click", function(e) {
switch(e.button) {
case 0 : alert('Left button was clicked');break;
default: return false;
}
});
I think it's a known "bug", you could potentially query the event object after attaching the click handler ( which gets attached to the document ) and see if its a right click, otherwise manually attach the click handler after you manipulate the DOM.
After looking it up, e.button is the property you want to query:
.live('click', function(e){
if ( e.button == 2 ) return false; // exit if right clicking
// normal action
});
See my answer here: if you don't mind changing the jQuery source a bit, adding a single line in the liveHandler() works around the problem entirely.

How can I prevent Firefox from opening the gridview header sort postback link in a new tab on Ctrl Click

I am trying to make my gridview control in ASP.Net do a multi sort based on if the user pressed Ctrl key when trying to sort by clicking on a column name. The problem is that when I am using Firefox, if I click on a column name with Ctrl key pressed, the browser tries to open "javascript:__doPostBack('ctl00$ContentPla..." link in a new tab. IE and Chrome both don't do this unless the link is a real link.
Is there a way I can prevent Firefox from opening the link in a new tab and still cause the page to postback normally?
Thanks.
You need to capture the event of the Ctrl key being pushed down, using document.onKeyDown.
In your event handler, check if 'Ctrl' (key code 17) was pressed, as follows:
function document_keyDown(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode;
if (KeyID == 17) {
ctrlDown = true;
}
}
Here, I'm setting a 'ctrlDown' variable to true.
For the onKeyUp event, you can do the exact opposite:
function document_keyUp(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode;
if (KeyID == 17) {
ctrlDown = false;
}
}
Then, in the click event of your column elements, you can check if Ctrl has been clicked or not:
function columnElement_click() {
if (ctrlDown != undefined && ctrlDown == true)
alert("Ctrl + Click Received");
return false;
}
Make sure your column click handler returns false. Otherwise, the browser will execute the code, but then navigate to the address in the link's 'href' attribute.
Hope this helps.
(See also: http://www.geekpedia.com/tutorial138_Get-key-press-event-using-JavaScript.html)

Resources