How to use arrow keys to navigate through elements

Question

I'm independently developing keyboard support for openerp (an open source erp solution) and so far the job is done. But there's one last part that I can't solve no matter, no how. The challenge is to create navigation through arrows and highlight the object you're currently in. Here's the structure of the xml for better understanding, I want to make sure the user knows which product the focus is on.

<t t-name="ScaleScreenWidget">
     "<div class="scale-screen screen">
 >           <header><h2>Product Weighting</h2></header>
        <div class="display">
            <span class="weight">
                <p>
                    <t t-esc="widget.get_product_weight().toFixed(3)" />
                    Kg
                </p>
            </span>
            <span class="product-name" >
                <t t-esc="widget.get_product_name()" />
            </span>
            <div class="product-picture">
                <span class="product-price">
                    <t t-esc="widget.format_currency(widget.get_product_price()) + '/Kg'" />
                </span> 
                <t t-if="widget.get_product()">
                    <img t-att-src="widget.get_product().get_image_url()" />
                </t>
            </div>
        </div>
    </div>
</t>

I'm not a lazy person and tried with all my heart to find a solution to this question, but I couldn't so I would really appreciate some help as this will help lots of people that want a good point of sale but can't afford touchscreen hardware. Thanks in advance.