如何使用箭头键浏览元素？（并突出显示）

Question

我正在为 openerp （开源erp解决方案）独立开发键盘支持，到目前为止，工作已经完成。但是最后一部分我无论如何也无法解决。挑战是通过箭头创建导航并突出显示您当前所在的对象。这里是xml的结构以便更好地理解，我想确保用户知道焦点在哪个产品上。

<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>

我不是一个懒惰的人，我全心全意地寻求解决这个问题，但我不能这样，我真的很感激一些帮助，因为这会帮助很多想要一个好销售点的人但买不起触摸屏硬件。提前谢谢。