[IMP] Improve compatibility with screen readers (accessibility) (#24574)

Today, Odoo is really tricky to use without seeing the screen, it must be improved to be usable.

This PR forbid to use labels without a "for" attribute, add some title, rule and aria attributes in HTML. With that, Odoo will be fully usable with a screen reader.


* [IMP] Labels must have a for attribute. Improve accessibility.
* [IMP] Better error message when trying to read a missing cached value
* [FIX] Add some aria-label and title attributes for screen readers.
* [FIX] Template name is not included in the error message in case of SyntaxError in QWeb
* [FIX] Improve the Tour failed at step error message to be more explicit.
* [IMP] Add aria-labels
* [FIX] Add missing aria-label on failing test
* [IMP] aria-hidden means hidden. Fix all bad aria-hidden and hide aria-hidden for all.
* [IMP] Color names on kanban views and many2many tags
* [IMP] Add some checks on views for accessibility.
* [IMP] Add `alt` attribute on `img` tags.
* [IMP] Add aria-label and title on non-described icons
* [IMP] Add button role to widgets with btn class
* [IMP] Translate aria and formatted attributes.
* [IMP] Remove wrong aria-labelledby
* [IMP] Add menu role on dropdowns
* [IMP] Buttons must be focusable
* [IMP] Add aria attributes on progress bars
* [IMP] Improve accessibility of basic widgets
* [IMP] Change main layout to more semantic tags
* [IMP] Add menuitem role when missing
* [IMP] Remove wrong role='presentation'
* [IMP] Improve accessibility of tab panels
* [IMP] Add aria-invalid on invalid fields
* [IMP] Add aria-sort on ordered columns
* [IMP] Add role on alerts
* [IMP] Use dialog role, header, main and footer tags for modals
* [IMP] Add labels on o_status
* [IMP] Improve accessibility of kanban view with feeds and articles
* [IMP] Add alerts in case of new messages
* [IMP] Add widget, navigation or img role to aria-labelled items

1 files changed, 2 insertions, 2 deletions

diff --git a/addons/mass_mailing/data/mass_mailing_demo.xml b/addons/mass_mailing/data/mass_mailing_demo.xml
index 347a04deaf1..3a8b4a57e6e 100644
--- a/addons/mass_mailing/data/mass_mailing_demo.xml
+++ b/addons/mass_mailing/data/mass_mailing_demo.xml
@@ -40,7 +40,7 @@
             <field name="use_default_to" eval="True"/>
             <field name="auto_delete" eval="True"/>
             <field name="body_html"><![CDATA[<div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #ffffff repeat top /100%">
-                <table cellpadding="0" cellspacing="0" style="border-collapse:collapse" width="100%"><tbody><tr><td style="padding:10px 10px 10px 5px" valign="center" width="270"> <a style="text-decoration:none" href="http://www.example.com"><strong>My Company</strong></a> </td><td style="padding:10px 15px 10px 10px;vertical-align:middle" valign="center" width="270"><table align="right" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse"><tbody><tr><td align="right"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x" style="color:#44B7B7;"></span></a></td><td align="right" style="padding-left:5px"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-google-plus-square fa-2x" style="color:#44B7B7;"></span></a></td><td align="right" style="padding-left:5px"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-linkedin-square fa-2x" style="color:#44B7B7;"></span></a></td><td align="right" style="padding-left:5px"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-twitter-square fa-2x" style="color:#44B7B7;"></span></a></td></tr></tbody></table></td></tr></tbody></table></div><div style="padding:0px;width:600px;margin:auto;background-color:#44B7B7;color:#168484"><table cellpadding="0" cellspacing="0" style="width:100%;background-color:inherit;border-collapse:collapse;color:inherit"><tbody><tr><td class="col_mv bg-color" style="text-align:left; padding-left:20px;vertical-align:middle;font-size:14px"><p style="margin:0;font-size:20px;color:#fff">You get a 20% discount for signing up!</p><p style="margin:0">Discount Code: <strong>45A9E77DGW8455</strong></p></td><td class="col_mv bg-color" style="padding:20px;text-align:center;vertical-align:middle">  <span class="fa fa-6x fa-ticket"></span>  </td></tr></tbody></table></div><div class="snippet_row bg-color" style="padding:0;width:600px;max-width:600px;margin:0 auto;background: #fff repeat top /100%;color:#168484"><table style="width:100%;text-align:justify;margin:0 auto;inherit;border-collapse:collapse;color:inherit"><tbody><tr><td style="padding:10px 30px;font-size:14px;line-height:20px"><p style="margin:0">Dear ${object.name}</p><p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br></p><p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p><p style="margin:0">Kind Regards,</p><p style="margin:0">Michael Fletcher</p></td></tr></tbody></table></div><div style="padding:0;width:600px;max-width:600px;margin:0 auto"><table style="width:100%;text-align:justify;margin:0 auto;background-color:inherit;border-collapse:collapse"><tbody><tr><td class="col_mv bg-color" style="padding:10px 0;background-color:#168484;color:#fff"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-check fa-3x"></span>  </td><td style="padding-left:10px;color:#fff;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 1:</p><p style="margin:0">Place Order</p></td></tr></tbody></table></td><td class="col_mv bg-color" style="padding:10px 0;background-color:#FFFFFF;color:#808080"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-truck fa-3x"></span>  </td><td style="padding-left:10px;color:#808080;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 2:</p><p style="margin:0">Shipping</p></td></tr></tbody></table></td><td class="col_mv bg-color" style="padding:10px 0;background-color:#FFFFFF;color:#808080"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-dollar fa-3x"></span>  </td><td style="padding-left:10px;color:#808080;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 3:</p><p style="margin:0">Payment</p></td></tr></tbody></table></td></tr></tbody></table></div><div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #414141 repeat top /100%;color:#44B7B7"><div style="padding:10px"><table cellpadding="0" cellspacing="0" style="margin: 0 auto;width:100%;border-collapse:collapse;color:inherit;color:inherit"><tbody><tr><td style="text-align:center"> <a target="_blank" style="text-decoration: none;" href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x"></span></a><a target="_blank" style="text-decoration: none;" href="https://plus.google.com/+Odooapps"><span class="fa fa-google-plus-square fa-2x"></span></a><a target="_blank" style="text-decoration: none;" href="https://www.linkedin.com/company/odoo"><span class="fa fa-linkedin-square fa-2x"></span></a><a target="_blank" style="text-decoration: none;" href="https://twitter.com/Odoo"><span class="fa fa-twitter-square fa-2x"></span></a> </td></tr><tr><td style="font-size:12px;text-align:center;padding-top:10px;padding-bottom:5px"> <a href="/unsubscribe_from_list" style="color:#44B7B7">Unsubscribe</a>|<a href="/page/contactus" style="color:#44B7B7">Contact</a> </td></tr></tbody></table></div>
+                <table cellpadding="0" cellspacing="0" style="border-collapse:collapse" width="100%"><tbody><tr><td style="padding:10px 10px 10px 5px" valign="center" width="270"> <a style="text-decoration:none" href="http://www.example.com"><strong>My Company</strong></a> </td><td style="padding:10px 15px 10px 10px;vertical-align:middle" valign="center" width="270"><table align="right" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse"><tbody><tr><td align="right"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x" style="color:#44B7B7;" role="img" aria-label="Facebook" title="Facebook"></span></a></td><td align="right" style="padding-left:5px"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-google-plus-square fa-2x" style="color:#44B7B7;" role="img" aria-label="Google Plus" title="Google Plus"></span></a></td><td align="right" style="padding-left:5px"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-linkedin-square fa-2x" style="color:#44B7B7;" role="img" aria-label="LinkedIn" title="LinkedIn"></span></a></td><td align="right" style="padding-left:5px"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-twitter-square fa-2x" style="color:#44B7B7;" role="img" aria-label="Twitter" title="Twitter"></span></a></td></tr></tbody></table></td></tr></tbody></table></div><div style="padding:0px;width:600px;margin:auto;background-color:#44B7B7;color:#168484"><table cellpadding="0" cellspacing="0" style="width:100%;background-color:inherit;border-collapse:collapse;color:inherit"><tbody><tr><td class="col_mv bg-color" style="text-align:left; padding-left:20px;vertical-align:middle;font-size:14px"><p style="margin:0;font-size:20px;color:#fff">You get a 20% discount for signing up!</p><p style="margin:0">Discount Code: <strong>45A9E77DGW8455</strong></p></td><td class="col_mv bg-color" style="padding:20px;text-align:center;vertical-align:middle">  <span class="fa fa-6x fa-ticket" role="img" aria-label="Ticket" title="Ticket"></span>  </td></tr></tbody></table></div><div class="snippet_row bg-color" style="padding:0;width:600px;max-width:600px;margin:0 auto;background: #fff repeat top /100%;color:#168484"><table style="width:100%;text-align:justify;margin:0 auto;inherit;border-collapse:collapse;color:inherit"><tbody><tr><td style="padding:10px 30px;font-size:14px;line-height:20px"><p style="margin:0">Dear ${object.name}</p><p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br></p><p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p><p style="margin:0">Kind Regards,</p><p style="margin:0">Michael Fletcher</p></td></tr></tbody></table></div><div style="padding:0;width:600px;max-width:600px;margin:0 auto"><table style="width:100%;text-align:justify;margin:0 auto;background-color:inherit;border-collapse:collapse"><tbody><tr><td class="col_mv bg-color" style="padding:10px 0;background-color:#168484;color:#fff"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-check fa-3x" role="img" aria-label="Check" title="Check"></span>  </td><td style="padding-left:10px;color:#fff;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 1:</p><p style="margin:0">Place Order</p></td></tr></tbody></table></td><td class="col_mv bg-color" style="padding:10px 0;background-color:#FFFFFF;color:#808080"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-truck fa-3x" role="img" aria-label="Truck" title="Truck"></span>  </td><td style="padding-left:10px;color:#808080;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 2:</p><p style="margin:0">Shipping</p></td></tr></tbody></table></td><td class="col_mv bg-color" style="padding:10px 0;background-color:#FFFFFF;color:#808080"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-dollar fa-3x" role="img" aria-label="Money" title="Money"></span>  </td><td style="padding-left:10px;color:#808080;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 3:</p><p style="margin:0">Payment</p></td></tr></tbody></table></td></tr></tbody></table></div><div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #414141 repeat top /100%;color:#44B7B7"><div style="padding:10px"><table cellpadding="0" cellspacing="0" style="margin: 0 auto;width:100%;border-collapse:collapse;color:inherit;color:inherit"><tbody><tr><td style="text-align:center"> <a target="_blank" style="text-decoration: none;" href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x" role="img" aria-label="Facebook" title="Facebook"></span></a><a target="_blank" style="text-decoration: none;" href="https://plus.google.com/+Odooapps"><span class="fa fa-google-plus-square fa-2x" role="img" aria-label="Google Plus" title="Google Plus"></span></a><a target="_blank" style="text-decoration: none;" href="https://www.linkedin.com/company/odoo"><span class="fa fa-linkedin-square fa-2x" role="img" aria-label="LinkedIn" title="LinkedIn"></span></a><a target="_blank" style="text-decoration: none;" href="https://twitter.com/Odoo"><span class="fa fa-twitter-square fa-2x" role="img" aria-label="Twitter" title="Twitter"></span></a> </td></tr><tr><td style="font-size:12px;text-align:center;padding-top:10px;padding-bottom:5px"> <a href="/unsubscribe_from_list" style="color:#44B7B7">Unsubscribe</a>|<a href="/page/contactus" style="color:#44B7B7">Contact</a> </td></tr></tbody></table></div>
             </div>]]></field>
         </record>
 
@@ -69,7 +69,7 @@
             <field name="reply_to_mode">email</field>
             <field name="reply_to"><![CDATA[Info <info@yourcompany.example.com>]]></field>
             <field name="body_html"><![CDATA[<div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #ffffff repeat top /100%">
-                <table cellpadding="0" cellspacing="0" style="border-collapse:collapse" width="100%"><tbody><tr><td style="padding:10px 10px 10px 5px" valign="center" width="270"> <a style="text-decoration:none" href="http://www.example.com"><strong>My Company</strong></a> </td><td style="padding:10px 15px 10px 10px;vertical-align:middle" valign="center" width="270"><table align="right" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse"><tbody><tr><td align="right"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x" style="color:#44B7B7;"></span></a></td><td align="right" style="padding-left:5px"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-google-plus-square fa-2x" style="color:#44B7B7;"></span></a></td><td align="right" style="padding-left:5px"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-linkedin-square fa-2x" style="color:#44B7B7;"></span></a></td><td align="right" style="padding-left:5px"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-twitter-square fa-2x" style="color:#44B7B7;"></span></a></td></tr></tbody></table></td></tr></tbody></table></div><div style="padding:0px;width:600px;margin:auto;background-color:#44B7B7;color:#168484"><table cellpadding="0" cellspacing="0" style="width:100%;background-color:inherit;border-collapse:collapse;color:inherit"><tbody><tr><td class="col_mv bg-color" style="text-align:left; padding-left:20px;vertical-align:middle;font-size:14px"><p style="margin:0;font-size:20px;color:#fff">You get a 20% discount for signing up!</p><p style="margin:0">Discount Code: <strong>45A9E77DGW8455</strong></p></td><td class="col_mv bg-color" style="padding:20px;text-align:center;vertical-align:middle">  <span class="fa fa-6x fa-ticket"></span>  </td></tr></tbody></table></div><div class="snippet_row bg-color" style="padding:0;width:600px;max-width:600px;margin:0 auto;background: #fff repeat top /100%;color:#168484"><table style="width:100%;text-align:justify;margin:0 auto;inherit;border-collapse:collapse;color:inherit"><tbody><tr><td style="padding:10px 30px;font-size:14px;line-height:20px"><p style="margin:0">Dear ${object.name}</p><p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br></p><p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p><p style="margin:0">Kind Regards,</p><p style="margin:0">Michael Fletcher</p></td></tr></tbody></table></div><div style="padding:0;width:600px;max-width:600px;margin:0 auto"><table style="width:100%;text-align:justify;margin:0 auto;background-color:inherit;border-collapse:collapse"><tbody><tr><td class="col_mv bg-color" style="padding:10px 0;background-color:#168484;color:#fff"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-check fa-3x"></span>  </td><td style="padding-left:10px;color:#fff;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 1:</p><p style="margin:0">Place Order</p></td></tr></tbody></table></td><td class="col_mv bg-color" style="padding:10px 0;background-color:#FFFFFF;color:#808080"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-truck fa-3x"></span>  </td><td style="padding-left:10px;color:#808080;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 2:</p><p style="margin:0">Shipping</p></td></tr></tbody></table></td><td class="col_mv bg-color" style="padding:10px 0;background-color:#FFFFFF;color:#808080"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-dollar fa-3x"></span>  </td><td style="padding-left:10px;color:#808080;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 3:</p><p style="margin:0">Payment</p></td></tr></tbody></table></td></tr></tbody></table></div><div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #414141 repeat top /100%;color:#44B7B7"><div style="padding:10px"><table cellpadding="0" cellspacing="0" style="margin: 0 auto;width:100%;border-collapse:collapse;color:inherit;color:inherit"><tbody><tr><td style="text-align:center"> <a target="_blank" style="text-decoration: none;" href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x"></span></a><a target="_blank" style="text-decoration: none;" href="https://plus.google.com/+Odooapps"><span class="fa fa-google-plus-square fa-2x"></span></a><a target="_blank" style="text-decoration: none;" href="https://www.linkedin.com/company/odoo"><span class="fa fa-linkedin-square fa-2x"></span></a><a target="_blank" style="text-decoration: none;" href="https://twitter.com/Odoo"><span class="fa fa-twitter-square fa-2x"></span></a> </td></tr><tr><td style="font-size:12px;text-align:center;padding-top:10px;padding-bottom:5px"> <a href="/unsubscribe_from_list" style="color:#44B7B7">Unsubscribe</a>|<a href="/page/contactus" style="color:#44B7B7">Contact</a> </td></tr></tbody></table></div>
+                <table cellpadding="0" cellspacing="0" style="border-collapse:collapse" width="100%"><tbody><tr><td style="padding:10px 10px 10px 5px" valign="center" width="270"> <a style="text-decoration:none" href="http://www.example.com"><strong>My Company</strong></a> </td><td style="padding:10px 15px 10px 10px;vertical-align:middle" valign="center" width="270"><table align="right" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse"><tbody><tr><td align="right"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x" style="color:#44B7B7;" role="img" aria-label="Facebook" title="Facebook"></span></a></td><td align="right" style="padding-left:5px"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-google-plus-square fa-2x" style="color:#44B7B7;" role="img" aria-label="Google Plus" title="Google Plus"></span></a></td><td align="right" style="padding-left:5px"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-linkedin-square fa-2x" style="color:#44B7B7;" role="img" aria-label="LinkedIn" title="LinkedIn"></span></a></td><td align="right" style="padding-left:5px"><a target="_blank" href="https://www.facebook.com/Odoo"><span class="fa fa-twitter-square fa-2x" style="color:#44B7B7;" role="img" aria-label="Twitter" title="Twitter"></span></a></td></tr></tbody></table></td></tr></tbody></table></div><div style="padding:0px;width:600px;margin:auto;background-color:#44B7B7;color:#168484"><table cellpadding="0" cellspacing="0" style="width:100%;background-color:inherit;border-collapse:collapse;color:inherit"><tbody><tr><td class="col_mv bg-color" style="text-align:left; padding-left:20px;vertical-align:middle;font-size:14px"><p style="margin:0;font-size:20px;color:#fff">You get a 20% discount for signing up!</p><p style="margin:0">Discount Code: <strong>45A9E77DGW8455</strong></p></td><td class="col_mv bg-color" style="padding:20px;text-align:center;vertical-align:middle">  <span class="fa fa-6x fa-ticket" role="img" aria-label="Ticket" title="Ticket"></span>  </td></tr></tbody></table></div><div class="snippet_row bg-color" style="padding:0;width:600px;max-width:600px;margin:0 auto;background: #fff repeat top /100%;color:#168484"><table style="width:100%;text-align:justify;margin:0 auto;inherit;border-collapse:collapse;color:inherit"><tbody><tr><td style="padding:10px 30px;font-size:14px;line-height:20px"><p style="margin:0">Dear ${object.name}</p><p style="margin:0">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br></p><p style="margin:0">Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p><p style="margin:0">Kind Regards,</p><p style="margin:0">Michael Fletcher</p></td></tr></tbody></table></div><div style="padding:0;width:600px;max-width:600px;margin:0 auto"><table style="width:100%;text-align:justify;margin:0 auto;background-color:inherit;border-collapse:collapse"><tbody><tr><td class="col_mv bg-color" style="padding:10px 0;background-color:#168484;color:#fff"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-check fa-3x" role="img" aria-label="Check" title="Check"></span>  </td><td style="padding-left:10px;color:#fff;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 1:</p><p style="margin:0">Place Order</p></td></tr></tbody></table></td><td class="col_mv bg-color" style="padding:10px 0;background-color:#FFFFFF;color:#808080"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-truck fa-3x" role="img" aria-label="Truck" title="Truck"></span>  </td><td style="padding-left:10px;color:#808080;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 2:</p><p style="margin:0">Shipping</p></td></tr></tbody></table></td><td class="col_mv bg-color" style="padding:10px 0;background-color:#FFFFFF;color:#808080"><table style="border-collapse:collapse;background-color:inherit"><tbody><tr><td rowspan="2" style="padding-left:10px">  <span class="fa fa-dollar fa-3x" role="img" aria-label="Money" title="Money"></span>  </td><td style="padding-left:10px;color:#808080;font-size:14px"><p style="font-weight:bold;font-size:18px;margin:0 0 3px 0">Step 3:</p><p style="margin:0">Payment</p></td></tr></tbody></table></td></tr></tbody></table></div><div class="snippet_row bg-color" style="padding:0px;width:600px;margin:auto;background: #414141 repeat top /100%;color:#44B7B7"><div style="padding:10px"><table cellpadding="0" cellspacing="0" style="margin: 0 auto;width:100%;border-collapse:collapse;color:inherit;color:inherit"><tbody><tr><td style="text-align:center"> <a target="_blank" style="text-decoration: none;" href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x" role="img" aria-label="Facebook" title="Facebook"></span></a><a target="_blank" style="text-decoration: none;" href="https://plus.google.com/+Odooapps"><span class="fa fa-google-plus-square fa-2x" role="img" aria-label="Google Plus" title="Google Plus"></span></a><a target="_blank" style="text-decoration: none;" href="https://www.linkedin.com/company/odoo"><span class="fa fa-linkedin-square fa-2x" role="img" aria-label="LinkedIn" title="LinkedIn"></span></a><a target="_blank" style="text-decoration: none;" href="https://twitter.com/Odoo"><span class="fa fa-twitter-square fa-2x" role="img" aria-label="Twitter" title="Twitter"></span></a> </td></tr><tr><td style="font-size:12px;text-align:center;padding-top:10px;padding-bottom:5px"> <a href="/unsubscribe_from_list" style="color:#44B7B7">Unsubscribe</a>|<a href="/page/contactus" style="color:#44B7B7">Contact</a> </td></tr></tbody></table></div>
         </div>]]></field>
             <field name="attachment_ids" eval="[(4, ref('mass_mail_attach_1'))]"/>
         </record>