How to use arrow keys to navigate through elements

问题:

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.