quailjs / quail

Accessibility testing in the browser and on the server.
http://quailjs.org
Other
300 stars 44 forks source link

Localization for Quail #365

Open mlewand opened 9 years ago

mlewand commented 9 years ago

The current way to bring localization strings into QUAIL tests is cumbersome and non optimal. It has a strong impact on the QUAIL distribution size and on the ability of translators to contribute. This aspect must be redesigned.

We assume that current localization for en and nl is just a temporary solution. But now, when we want Quail to be widely used, it's time to bring a real solution for multiple localizations.

Issue #269 might be related.

jessebeach commented 9 years ago

Yes, localization as it stands is a very narrow solution. It was meant to be a bridge between no localization and a flexible solution.

mlewand commented 9 years ago

Alright so lets start proposing some concepts / solutions.

What needs to be localized?

Concept

The idea is to split localization into two files config and assessments.

Quail would load proper language file on demand (once $().quail is called with a given language).

Quail main object will store internal variable:

Quail._langs = {
    en: {
        core: {
            // Dictionary...
        },
        assessments: {
            // Dictionary...
        }
    },
    nl: {
        core: {
            // Dictionary...
        },
        assessments: {
            // Dictionary...
        }
    }
}

And localization values will be available with:

quail.lang( 'core.testability.moderate' );

Then for convenience Test collection would implement the following lang method:

Test.prototype.lang = function( propertyName ) {
    // Reminder: this.attributes.name stores assessment id, e.g. `imgHasAlt`.
    return this.quail.lang( 'assessments.' + this.attributes.name + '.' + propertyName );
}

Typical main Quail fn call might look sth like:

$( scope ).quail( {
    lang: 'en',
    resultsReady: function( results ) {
        // This method is called when checking is done and results are ready.
        // Result objects does **not contain any localizations** at this point. Only id, status.
    },
    resultsLoaded: function( results ) {
        // This method has the same role as `resultsLoaded`, but here developer can access
        // localized data (even synchronously).
        var failedCollection = collection.findByStatus( 'failed' );

        if ( failedCollection.length ) {
            failedCollection.each( function( index, test ) {
                // Note that we're accessing lang property synchronously here.
                console.log( test.lang( 'title' ) );
            } );
        }
    }
} );

Optimization: When building Quail, the builder will merge default lang's core.json into Quail output .js file. That way we don't need to request (wait) for core.json to start checking in case of default language.

Procedure

Notes