How we fixed dialogs from being read incorrectly in JAWS

In dialogs we had a problem with the word count dialog. In particular what was happening is that JAWS would read the whole dialog and then start reading the rest of the document, like if the dialog was not blocking the UI.

The code looked like the following:

<div aria-describedby="ephox-aria_364273060451471304240619" aria-label="Word Count" aria-labelledby="ephox-aria_766513384441471304240617" class=
"ephox-polish-dialog ephox-polish-dialog-wordcount ephox-polish-dialog-narrow" role="dialog" tabindex="-1">
  <div class="ephox-polish-top">
    <span class="ephox-polish-dialog-title" id="ephox-aria_766513384441471304240617">Word Count</span><span aria-label="Cancel Dialog" class=
    "ephox-polish-dialog-close" role="button" tabindex="-1"></span>
  <div class="ephox-polish-dialog-content" id="ephox-aria_364273060451471304240619">
    <table class="ephox-polish-tabular ephox-polish-wordcount-table">
          <th scope="col">Count&nbsp;</th>
          <th scope="col">Document&nbsp;</th>
          <th scope="col">Selection&nbsp;</th>
          <td class="ephox-polish-wordcount-document-words">402&nbsp;</td>
          <td class="ephox-polish-wordcount-selection-words">0&nbsp;</td>
          <td>Characters (no spaces)&nbsp;</td>
          <td class="ephox-polish-wordcount-document-charsnospaces">2486&nbsp;</td>
          <td class="ephox-polish-wordcount-selection-charsnospaces">0&nbsp;</td>
          <td class="ephox-polish-wordcount-document-chars">2994&nbsp;</td>
          <td class="ephox-polish-wordcount-selection-chars">0&nbsp;</td>
  <div class="ephox-polish-dialog-controls"></div>

Also, in the JS we were focusing the table and adding a key handler for keyboard navigation. This would be picked by AInspector, the tool we use for testing if all the attributes are set normally. The reason why AInspector was complaining it is that the table has a role by default as a data-table and it doesn’t expect any key handler. We removed the key handler from the table and left only the one on the outer dialog, to keep actions such as ESC to close the dialog.

However at this point JAWS would not read the dialog fine anymore: the dialog would result in being read twice, and once the reading would be done it would start reading the rest of the document. In our case, it would start reading the editor toolbar.

In the past, we had a data-table with roles and attributes, e.g:

<table role="grid"><tr role="row"><td role="gridcell"></td></tr></table>

Which is incorrect since the table is already a grid by default. To be semantically correct we tried then to convert the table to a table made of divs, obtaining a table like:

  <div role="grid" class="ephox-polish-tabular-table ephox-polish-tabular ephox-polish-wordcount-table">
    <div class="ephox-polish-tabular-group">
        <div class="ephox-polish-tabular-row" role="row">
            <span class="ephox-polish-tabular-cell" scope="col"> ${headerCounts}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" scope="col"> ${headerDocument}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" scope="col"> ${headerSelection}&nbsp;</span>
    <div class="ephox-polish-tabular-group">
        <div class="ephox-polish-tabular-row" role="row">
            <span class="ephox-polish-tabular-cell">${wordCountLabel}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-document-words">${documentCountWords}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-selection-words">${selectionCountWords}&nbsp;</span>
        <div class="ephox-polish-tabular-row" role="row">
            <span class="ephox-polish-tabular-cell">${wordCountCharsNoSpacesLabel}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-document-charsnospaces">${documentCharactersNoSpaces}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-selection-charsnospaces">${selectionCharactersNoSpaces}&nbsp;</span>
        <div class="ephox-polish-tabular-row" role="row">
            <span class="ephox-polish-tabular-cell">${wordcountCharsLabel}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-document-chars">${documentCountCharsWithSpaces}&nbsp;</span>
            <span class="ephox-polish-tabular-cell" class="ephox-polish-wordcount-selection-chars">${selectionCountCharsWithSpaces}&nbsp;</span>

And styled as:

.ephox-polish-tabular-table {
  display: table;
  width: auto;

.ephox-polish-editor-container .ephox-polish-tabular-row {
  display: table-row;
  width: auto;

.ephox-polish-tabular-cell {
  display: table-cell;

This way we would obtain the behaviour we wanted, we could put a key handler on the table, but then, AInspector wouldn’t see the table as a data-table anymore, therefore cells with values of 0, which are simply fine in a regular table are not seen as “unique”, therefore we had to find a better way to deal with it.

Next step in the resolution of this problem was having the div structure being able to be focused, so we have:

  • Removed the key handler
  • Added a tabindex=”-1″
  • Focused the table

Result: nothing. JAWS would still read the whole table and then the content, so scrap that.

Next thing we tried has been to focus the “Cancel button”, to try stopping JAWS from reading the outer content while still reading the table contents.
Result: JAWS would just read the title of the dialog and announce the close button.

At this point since it is stopping at the cancel button, we might just add a button at the bottom of the dialog, such as an ‘OK’ button, which action would simply to close the dialog.
Result: JAWS would just read the button once again.

At this point we had an illumination:

  • Set a tabindex=”-1″ on a real data-table
  • Focus the table when the dialog opens without putting any keyhandler, while leaving the outer one for the dialog

The markup of the table would look like the following:

<table class="ephox-polish-tabular ephox-polish-wordcount-table" tabindex="-1">
            <th scope="col"> ${headerCounts}&nbsp;</th>
            <th scope="col"> ${headerDocument}&nbsp;</th>
            <th scope="col"> ${headerSelection}&nbsp;</th>
            <td class="ephox-polish-wordcount-document-words">${documentCountWords}&nbsp;</td>
            <td class="ephox-polish-wordcount-selection-words">${selectionCountWords}&nbsp;</td>
            <td class="ephox-polish-wordcount-document-charsnospaces">${documentCharactersNoSpaces}&nbsp;</td>
            <td class="ephox-polish-wordcount-selection-charsnospaces">${selectionCharactersNoSpaces}&nbsp;</td>
            <td class="ephox-polish-wordcount-document-chars">${documentCountCharsWithSpaces}&nbsp;</td>
            <td class="ephox-polish-wordcount-selection-chars">${selectionCountCharsWithSpaces}&nbsp;</td>

And this has actually made AInspector happy, as we were using an actual data-table, without useless attributes. Also, JAWS started reading the table just fine stopping at the end of the dialog.

Hope this will be helpful for someone!

Finding the real position of an element with respect to the document

The first attempt when trying to get the position of an element with respect to the document has been to use the getBoundingClientRect method.

Element.getBoundingClientRect and Element.getClientRects

Continue reading Finding the real position of an element with respect to the document

Understanding MouseEvent properties clientX and pageX

I am working in a section of the application which is going to require the user to be able to do a number of different operations. What I need to use for this are different kinds of MouseEvent properties, however it is important understanding them to use them in the most effective way.
Continue reading Understanding MouseEvent properties clientX and pageX

How to take a video of an Android device from shell

If you develop for Android you might want to be able to capture your screen to show a bug or the differences between two things and ask for suggestions.
So to do so we need adb installed and configured.

First of all make sure that adb sees your device:

adb devices

Then you can launch the recording session:

adb shell screenrecord /sdcard/android-video-capture.mp4

adb shell screenrecord --help
Usage: screenrecord [options] 

Android screenrecord v1.2.  Records the device's display to a .mp4 file.

    Set the video size, e.g. "1280x720".  Default is the device's main
    display resolution (if supported), 1280x720 if not.  For best results,
    use a size supported by the AVC encoder.
--bit-rate RATE
    Set the video bit rate, in bits per second.  Value may be specified as
    bits or megabits, e.g. '4000000' is equivalent to '4M'.  Default 4Mbps.
    Add additional information, such as a timestamp overlay, that is helpful
    in videos captured to illustrate bugs.
--time-limit TIME
    Set the maximum recording time, in seconds.  Default / maximum is 180.
    Display interesting information on stdout.
    Show this message.

Recording continues until Ctrl-C is hit or the time limit is reached.

Forcing Chrome to use the GPU to improve performances on redraw

In Chrome for Android I am working with large images. What we want it is the ability for the user to resize the image properly in a smooth way. For small images this works quite fine, however when it comes to large images, for example images captured from device’s camera, this operation is not really smooth.

To force Chrome to use the GPU, all we need is a CSS transform property applied to the image, for example:

transform: translate3d(0, 0, 0);

This will improve drastically the perceived smoothness of the image while working with it. Even if the CSS transform property it is not going to change anything on how the image is displayed or rendered, it will force the GPU to take care of the rendering, making the transition much smoother.

Trip to Rottnest Island


Rottnest Island is located just outside of Perth. Now I don’t know yet what’s there, so first of all I need to sort out how to get there. Two ferries services are available: Ferry Options are the Rottnest Express Ferry, departing from Perth, and Rottnest Fast Ferries, departing from Hillarys, just north of Perth. In these two tables I am comparing the services, to decide which one is the best for my needs. Just for clarity: all the prices are updated as of today (14/11/2015).
Continue reading Trip to Rottnest Island

Include an extra library from Maven into an Android Project

To include an extra dependency into an Android project we need to:

  1. Go to file and select “Project Structure”:
    Android studio file project structure
  2. Next step it is to select the app section and then the Dependencies tap.
    Open the app tap
  3. At this point we click on the plus sign at the bottom of the window and then we select add library dependency:
    Add library dependency
  4. The last step it is to add the dependency we’re looking for, in my case it is to include the apache commons, so I search for and I select on the package I am interested to and click OK.
    Add external library dependency into project android studio

Converting a Maven Project to a Gradle one

Working with Android Studio means that we need to use gradle projects, however it might happen that some of our old projects were made in pure Java and with Maven, this is actually quite likely.
Converting a project from one format to another is though quite easy to be done through the command line and the built init plugin.
In particular this tool allows us to convert not just from Maven but also from grails, java and scala.
Anyway, to move from Maven to gradle we just need to:

cd project
gradle init --type pom

At this point we can import the project into Android Studio quite easily.

How to change keyboard layout with a keyboard shortcut in OSX

To study Japanese I added to my Mac some extra keyboard layouts. However when I was reviewing my Anki cards I found annoying every time to have to press on the little flag icon and chose the appropriate layout. On OSX (El Captain, but I guess is the same on older ones), you can add a shortcut which I set to ‚Ć•Space to avoid conflicting with Spotlight.


Java Design Patterns: Implementing a singleton for Selenium WebDriver

What is a Singleton? A singleton is a class which should only be initialized once, provide a way to allow multiple instances of that class to be used, and finally to be the central point of access for that class.

Typical use cases of a singleton are classes accessing to system resources. In my scenario I want for example to create a singleton for Selendroid, since I really want to create just one instance of Selendroid to run all my tests.

Continue reading Java Design Patterns: Implementing a singleton for Selenium WebDriver