You could also insert a pipe or vertical bar (|), align it with the cursor, and animate it with CSS. Initially, hide the pipe. When the text field is not in focus, the pipe will show and start blinking. When the text field is in focus, the pipe will be hidden, and the cursor will show. I know it might be a bit much, but it's the only solution I can think of right now. I did not have time to try Andrew's solution but it looks like it could work too. It sounds like JAWS is automatically focusing on the data entry field as soon as it’s loaded, which might be interfering with your testing or development. I think the issue is due to the removal of the data entry field placeholder. To fix it, create a new data entry field, remove the placeholder from this new field, position it off-screen, and exclude it from the focus order. This way your original data entry field will not get immediate focus. Anyway, a fake cursor code:
const addCSS = css => {
const style = document.createElement("style");
style.textContent = css;
document.head.appendChild(style);
};
addCSS(`
.blink {
-webkit-animation: blink 1.1s step-start infinite;
animation: blink 1.1s step-start infinite;
}
@-webkit-keyframes blink {
0%, 50% {
opacity: 1;
}
50.01%, 100% {
opacity: 0;
}
}
@keyframes blink {
0%, 50% {
opacity: 1;
}
50.01%, 100% {
opacity: 0;
}
}
`);
const pipe = document.querySelector('[data-acc-text="pipe"]');
const textField = document.querySelector('.acc-textinput');
textField.addEventListener('focus', function() {
pipe.classList.remove('blink');
pipe.classList.add('hidden');
});
textField.addEventListener('blur', function() {
pipe.classList.remove('hidden');
pipe.classList.add('blink');
});