diff options
| author | kujiu <kujiu@users.noreply.github.com> | 2018-06-22 21:22:21 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-06-22 21:22:21 +0200 |
| commit | 9de1bc0eef6f5bfaa2a8d745431caa361ae91548 (patch) | |
| tree | 342ddbf7fb2b7303606f864ff9f68cbf1bd8814e /addons/website | |
| parent | 864357203fc6222cc989b99a5e9f428cd53f413f (diff) | |
[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
Diffstat (limited to 'addons/website')
18 files changed, 239 insertions, 239 deletions
diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml index 9ba425ed7e7..b8e493c1505 100644 --- a/addons/website/data/website_data.xml +++ b/addons/website/data/website_data.xml @@ -73,7 +73,7 @@ </div> </div> <div class="text-center mt64" name="mail_button"> - <a t-attf-href="mailto:{{ res_company.email }}" class="btn btn-primary" id="o_contact_mail">Send us an email</a> + <a role="button" t-attf-href="mailto:{{ res_company.email }}" class="btn btn-primary" id="o_contact_mail">Send us an email</a> </div> </div> <div class="col-md-4 mb32"> diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml index cf4f9453755..dda6c96a3f6 100644 --- a/addons/website/data/website_demo.xml +++ b/addons/website/data/website_demo.xml @@ -97,8 +97,8 @@ response = request.website.render("website.template_partner_post", {'partner': p </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> - <button type="submit" class="btn btn-primary"> - Send <span class="fa fa-long-arrow-right"/> + <button type="submit" class="btn btn-primary" aria-label="Send"> + <span class="fa fa-suffix-long-arrow-right">Send </span> </button> </div> </div> @@ -151,7 +151,7 @@ response = request.render("website.template_partner_comment", { <h2>Homepage 0.0.0.0</h2> <h3>Click to customize this text</h3> <p> - <a class="btn btn-success btn-large" href="/contactus">Contact us</a> + <a role="button" class="btn btn-success btn-large" href="/contactus">Contact us</a> </p> </div> <span class="carousel-img col-md-6 hidden-sm hidden-xs"> </span> @@ -159,10 +159,10 @@ response = request.render("website.template_partner_comment", { </div> </div> </div> - <div class="carousel-control left hidden" data-slide="prev" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%"> + <div class="carousel-control left hidden" data-slide="prev" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%" role="img" aria-label="Previous" title="Previous"> <i class="fa fa-chevron-left"/> </div> - <div class="carousel-control right hidden" data-slide="next" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%"> + <div class="carousel-control right hidden" data-slide="next" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%" role="img" aria-label="Next" title="Next"> <i class="fa fa-chevron-right"/> </div> </div> @@ -198,7 +198,7 @@ response = request.render("website.template_partner_comment", { </div> </div> <div class="text-center mt64" name="mail_button"> - <a t-attf-href="mailto:{{ res_company.email }}" class="btn btn-primary" id="o_contact_mail">Send us an email</a> + <a role="button" t-attf-href="mailto:{{ res_company.email }}" class="btn btn-primary" id="o_contact_mail">Send us an email</a> </div> </div> <div class="col-md-4 mb32"> diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js index 602556c03cc..7221ee40e6c 100644 --- a/addons/website/static/src/js/content/snippets.animation.js +++ b/addons/website/static/src/js/content/snippets.animation.js @@ -740,7 +740,7 @@ registry.gallery = Animation.extend({ $(this).siblings().filter('.modal-backdrop').remove(); // bootstrap leaves a modal-backdrop $(this).remove(); }); - $modal.find('.modal-content, .modal-body.o_slideshow').css('height', '100%'); + $modal.find('[role="dialog"] .modal-content, main.modal-body.o_slideshow').css('height', '100%'); $modal.appendTo(document.body); this.carousel = new registry.gallery_slider($modal.find('.carousel').carousel()); diff --git a/addons/website/static/src/js/menu/mobile_view.js b/addons/website/static/src/js/menu/mobile_view.js index acfd28042c9..0969efda7a1 100644 --- a/addons/website/static/src/js/menu/mobile_view.js +++ b/addons/website/static/src/js/menu/mobile_view.js @@ -17,7 +17,7 @@ var MobilePreviewDialog = Dialog.extend({ start: function () { var self = this; this.$modal.addClass('oe_mobile_preview'); - this.$modal.on('click', '.modal-header', function () { + this.$modal.on('click', 'header.modal-header', function () { self.$el.toggleClass('o_invert_orientation'); }); this.$iframe = $('<iframe/>', { diff --git a/addons/website/static/src/js/tours/rte.js b/addons/website/static/src/js/tours/rte.js index fb2a0cacea1..cc828154722 100644 --- a/addons/website/static/src/js/tours/rte.js +++ b/addons/website/static/src/js/tours/rte.js @@ -9,15 +9,15 @@ tour.register('rte_translator', { wait_for: base.ready(), }, [{ content: "click on Add a language", - trigger: '.js_language_selector a:has(i.fa)', + trigger: '.js_language_selector a:has(span.fa)', }, { content: "select french", trigger: 'select[name="lang"]', run: 'text "fr_BE"', }, { content: "load french", - trigger: '.modal-footer button:first', - extra_trigger: '.modal select[name="lang"]:propValueContains(fr_BE)', + trigger: 'footer.modal-footer button:first', + extra_trigger: '[role="dialog"] select[name="lang"]:propValueContains(fr_BE)', }, { content : "click language dropdown", trigger : '.js_language_selector .dropdown-toggle', @@ -72,7 +72,7 @@ tour.register('rte_translator', { trigger: 'html:not(:has(#wrap p span)) .o_menu_systray a[data-action="translate"]', }, { content: "close modal", - trigger: '.modal-footer .btn-default', + trigger: 'footer.modal-footer .btn-default', }, { content: "check if translation is activate", trigger: '[data-oe-translation-id]', @@ -101,8 +101,8 @@ tour.register('rte_translator', { run: 'text test french placeholder', }, { content: "close modal", - trigger: '.modal-footer > .btn-primary', - extra_trigger: '.modal input:propValue(test french placeholder)', + trigger: 'footer.modal-footer .btn-primary', + extra_trigger: '[role="dialog"] input:propValue(test french placeholder)', }, { content: "save translation", trigger: 'button[data-action=save]', diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml index 347402caf57..a5e14c2c0bc 100644 --- a/addons/website/static/src/xml/website.backend.xml +++ b/addons/website/static/src/xml/website.backend.xml @@ -90,7 +90,7 @@ </t> <t t-name="website.GoToButtons"> - <a href="/" class="btn btn-primary" title="Go to Website"> + <a role="button" href="/" class="btn btn-primary" title="Go to Website"> Go to Website </a> </t> diff --git a/addons/website/static/src/xml/website.contentMenu.xml b/addons/website/static/src/xml/website.contentMenu.xml index 57448d29082..2b98b0d0be7 100644 --- a/addons/website/static/src/xml/website.contentMenu.xml +++ b/addons/website/static/src/xml/website.contentMenu.xml @@ -3,16 +3,16 @@ <t t-name="website.contentMenu.dialog.submenu"> <li t-att-data-menu-id="submenu.id"> <div class="input-group"> - <span class="input-group-addon fa fa-bars"/> + <span class="input-group-addon fa fa-bars" role="img" aria-label="Dropdown menu" title="Dropdown menu"/> <span class="form-control"> <span class="js_menu_label"> <t t-esc="submenu.name"/> </span> - <i t-if="submenu.is_homepage" class="pull-right fa fa-home" style="margin-top: 3px"/> + <i t-if="submenu.is_homepage" class="pull-right fa fa-home" style="margin-top: 3px" role="img" aria-label="Home" title="Home"/> </span> <span class="input-group-btn"> - <button type="button" class="btn btn-primary js_edit_menu fa fa-pencil-square-o"/> - <button type="button" class="btn btn-danger js_delete_menu fa fa-trash-o"/> + <button type="button" class="btn btn-primary js_edit_menu fa fa-pencil-square-o" aria-label="Edit menu" title="Edit menu"/> + <button type="button" class="btn btn-danger js_delete_menu fa fa-trash-o" aria-label="Delete menu" title="Delete menu"/> </span> </div> <t t-set="children" t-value="submenu.children"/> @@ -46,7 +46,7 @@ Drag a menu to the right to create a sub-menu </small> <a href="#" class="js_add_menu"> - <i class="fa fa-plus-circle"/> Add Menu Entry + <span class="fa fa-plus-circle"> Add Menu Entry</span> </a> </div> </div> diff --git a/addons/website/static/src/xml/website.facebook_page.xml b/addons/website/static/src/xml/website.facebook_page.xml index cdc0267d69b..4d362582a7b 100644 --- a/addons/website/static/src/xml/website.facebook_page.xml +++ b/addons/website/static/src/xml/website.facebook_page.xml @@ -50,9 +50,9 @@ <div class="col-md-6" style="border-left: 1px solid #eeeeee;"> <div class="form-group text-center"> <label>Preview</label> - <div class="alert alert-warning hidden facebook_page_warning text-center"> + <div class="alert alert-warning hidden facebook_page_warning text-center" role="alert"> <div> - <i class="fa fa-exclamation-triangle fa-3x" aria-hidden="true"></i> + <i class="fa fa-exclamation-triangle fa-3x" role="img" aria-label="Warning" title="Warning"></i> </div> <h4 class="mb0">Invalid Facebook Page Url</h4> <div>Please enter valid facebook page URL for preview</div> diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml index 76bf650e76d..08226cb911b 100644 --- a/addons/website/static/src/xml/website.gallery.xml +++ b/addons/website/static/src/xml/website.gallery.xml @@ -14,21 +14,21 @@ <div class="carousel-inner container" style="padding: 0;"> <t t-foreach="srcs" t-as="src"> <div t-attf-class="item #{src_index == index and 'active' or ''}"> - <img t-attf-class="img img-responsive #{userStyle}" t-att-src="src"/> + <img t-attf-class="img img-responsive #{userStyle}" t-att-src="src" alt="Slide image"/> </div> </t> </div> <ul class="carousel-indicators"> - <li class="fa fa-chevron-left o_indicators_left" style="overflow: hidden; padding: 12px; border: 0;"></li> + <li class="fa fa-chevron-left o_indicators_left" style="overflow: hidden; padding: 12px; border: 0;" aria-label="Previous" title="Previous"></li> <t t-foreach="srcs" t-as="src"> <li t-attf-data-target="##{id}" t-att-data-slide-to="src_index" t-att-class="src_index == index and 'active'" t-attf-style="background-image: url(#{src})"></li> </t> - <li class="fa fa-chevron-right o_indicators_right" style="overflow: hidden; padding: 12px; border: 0;"></li> + <li class="fa fa-chevron-right o_indicators_right" style="overflow: hidden; padding: 12px; border: 0;" aria-label="Next" title="Next"></li> </ul> - <a class="carousel-control left" t-attf-href="##{id}" data-slide="prev"><span class="fa fa-chevron-left" /></a> - <a class="carousel-control right" t-attf-href="##{id}" data-slide="next"><span class="fa fa-chevron-right" /></a> + <a class="carousel-control left" t-attf-href="##{id}" data-slide="prev" aria-label="Previous" title="Previous"><span class="fa fa-chevron-left"/></a> + <a class="carousel-control right" t-attf-href="##{id}" data-slide="next" aria-label="Next" title="Next"><span class="fa fa-chevron-right"/></a> </div> </t> @@ -43,14 +43,14 @@ ======================================================================== --> <t t-name="website.gallery.slideshow.lightbox"> - <div class="modal o_technical_modal fade" aria-labbelledby="Image Gallery Dialog" aria-hidden="true"> + <div role="dialog" class="modal o_technical_modal fade" aria-labbelledby="Image Gallery Dialog"> <div class="modal-dialog modal-lg" role="Picture Gallery" t-attf-style="min-width: #{dim.min_width}px ; min-height: #{dim.min_height}px ; max-width: #{dim.max_width}px ; max-height: #{dim.max_height}px ; height: #{dim.height}px ;"> <div class="modal-content"> - <div class="modal-body o_slideshow"> - <button type="button" class="close" data-dismiss="modal" style="position: absolute; right: 12px; top: 10px;"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> + <main class="modal-body o_slideshow"> + <button type="button" class="close" data-dismiss="modal" style="position: absolute; right: 12px; top: 10px;"><span role="img" aria-label="Close">&times;</span><span class="sr-only">Close</span></button> <t t-call="website.gallery.slideshow"></t> - </div> + </main> </div> </div> diff --git a/addons/website/static/src/xml/website.pageProperties.xml b/addons/website/static/src/xml/website.pageProperties.xml index 098bb5533b5..7ee6b1fb485 100644 --- a/addons/website/static/src/xml/website.pageProperties.xml +++ b/addons/website/static/src/xml/website.pageProperties.xml @@ -40,12 +40,12 @@ <div t-name="website.pagesMenu.page_info" class="o_page_management_info"> <form class="form-horizontal"> - <ul class="nav nav-tabs"> - <li class="active"><a data-toggle="tab" href="#basic_page_info">Name</a></li> - <li><a data-toggle="tab" href="#advances_page_info">Publish</a></li> + <ul class="nav nav-tabs" role="tablist"> + <li class="active"><a aria-controls="basic_page_info" data-toggle="tab" href="#basic_page_info" role="tab">Name</a></li> + <li><a aria-controls="advances_page_info" data-toggle="tab" href="#advances_page_info" role="tab">Publish</a></li> </ul> <div class="tab-content mt16"> - <div id="basic_page_info" class="tab-pane fade in active"> + <div role="tabpanel" id="basic_page_info" class="tab-pane fade in active"> <div class="form-group"> <label class="control-label col-sm-3" for="page_name">Page Name</label> <div class="col-sm-9"> @@ -85,7 +85,7 @@ </div> </div> </div> - <div id="advances_page_info" class="tab-pane fade"> + <div role="tabpanel" id="advances_page_info" class="tab-pane fade"> <div class="form-group"> <label class="control-label col-sm-3" for="is_menu">Show in Top Menu</label> <div class="col-sm-2"> @@ -111,7 +111,7 @@ <div class="form-group"> <label class="control-label col-sm-3" for="is_indexed"> Indexed - <i class="fa fa-question-circle-o" title="Hide this page from search results" aria-hidden="true"></i> + <i class="fa fa-question-circle-o" title="Hide this page from search results" role="img" aria-label="Info"></i> </label> <div class="col-sm-2"> <a> @@ -126,10 +126,10 @@ <label class="control-label col-sm-3" for="is_published">Publish</label> <div class="col-sm-2"> <a> - <label class="o_switch js_publish_btn" for="is_published" > + <button class="o_switch js_publish_btn"> <input type="checkbox" t-att-checked="widget.page.website_published ? true : undefined" id="is_published"/> <span/> - </label> + </button> </a> </div> </div> @@ -139,7 +139,7 @@ <div class='input-group date' id='date_publish_container'> <input type='text' class="form-control" name="date_publish" id="date_publish" /> <span class="input-group-addon"> - <span class="fa fa-calendar"></span> + <span class="fa fa-calendar" role="img" aria-label="Publish date" title="Publish date"></span> </span> </div> </div> diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml index 7afd4ad32e9..08137872596 100644 --- a/addons/website/static/src/xml/website.seo.xml +++ b/addons/website/static/src/xml/website.seo.xml @@ -87,7 +87,7 @@ </t> <t t-name="website.seo_tip"> - <div t-attf-class="alert alert-#{ widget.type }"> + <div t-attf-class="alert alert-#{ widget.type }" role="alert"> <t t-raw="widget.message"/> </div> </t> diff --git a/addons/website/static/src/xml/website.share.xml b/addons/website/static/src/xml/website.share.xml index 832dc9698a8..b534f6e9cc7 100644 --- a/addons/website/static/src/xml/website.share.xml +++ b/addons/website/static/src/xml/website.share.xml @@ -4,7 +4,7 @@ <div class="row clearfix" style='font-size:16px'> <div class="col-xs-12 css_editable_mode_hidden"> <t t-foreach="medias" t-as="media"> - <a style="cursor: pointer" t-attf-class="fa-stack fa-lg share #{media}"> + <a style="cursor: pointer" t-attf-class="fa-stack fa-lg share #{media}" t-att-aria-label="media" t-att-title="media"> <span class="fa fa-square fa-stack-2x"></span> <span t-attf-class="oe_social_#{media} fa fa-#{media} fa-stack-1x fa-inverse"></span> </a> diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml index bc042547176..bdd5aa42941 100644 --- a/addons/website/static/src/xml/website.xml +++ b/addons/website/static/src/xml/website.xml @@ -1,14 +1,14 @@ <?xml version="1.0" encoding="UTF-8"?> <templates id="template" xml:space="preserve"> <t t-name="website.prompt"> - <div class="modal o_technical_modal" tabindex="-1" role="dialog" aria-hidden="true"> + <div role="dialog" class="modal o_technical_modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> - <div class="modal-header" t-if="window_title"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <header class="modal-header" t-if="window_title"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button> <h3 class="modal-title"><t t-esc="window_title"/></h3> - </div> - <div class="modal-body"> + </header> + <main class="modal-body"> <form class="form-horizontal" role="form" t-att-id="id"> <div class="form-group mb0"> <label for="page-name" class="col-sm-3 control-label"> @@ -21,11 +21,11 @@ </div> </div> </form> - </div> - <div class="modal-footer"> + </main> + <footer class="modal-footer"> <button type="button" class="btn btn-sm btn-primary btn-continue">Continue</button> - <button type="button" class="btn btn-sm btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button> - </div> + <button type="button" class="btn btn-sm btn-default" data-dismiss="modal" aria-label="Cancel">Cancel</button> + </footer> </div> </div> </div> diff --git a/addons/website/views/res_config_settings_views.xml b/addons/website/views/res_config_settings_views.xml index b2d1e0598c7..b25ba33a4b8 100644 --- a/addons/website/views/res_config_settings_views.xml +++ b/addons/website/views/res_config_settings_views.xml @@ -15,13 +15,13 @@ <div class="row mt16 o_settings_container" id="webmaster_settings"> <div class="col-xs-12 col-md-6 o_setting_box" id="domain_setting"> <div class="o_setting_right_pane"> - <label string="Website Title"/> + <span class="o_form_label">Website Title</span> <div class="text-muted"> Name and favicon of your website </div> <div class="content-group"> <div class="row mt16"> - <label class="col-md-3 o_light_label" string="Name"/> + <label class="col-md-3 o_light_label" string="Name" for="website_name"/> <field name="website_name"/> </div> <div class="row"> @@ -119,7 +119,7 @@ </div> </div> <div attrs="{'invisible': [('has_google_maps', '=', False)]}"> - <a class="btn-link fa fa-arrow-right" target="_blank" + <a role="button" class="btn-link fa fa-arrow-right" target="_blank" href="https://console.developers.google.com/flows/enableapi?apiid=maps_backend,static_maps_backend&keyType=CLIENT_SIDE&reusekey=true"> Create a Google Project and Get a Key </a> diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml index f720fc8e40e..c65c753ca44 100644 --- a/addons/website/views/snippets.xml +++ b/addons/website/views/snippets.xml @@ -27,7 +27,7 @@ <div class="carousel-content col-md-4 col-md-offset-1 mt64"> <h2>Your Slide Title</h2> <h4>Click to customize this text</h4> - <p><a href="/contactus" class="btn btn-warning btn-large">Contact us</a></p> + <p><a role="button" href="/contactus" class="btn btn-warning btn-large">Contact us</a></p> </div> <div class="carousel-img col-md-6 col-md-offset-1 hidden-sm hidden-xs"> <img class="img-responsive" src="/web/image/website.s_banner_default_image" alt="Slider Odoo Image"/> @@ -36,8 +36,8 @@ </div> </div> </div> - <div class="carousel-control left hidden" data-target="#myCarousel" data-slide="prev" style="width: 10%"><i class="fa fa-chevron-left"></i></div> - <div class="carousel-control right hidden" data-target="#myCarousel" data-slide="next" style="width: 10%"><i class="fa fa-chevron-right"></i></div> + <div class="carousel-control left hidden" data-target="#myCarousel" data-slide="prev" style="width: 10%" role="img" aria-label="Previous" title="Previous"><i class="fa fa-chevron-left"></i></div> + <div class="carousel-control right hidden" data-target="#myCarousel" data-slide="next" style="width: 10%" role="img" aria-label="Next" title="Next"><i class="fa fa-chevron-right"></i></div> </div> </template> @@ -94,7 +94,7 @@ <div class="col-md-offset-1 col-md-8"> <h1>Sell Online. Easily.</h1> <p>Write one sentence to convince visitor about your message.</p> - <a class="btn btn-warning btn-lg" href="/contactus">Contact us</a> + <a role="button" class="btn btn-warning btn-lg" href="/contactus">Contact us</a> </div> </div> </div> @@ -148,21 +148,21 @@ <div class="container"> <div class="row"> <div class="col-md-4 text-center"> - <span class="fa fa-suitcase fa-5x"></span> + <span class="fa fa-suitcase fa-5x" role="img" aria-label="Suitcase" title="Suitcase"></span> <div> <h3 class="mt8 mb0">First Feature</h3> <p class="text-muted">Tell what's the value for the<br/>customer for this feature.</p> </div> </div> <div class="col-md-4 text-center"> - <span class="fa fa-lock fa-5x"></span> + <span class="fa fa-lock fa-5x" role="img" aria-label="Lock" title="Lock"></span> <div> <h3 class="mt8 mb0">Second Feature</h3> <p class="text-muted">Write what the customer would like to know,<br/>not what you want to show.</p> </div> </div> <div class="col-md-4 text-center"> - <span class="fa fa-heart fa-5x"></span> + <span class="fa fa-heart fa-5x" role="img" aria-label="Heart" title="Heart"></span> <div> <h3 class="mt8 mb0">Third Feature</h3> <p class="text-muted">A small explanation of this great<br/>feature, in clear words.</p> @@ -274,20 +274,20 @@ <div class="oe_share s_share"> <h3> <span>Share</span> - <a target="_Blank" class="oe_share_facebook" href="https://www.facebook.com/sharer/sharer.php?u={url}"><i class="fa fa-facebook-square"></i></a> - <a target="_Blank" class="oe_share_twitter" href="https://twitter.com/intent/tweet?text={title}&url={url}"><i class="fa fa-twitter"></i></a> - <a target="_Blank" class="oe_share_linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}&"><i class="fa fa-linkedin"></i></a> - <a target="_Blank" class="oe_share_google" href="https://plus.google.com/share?url={url}"><i class="fa fa-google-plus-square"></i></a> - <a href="mailto:?body={url}&subject={title}"><i class="fa fa-envelope-o"></i></a> + <a target="_Blank" class="oe_share_facebook" href="https://www.facebook.com/sharer/sharer.php?u={url}" aria-label="Facebook" title="Facebook"><i class="fa fa-facebook-square"></i></a> + <a target="_Blank" class="oe_share_twitter" href="https://twitter.com/intent/tweet?text={title}&url={url}" aria-label="Twitter" title="Twitter"><i class="fa fa-twitter"></i></a> + <a target="_Blank" class="oe_share_linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}&" aria-label="LinkedIn" title="LinkedIn"><i class="fa fa-linkedin"></i></a> + <a target="_Blank" class="oe_share_google" href="https://plus.google.com/share?url={url}" aria-label="Google Plus" title="Google Plus"><i class="fa fa-google-plus-square"></i></a> + <a href="mailto:?body={url}&subject={title}" aria-label="Email" title="Email"><i class="fa fa-envelope-o"></i></a> </h3> </div> </template> <template id="s_facebook_page" name="Facebook Page"> <div class="o_facebook_page"> - <div class="o_facebook_alert alert alert-info"> + <div class="o_facebook_alert alert alert-info" role="status"> <span class="o_add_facebook_page"> - <i class="fa fa-plus-circle"/> Add Facebook Page + <span class="fa fa-plus-circle"> Add Facebook Page</span> </span> </div> </div> @@ -296,7 +296,7 @@ <template id="s_image_gallery" name="Image Gallery"> <section class="o_gallery o_spc-medium o_slideshow s_image_gallery" data-columns="3" style="height: 500px; overflow: hidden;"> <div class="container"> - <div class="alert alert-info css_editable_mode_display text-center" ><span class="o_add_images" style="cursor: pointer;"><i class="fa fa-plus-circle"/> Add Images</span></div> + <div class="alert alert-info css_editable_mode_display text-center" role="status"><span class="o_add_images" style="cursor: pointer;"><span class="fa fa-plus-circle"> Add Images</span></span></div> </div> </section> </template> @@ -328,7 +328,7 @@ <p class="text-muted"> <i>Instant setup, satisfied or reimbursed.</i> </p> - <a href="/contactus" class="btn btn-primary btn-lg">Order now</a> + <a role="button" href="/contactus" class="btn btn-primary btn-lg">Order now</a> </div> </div> </div> @@ -350,7 +350,7 @@ </ul> <div class="panel-footer text-center"> <p class="text-muted"><i>Instant setup, satisfied or reimbursed.</i></p> - <a href="/contactus" class="btn btn-primary btn-lg">Order now</a> + <a role="button" href="/contactus" class="btn btn-primary btn-lg">Order now</a> </div> </div> </div> @@ -372,7 +372,7 @@ </ul> <div class="panel-footer text-center"> <p class="text-muted"><i>Instant setup, satisfied or reimbursed.</i></p> - <a href="/contactus" class="btn btn-primary btn-lg">Contact us</a> + <a role="button" href="/contactus" class="btn btn-primary btn-lg">Contact us</a> </div> </div> </div> @@ -391,7 +391,7 @@ <div class="col-md-6 pt16 pb16"> <div class="row s_no_resize_cols"> <div class="col-md-4"> - <img src="/web/image/website.s_company_team_image_1" class="img-responsive img-circle center-block shadow"/> + <img alt="Company team" src="/web/image/website.s_company_team_image_1" class="img-responsive img-circle center-block shadow"/> </div> <div class="col-md-8"> <h4>Tony Fred, CEO</h4> @@ -406,7 +406,7 @@ <div class="col-md-6 pt16 pb16"> <div class="row s_no_resize_cols"> <div class="col-md-4"> - <img src="/web/image/website.s_company_team_image_2" class="img-responsive img-circle center-block shadow"/> + <img alt="Company team" src="/web/image/website.s_company_team_image_2" class="img-responsive img-circle center-block shadow"/> </div> <div class="col-md-8"> <h4>Mich Stark, COO</h4> @@ -421,7 +421,7 @@ <div class="col-md-6 pt16 pb16"> <div class="row s_no_resize_cols"> <div class="col-md-4"> - <img src="/web/image/website.s_company_team_image_3" class="img-responsive img-circle center-block shadow"/> + <img alt="Company team" src="/web/image/website.s_company_team_image_3" class="img-responsive img-circle center-block shadow"/> </div> <div class="col-md-8"> <h4>Aline Turner, CTO</h4> @@ -436,7 +436,7 @@ <div class="col-md-6 pt16 pb16"> <div class="row s_no_resize_cols"> <div class="col-md-4"> - <img src="/web/image/website.s_company_team_image_4" class="img-responsive img-circle center-block shadow"/> + <img alt="Company team" src="/web/image/website.s_company_team_image_4" class="img-responsive img-circle center-block shadow"/> </div> <div class="col-md-8"> <h4>Iris Joe, CFO</h4> @@ -465,7 +465,7 @@ </p> </div> <div class="col-md-3"> - <a href="/contactus" class="btn btn-primary btn-lg pull-right mt8"> + <a role="button" href="/contactus" class="btn btn-primary btn-lg pull-right mt8" aria-label="Contact Us Now" title=""> <span>Contact Us Now</span> <i class="fa fa-chevron-right"></i> </a> @@ -577,17 +577,17 @@ <h5 class="text-muted">Add a great slogan</h5> </div> <div class="col-md-12"> - <span style="min-width: 45px" class="fa fa-2x fa-comment pull-left mb16"></span> + <span style="min-width: 45px" class="fa fa-2x fa-comment pull-left mb16" role="img" aria-label="Change icons" title="Change icons"></span> <h4 class="mt0 mb0">Change Icons</h4> <p>Click on the icon to adapt it to your feature</p><br/> </div> <div class="col-md-12"> - <span style="min-width: 45px" class="fa fa-2x fa-columns pull-left mb16"></span> + <span style="min-width: 45px" class="fa fa-2x fa-columns pull-left mb16" role="img" aria-label="Duplicate" title="Duplicate"></span> <h4 class="mt0 mb0">Duplicate</h4> <p>Duplicate blocks to add more features.</p><br/> </div> <div class="col-md-12"> - <span style="min-width: 45px" class="fa fa-2x fa-user pull-left mb16"></span> + <span style="min-width: 45px" class="fa fa-2x fa-user pull-left mb16" role="img" aria-label="Delete blocks" title="Delete blocks"></span> <h4 class="mt0 mb0">Delete Blocks</h4> <p>Select and delete blocks to remove some features.</p><br/> </div> @@ -600,17 +600,17 @@ <h5 class="text-muted">Add a great slogan</h5> </div> <div class="col-md-12"> - <span style="min-width: 45px" class="fa fa-2x fa-magic pull-left mb16"></span> + <span style="min-width: 45px" class="fa fa-2x fa-magic pull-left mb16" role="img" aria-label="Great value" title="Great value"></span> <h4 class="mt0 mb0">Great Value</h4> <p>Tell features the visitor would like to know, not what you'd like to say.</p> </div> <div class="col-md-12"> - <span style="min-width: 45px" class="fa fa-2x fa-bolt pull-left mb16"></span> + <span style="min-width: 45px" class="fa fa-2x fa-bolt pull-left mb16" role="img" aria-label="Change background" title="Change background"></span> <h4 class="mt0 mb0">Change Background</h4> <p>From the main container, you can change the background to highlight features.</p> </div> <div class="col-md-12"> - <span style="min-width: 45px" class="fa fa-2x fa-picture-o pull-left mb16"></span> + <span style="min-width: 45px" class="fa fa-2x fa-picture-o pull-left mb16" role="img" aria-label="Sample images" title="Change background"></span> <h4 class="mt0 mb0">Sample images</h4> <p>All these icons are licensed under creative commons so that you can use them.</p> </div> @@ -688,7 +688,7 @@ <div id="o_scroll"> <div id="snippet_structure" class="o_panel"> <div class="o_panel_header"> - <i class="fa fa-th-large"/> Structure + <span class="fa fa-th-large"> Structure</span> </div> <div class="o_panel_body"> <t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/blocks/block_title.png"/> @@ -706,7 +706,7 @@ <div id="snippet_feature" class="o_panel"> <div class="o_panel_header"> - <i class="fa fa-diamond"/> Feature + <span class="fa fa-diamond"> Feature</span> </div> <div class="o_panel_body"> <t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/blocks/block_image_gallery.png"/> @@ -721,7 +721,7 @@ <div id="snippet_effect" class="o_panel"> <div class="o_panel_header"> - <i class="fa fa-magic icon-fix"/> Effect + <span class="fa fa-magic icon-fix"> Effect</span> </div> <div class="o_panel_body"> <t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/blocks/block_parallax.png"/> @@ -731,7 +731,7 @@ <div id="snippet_content" class="o_panel"> <div class="o_panel_header"> - <i class="fa fa-indent"/> Inner content + <span class="fa fa-indent"> Inner content</span> </div> <div class="o_panel_body"> <t t-snippet="website.s_well" t-thumbnail="/website/static/src/img/blocks/block_well.png"/> @@ -764,58 +764,58 @@ <t t-call="web_editor.snippet_options"/> <div data-js='gallery' data-selector=".o_gallery"> - <li data-add-images="true" data-no-preview="true"><a href="#"><i class="fa fa-plus-circle"/>Add images</a></li> - <li data-remove-all-images="true" data-no-preview="true"><a href="#"><i class="fa fa-trash"/>Remove all images</a></li> + <li data-add-images="true" data-no-preview="true"><a href="#"><span class="fa fa-plus-circle">Add images</span></a></li> + <li data-remove-all-images="true" data-no-preview="true"><a href="#"><span class="fa fa-trash">Remove all images</span></a></li> <li class="separator"/> <li class="dropdown-submenu"> - <a tabindex="-2" href="#"><i class="fa fa-magic"/>Mode</a> - <ul class="dropdown-menu"> - <li data-mode="nomode"><a href="#">Float</a></li> - <li data-mode="masonry"><a href="#">Masonry</a></li> - <li data-mode="grid"><a href="#">Grid</a></li> - <li data-mode="slideshow"><a href="#">Slideshow</a></li> + <a tabindex="-2" href="#"><span class="fa fa-magic">Mode</span></a> + <ul class="dropdown-menu" role="menu"> + <li data-mode="nomode"><a role="menuitem" href="#">Float</a></li> + <li data-mode="masonry"><a role="menuitem" href="#">Masonry</a></li> + <li data-mode="grid"><a role="menuitem" href="#">Grid</a></li> + <li data-mode="slideshow"><a role="menuitem" href="#">Slideshow</a></li> </ul> </li> <li class="dropdown-submenu"> - <a tabindex="-2" href="#"><i class="fa fa-clock-o"/>Slideshow speed</a> - <ul class="dropdown-menu"> - <li data-interval="1000"><a href="#">1s</a></li> - <li data-interval="2000"><a href="#">2s</a></li> - <li data-interval="3000"><a href="#">3s</a></li> - <li data-interval="5000"><a href="#">5s</a></li> - <li data-interval="10000"><a href="#">10s</a></li> - <li data-interval="0"><a href="#">Disable autoplay</a></li> + <a tabindex="-2" href="#"><span class="fa fa-clock-o">Slideshow speed</span></a> + <ul class="dropdown-menu" role="menu"> + <li data-interval="1000"><a role="menuitem" href="#">1s</a></li> + <li data-interval="2000"><a role="menuitem" href="#">2s</a></li> + <li data-interval="3000"><a role="menuitem" href="#">3s</a></li> + <li data-interval="5000"><a role="menuitem" href="#">5s</a></li> + <li data-interval="10000"><a role="menuitem" href="#">10s</a></li> + <li data-interval="0"><a role="menuitem" href="#">Disable autoplay</a></li> </ul> </li> <li class="dropdown-submenu"> - <a tabindex="-2" href="#"><i class="fa fa-th"/>Columns</a> - <ul class="dropdown-menu"> - <li data-columns="1"><a href="#">1</a></li> - <li data-columns="2"><a href="#">2</a></li> - <li data-columns="3"><a href="#">3</a></li> - <li data-columns="4"><a href="#">4</a></li> - <li data-columns="6"><a href="#">6</a></li> - <li data-columns="12"><a href="#">12</a></li> + <a tabindex="-2" href="#"><span class="fa fa-th">Columns</span></a> + <ul class="dropdown-menu" role="menu"> + <li data-columns="1"><a role="menuitem" href="#">1</a></li> + <li data-columns="2"><a role="menuitem" href="#">2</a></li> + <li data-columns="3"><a role="menuitem" href="#">3</a></li> + <li data-columns="4"><a role="menuitem" href="#">4</a></li> + <li data-columns="6"><a role="menuitem" href="#">6</a></li> + <li data-columns="12"><a role="menuitem" href="#">12</a></li> </ul> </li> <li class="dropdown-submenu"> - <a tabindex="-2" href="#"><i class="fa fa-arrows-h"/>Images spacing</a> + <a tabindex="-2" href="#"><span class="fa fa-arrows-h">Images spacing</span></a> - <ul class="dropdown-menu"> - <li data-select-class="o_spc-none"><a href="#">None</a></li> - <li data-select-class="o_spc-small"><a href="#">Small</a></li> - <li data-select-class="o_spc-medium"><a href="#">Medium</a></li> - <li data-select-class="o_spc-big"><a href="#">Big</a></li> + <ul class="dropdown-menu" role="menu"> + <li data-select-class="o_spc-none"><a role="menuitem" href="#">None</a></li> + <li data-select-class="o_spc-small"><a role="menuitem" href="#">Small</a></li> + <li data-select-class="o_spc-medium"><a role="menuitem" href="#">Medium</a></li> + <li data-select-class="o_spc-big"><a role="menuitem" href="#">Big</a></li> </ul> </li> <li class="dropdown-submenu"> - <a tabindex="-2" href="#"><i class="fa fa-paint-brush"/>Styling</a> - <ul class="dropdown-menu"> - <li data-styling=""><a href="#">Square</a></li> - <li data-styling="img-rounded"><a href="#">Rounded corners</a></li> - <li data-styling="img-thumbnail"><a href="#">Thumbnails</a></li> - <li data-styling="img-circle"><a href="#">Circle</a></li> - <li data-styling="shadow"><a href="#">Shadows</a></li> + <a tabindex="-2" href="#"><span class="fa fa-paint-brush">Styling</span></a> + <ul class="dropdown-menu" role="menu"> + <li data-styling=""><a role="menuitem" href="#">Square</a></li> + <li data-styling="img-rounded"><a role="menuitem" href="#">Rounded corners</a></li> + <li data-styling="img-thumbnail"><a role="menuitem" href="#">Thumbnails</a></li> + <li data-styling="img-circle"><a role="menuitem" href="#">Circle</a></li> + <li data-styling="shadow"><a role="menuitem" href="#">Shadows</a></li> </ul> </li> <li class="separator"/> @@ -824,14 +824,14 @@ <div data-js="background" data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax, .s_banner .carousel-content"> <li data-choose-image="true" data-no-preview="true"> - <a tabindex="-1" href="#"><i class="fa fa-picture-o"/>Choose Background Image</a> + <a tabindex="-1" href="#"><span class="fa fa-picture-o">Choose Background Image</span></a> </li> </div> <div data-js="background_position" data-selector="section, :not(.o_gallery > .container) > .carousel, .s_banner .carousel-content"> <li class="background_position_li" data-background-position="true" data-no-preview="true"> - <a tabindex="-1" href="#"><i class="fa fa-arrows"/>Background Image Sizing</a> + <a tabindex="-1" href="#"><span class="fa fa-arrows">Background Image Sizing</span></a> </li> </div> @@ -839,8 +839,8 @@ data-selector="section, :not(.o_gallery > .container) > .carousel" data-exclude=".parallax"> <li class="dropdown-submenu"> - <a tabindex="-1" href="#"><i class="fa fa-eyedropper"/>Background Color</a> - <ul class="dropdown-menu"> + <a tabindex="-1" href="#"><span class="fa fa-eyedropper">Background Color</span></a> + <ul class="dropdown-menu" role="menu"> <li></li> </ul> </li> @@ -851,8 +851,8 @@ data-palette-default="transparent_grayscale" data-palette-title="Overlay Color"> <li class="dropdown-submenu"> - <a tabindex="-1" href="#"><i class="fa fa-eyedropper"/>Overlay color</a> - <ul class="dropdown-menu"> + <a tabindex="-1" href="#"><span class="fa fa-eyedropper">Overlay color</span></a> + <ul class="dropdown-menu" role="menu"> <li></li> </ul> </li> @@ -860,12 +860,12 @@ <div data-js='gallery_img' data-selector=".o_gallery img"> <li class="dropdown-submenu"> - <a tabindex="-2" href="#"><i class="fa fa-refresh"/>Re-order</a> - <ul class="dropdown-menu" data-no-preview="true"> - <li data-position="first"><a href="#">Move to first</a></li> - <li data-position="prev"><a href="#">Move to previous</a></li> - <li data-position="next"><a href="#">Move to next</a></li> - <li data-position="last"><a href="#">Move to last</a></li> + <a tabindex="-2" href="#"><span class="fa fa-refresh">Re-order</span></a> + <ul class="dropdown-menu" role="menu" data-no-preview="true"> + <li data-position="first"><a role="menuitem" href="#">Move to first</a></li> + <li data-position="prev"><a role="menuitem" href="#">Move to previous</a></li> + <li data-position="next"><a role="menuitem" href="#">Move to next</a></li> + <li data-position="last"><a role="menuitem" href="#">Move to last</a></li> </ul> </li> </div> @@ -874,18 +874,18 @@ data-selector=":not(.o_gallery > .container) > .carousel"> <li class="divider"></li> <li class="dropdown-submenu"> - <a tabindex="-2" href="#"><i class="fa fa-clock-o"/>Slideshow speed</a> - <ul class="dropdown-menu"> - <li data-interval="1000"><a href="#">1s</a></li> - <li data-interval="2000"><a href="#">2s</a></li> - <li data-interval="3000"><a href="#">3s</a></li> - <li data-interval="5000"><a href="#">5s</a></li> - <li data-interval="10000"><a href="#">10s</a></li> - <li data-interval="0"><a href="#">Disable autoplay</a></li> + <a tabindex="-2" href="#"><span class="fa fa-clock-o">Slideshow speed</span></a> + <ul class="dropdown-menu" role="menu"> + <li data-interval="1000"><a role="menuitem" href="#">1s</a></li> + <li data-interval="2000"><a role="menuitem" href="#">2s</a></li> + <li data-interval="3000"><a role="menuitem" href="#">3s</a></li> + <li data-interval="5000"><a role="menuitem" href="#">5s</a></li> + <li data-interval="10000"><a role="menuitem" href="#">10s</a></li> + <li data-interval="0"><a role="menuitem" href="#">Disable autoplay</a></li> </ul> </li> - <li data-add-slide="true" data-no-preview="true"><a href="#"><i class="fa fa-plus-circle"/>Add Slide</a></li> - <li data-remove-slide="true" data-no-preview="true"><a href="#" ><i class="fa fa-trash-o"/>Remove Slide</a></li> + <li data-add-slide="true" data-no-preview="true"><a href="#"><span class="fa fa-plus-circle">Add Slide</span></a></li> + <li data-remove-slide="true" data-no-preview="true"><a href="#" ><span class="fa fa-trash-o">Remove Slide</span></a></li> </div> <div data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax" @@ -900,14 +900,14 @@ data-target="> * > .row" data-exclude=".s_text_block_image_fw, .s_company_team, .s_big_picture"> <li class="dropdown-submenu"> - <a tabindex="-2" href="#"><i class="fa fa-columns"/>Number of columns</a> - <ul class="dropdown-menu" data-no-preview="true"> - <li data-select-count="1"><a href="#">1</a></li> - <li data-select-count="2"><a href="#">2</a></li> - <li data-select-count="3"><a href="#">3</a></li> - <li data-select-count="4"><a href="#">4</a></li> - <li data-select-count="5"><a href="#">5</a></li> - <li data-select-count="6"><a href="#">6</a></li> + <a tabindex="-2" href="#"><span class="fa fa-columns">Number of columns</span></a> + <ul class="dropdown-menu" role="menu" data-no-preview="true"> + <li data-select-count="1"><a role="menuitem" href="#">1</a></li> + <li data-select-count="2"><a role="menuitem" href="#">2</a></li> + <li data-select-count="3"><a role="menuitem" href="#">3</a></li> + <li data-select-count="4"><a role="menuitem" href="#">4</a></li> + <li data-select-count="5"><a role="menuitem" href="#">5</a></li> + <li data-select-count="6"><a role="menuitem" href="#">6</a></li> </ul> </li> </div> @@ -930,39 +930,39 @@ <div data-selector=".o_image_floating"> <li class="dropdown-submenu"> - <a tabindex="-2" href="#"><i class="fa fa-expand"/>Margin</a> - <ul class="dropdown-menu"> - <li data-select-class="o_margin_xl"><a href="#">Extra-Large</a></li> - <li data-select-class="o_margin_l"><a href="#">Large</a></li> - <li data-select-class="o_margin_m"><a href="#">Medium</a></li> - <li data-select-class="o_margin_s"><a href="#">Small</a></li> - <li data-select-class=""><a href="#">None</a></li> + <a tabindex="-2" href="#"><span class="fa fa-expand">Margin</span></a> + <ul class="dropdown-menu" role="menu"> + <li data-select-class="o_margin_xl"><a role="menuitem" href="#">Extra-Large</a></li> + <li data-select-class="o_margin_l"><a role="menuitem" href="#">Large</a></li> + <li data-select-class="o_margin_m"><a role="menuitem" href="#">Medium</a></li> + <li data-select-class="o_margin_s"><a role="menuitem" href="#">Small</a></li> + <li data-select-class=""><a role="menuitem" href="#">None</a></li> </ul> </li> </div> <div data-selector=".o_image_floating"> <li class="dropdown-submenu"> - <a tabindex="-2" href="#"><i class="fa fa-magnet"/>Float</a> - <ul class="dropdown-menu" data-no-preview="true"> - <li data-select-class="pull-left"><a href="#">Left</a></li> - <li data-select-class="pull-right"><a href="#">Right</a></li> + <a tabindex="-2" href="#"><span class="fa fa-magnet">Float</span></a> + <ul class="dropdown-menu" role="menu" data-no-preview="true"> + <li data-select-class="pull-left"><a role="menuitem" href="#">Left</a></li> + <li data-select-class="pull-right"><a role="menuitem" href="#">Right</a></li> </ul> </li> </div> <div data-js="parallax" data-selector=".parallax"> <li class="dropdown-submenu"> - <a tabindex="-1" href="#"><i class="fa fa-clock-o"/>Scroll Speed</a> - <ul class="dropdown-menu" name="parallax-scroll"> - <li data-scroll="0"><a href="#">No-scroll</a></li> - <li class="separator"/> - <li data-scroll="1"><a href="#">Fixed</a></li> - <li class="separator"/> - <li data-scroll="0.6"><a href="#">Very Slow</a></li> - <li data-scroll="1.2"><a href="#">Slow</a></li> - <li data-scroll="1.6"><a href="#">Fast</a></li> - <li data-scroll="2"><a href="#">Very Fast</a></li> + <a tabindex="-1" href="#"><span class="fa fa-clock-o">Scroll Speed</span></a> + <ul class="dropdown-menu" role="menu" name="parallax-scroll"> + <li data-scroll="0"><a role="menuitem" href="#">No-scroll</a></li> + <li class="separator" role="separator"/> + <li data-scroll="1"><a role="menuitem" href="#">Fixed</a></li> + <li class="separator" role="separator"/> + <li data-scroll="0.6"><a role="menuitem" href="#">Very Slow</a></li> + <li data-scroll="1.2"><a role="menuitem" href="#">Slow</a></li> + <li data-scroll="1.6"><a role="menuitem" href="#">Fast</a></li> + <li data-scroll="2"><a role="menuitem" href="#">Very Fast</a></li> </ul> </li> </div> @@ -974,7 +974,7 @@ <div data-js="facebookPage" data-selector=".o_facebook_page"> <li data-fb-page-options="true" data-no-preview="true"> - <a href="#"><i class="fa fa-facebook"/>Options</a> + <a href="#"><span class="fa fa-facebook">Options</span></a> </li> </div> diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml index 9c5c213acbe..48d02464655 100644 --- a/addons/website/views/website_navbar_templates.xml +++ b/addons/website/views/website_navbar_templates.xml @@ -10,13 +10,13 @@ <ul id="oe_applications"> <li class="dropdown active"> <a class="dropdown full" data-toggle="dropdown" href="#"> - <i class="fa fa-th-large"/> WEBSITE <b class="caret"/> + <span class="fa fa-th-large"> WEBSITE </span><b class="caret"/> </a> - <ul class="dropdown-menu"> + <ul class="dropdown-menu" role="menu"> <li t-as="menu" t-foreach="menu_data['children']"> <t t-set="debug_param" t-value="'?&debug=' if debug else ''"/> - <a t-att-class="'oe_menu_toggler' if menu.get('children') else 'oe_menu_leaf'" t-att-data-action-id="menu['action'] and menu['action'].split(',')[1] or None" t-att-data-action-model="menu['action'] and menu['action'].split(',')[0] or None" t-att-data-menu="menu['id']" t-att-data-menu-xmlid="menu.get('xmlid')" t-att-href="'/web%s#menu_id=%s&action=%s' % (debug_param, menu['id'], menu['action'] and menu['action'].split(',')[1] or '')"> - <i t-attf-class="fa #{menu.get('icon')} fa-lg fa-fw" t-if="menu.get('icon')"/> + <a role="menuitem" t-att-class="'oe_menu_toggler' if menu.get('children') else 'oe_menu_leaf'" t-att-data-action-id="menu['action'] and menu['action'].split(',')[1] or None" t-att-data-action-model="menu['action'] and menu['action'].split(',')[0] or None" t-att-data-menu="menu['id']" t-att-data-menu-xmlid="menu.get('xmlid')" t-att-href="'/web%s#menu_id=%s&action=%s' % (debug_param, menu['id'], menu['action'] and menu['action'].split(',')[1] or '')"> + <i t-attf-class="fa #{menu.get('icon')} fa-lg fa-fw" t-if="menu.get('icon')" role="img" aria-label="Menu" title="Menu"/> <span class="oe_menu_text"> <t t-esc="menu['name']"/> </span> @@ -26,34 +26,34 @@ </li> </ul> - <button type="button" class="fa fa-bars pull-right visible-xs-block o_mobile_menu_toggle"/> + <button type="button" class="fa fa-bars pull-right visible-xs-block o_mobile_menu_toggle" aria-label="Menu" title="Menu"/> <ul class="o_menu_sections" groups="website.group_website_designer"> <!-- Content --> <li t-if="editable" class="dropdown" id="content-menu"> <a id="content-menu-button" class="dropdown-toggle waves" data-toggle="dropdown" href="#">Content</a> <ul class="dropdown-menu" role="menu"> - <li><a data-action="edit_menu" href="#" title="Edit Top Menu">Edit Menu</a></li> - <li><a href="/website/pages" title="Manage Your Website Pages">Manage Pages</a></li> + <li><a role="menuitem" data-action="edit_menu" href="#" title="Edit Top Menu">Edit Menu</a></li> + <li><a role="menuitem" href="/website/pages" title="Manage Your Website Pages">Manage Pages</a></li> <li t-if="deletable" role="separator" class="divider"></li> - <li t-if="deletable"><a href="#" data-action="page_properties">Page Properties</a></li> + <li t-if="deletable"><a role="menuitem" href="#" data-action="page_properties">Page Properties</a></li> </ul> </li> <!-- Customize --> <li class="dropdown" id="customize-menu"> <a class="dropdown-toggle waves" data-toggle="dropdown" href="#">Customize</a> <ul class="dropdown-menu" role="menu"> - <li id="theme_customize"><a href="#" data-action="customize_theme">Customize Theme</a></li> - <li id="html_editor"><a href="#" data-action="ace">HTML/CSS Editor</a></li> - <li id="install_apps"><a href="/web#action=website.action_website_configuration">Settings</a></li> - <li class="divider"/> + <li id="theme_customize"><a role="menuitem" href="#" data-action="customize_theme">Customize Theme</a></li> + <li id="html_editor"><a role="menuitem" href="#" data-action="ace">HTML/CSS Editor</a></li> + <li id="install_apps"><a role="menuitem" href="/web#action=website.action_website_configuration">Settings</a></li> + <li class="divider" role="separator"/> </ul> </li> <!-- Promote --> <li class="dropdown" id="promote-menu"> <a class="dropdown-toggle waves" data-toggle="dropdown" href="#">Promote</a> <ul class="dropdown-menu oe_promote_menu" role="menu"> - <li><a data-action="promote-current-page" href="#" title="Promote page on the web">Optimize SEO</a></li> + <li><a role="menuitem" data-action="promote-current-page" href="#" title="Promote page on the web">Optimize SEO</a></li> </ul> </li> </ul> @@ -61,38 +61,38 @@ <ul class="o_menu_systray hidden-xs" groups="website.group_website_publisher"> <li t-if="'website_published' in main_object.fields_get()" t-attf-class="js_publish_management #{main_object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-id="main_object.id" t-att-data-object="main_object._name" t-att-data-controller="publish_controller"> <a> - <label class="o_switch o_switch_danger js_publish_btn" for="id" > + <button class="o_switch o_switch_danger js_publish_btn"> <input type="checkbox" t-att-checked="main_object.website_published" id="id"/> <span/> <span class="css_publish">Unpublished</span> <span class="css_unpublish">Published</span> - </label> + </button> </a> </li> <!-- Mobile preview --> <li class="o_mobile_preview" id="mobile-menu"> - <a data-action="show-mobile-preview" href="#"><span title="Mobile preview" class="fa fa-mobile"/></a> + <a data-action="show-mobile-preview" href="#"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-mobile"/></a> </li> <!-- Page Edition --> <li class="o_new_content_menu" id="new-content-menu"> - <a href="#"><span class="fa fa-plus"/>New</a> + <a href="#"><span class="fa fa-plus">New</span></a> <div id="o_new_content_menu_choices" class="o_hidden"> <ul> - <li groups="website.group_website_designer"><a href="#" data-action="new_page"><i class="fa fa-file-o"/><p>New Page</p></a></li> + <li groups="website.group_website_designer"><a href="#" data-action="new_page" aria-label="New page" title="New page"><i class="fa fa-file-o"/><p>New Page</p></a></li> </ul> </div> </li> <li t-if="not translatable" id="edit-page-menu"> - <a data-action="edit" href="#"><span class="fa fa-pencil"/>Edit</a> + <a data-action="edit" href="#"><span class="fa fa-pencil">Edit</span></a> </li> <li t-if="'website_published' in main_object.fields_get() and main_object._name != 'website.page'"> - <a class="btn btn-primary btn-xs dropdown-toggle css_edit_dynamic" data-toggle="dropdown"> + <a role="button" class="btn btn-primary btn-xs dropdown-toggle css_edit_dynamic" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </a> <ul class="dropdown-menu" role="menu"> <li id="edit-in-backend"> - <a style="text-align: left;" t-attf-href="/web#return_label=Website&view_type=form&model=#{main_object._name}&id=#{main_object.id}&action=#{action}" + <a role="menuitem" style="text-align: left;" t-attf-href="/web#return_label=Website&view_type=form&model=#{main_object._name}&id=#{main_object.id}&action=#{action}" class="btn btn-link btn-xs" title='Edit in backend'>Edit in backend</a> </li> </ul> diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml index 6d84577b4d5..7f8efab4704 100644 --- a/addons/website/views/website_templates.xml +++ b/addons/website/views/website_templates.xml @@ -70,7 +70,7 @@ <li t-if="submenu.is_visible and not submenu.child_id.filtered(lambda menu: menu.is_visible)" t-att-class=" 'active' if submenu.clean_url() and unslug_url(request.httprequest.path) == unslug_url(submenu.clean_url()) else None "> - <a t-att-href="submenu.clean_url()" t-ignore="true" t-att-target="'_blank' if submenu.new_window else None"> + <a role="menuitem" t-att-href="submenu.clean_url()" t-ignore="true" t-att-target="'_blank' if submenu.new_window else None"> <span t-field="submenu.name"/> </a> </li> @@ -234,7 +234,7 @@ <template id="layout_logo_show" inherit_id="website.layout" customize_show="True" name="Show Logo"> <xpath expr="//header//a[hasclass('navbar-brand')]" position="replace"> <a href="/" class="navbar-brand logo"> - <span t-field="res_company.logo" t-options="{'widget': 'image'}" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name" /> + <span t-field="res_company.logo" t-options="{'widget': 'image'}" role="img" t-att-aria-label="'Logo of %s' % res_company.name" t-att-title="res_company.name" /> </a> </xpath> </template> @@ -336,8 +336,8 @@ <li groups="website.group_website_publisher"> <t t-set="url_return" t-value="url_for('', '[lang]') + '?' + keep_query()"/> <a t-attf-href="/web#action=base.action_view_base_language_install&website_id=#{website.id if website else ''}&url_return=#{url_return}"> - <i class="fa fa-plus-circle"/> - Add a language... + <span class="fa fa-plus-circle"> + Add a language...</span> </a> </li> </ul> @@ -355,7 +355,7 @@ <ul class="dropdown-menu" role="menu" t-att-aria-labelledby="'dopprod-%s' % object.id"> <t t-raw="0"/> <li t-if="publish_edit"> - <a t-attf-href="/web#return_label=Website&view_type=form&model=#{object._name}&id=#{object.id}&action=#{action}" + <a role="menuitem" t-attf-href="/web#return_label=Website&view_type=form&model=#{object._name}&id=#{object.id}&action=#{action}" title='Edit in backend'>Edit</a> </li> </ul> @@ -402,12 +402,12 @@ - 'loading': on the container/modal when the new css is loading --> <template id="website.theme_customize" name="Theme Modal for Customization"> - <div id="theme_customize_modal" class="modal fade"> + <div role="dialog" id="theme_customize_modal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> - <div class="modal-header text-center"> + <header class="modal-header text-center"> <h4 class="modal-title">Please install a theme in order to customize your website.</h4> - </div> + </header> </div> </div> </div> @@ -486,8 +486,8 @@ Information about the <t t-esc="res_company.name"/> instance of Odoo, the <a target="_blank" href="https://www.odoo.com">Open Source ERP</a>. </p> - <div class="alert alert-warning alert-dismissable mt16" groups="website.group_website_publisher"> - <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> + <div class="alert alert-warning alert-dismissable mt16" groups="website.group_website_publisher" role="status"> + <button type="button" class="close" data-dismiss="alert" aria-label="Close">&times;</button> <p> Note: To hide this page, uncheck it from the top Customize menu. </p> @@ -578,7 +578,7 @@ <div class="container"> <div class="well mt32"> <p>This page does not exist, but you can create it as you are administrator of this site.</p> - <a class="btn btn-primary js_disable_on_click" t-attf-href="/website/add/#{ path }#{ from_template and '?template=%s' % from_template }">Create Page</a> + <a role="button" class="btn btn-primary js_disable_on_click" t-attf-href="/website/add/#{ path }#{ from_template and '?template=%s' % from_template }">Create Page</a> </div> <div class="text-center text-muted">Edit the content below this line to adapt the default "page not found" page.</div> </div> @@ -739,15 +739,15 @@ </script> </head> <body> - <div id="reset_template_confirmation" class="modal" tabindex="-1" role="dialog" aria-hidden="true" t-ignore="true"> + <div role="dialog" id="reset_template_confirmation" class="modal" tabindex="-1" aria-hidden="true" t-ignore="true"> <div class="modal-dialog"> <form class="form-horizontal" role="form"> <div class="modal-content"> - <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <header class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button> <h3 class="modal-title">Reset templates</h3> - </div> - <div class="modal-body"> + </header> + <main class="modal-body"> <div class="form-group mb0"> <label for="page-name" class="col-sm-9"> <p>The selected templates will be reset to their factory settings.</p> @@ -757,11 +757,11 @@ <input type="text" class="form-control" required="required" placeholder="yes"/> </div> </div> - </div> - <div class="modal-footer"> + </main> + <footer class="modal-footer"> <input type="submit" value="Confirm" class="btn btn-primary"/> - <button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> - </div> + <button type="button" class="btn" data-dismiss="modal" aria-label="Cancel">Cancel</button> + </footer> </div> </form> </div> @@ -785,7 +785,7 @@ <h1 class="container mt32"><t t-esc="status_code"/>: <t t-esc="status_message"/></h1> </div> <div class="container" t-if="views"> - <div class="alert alert-danger" t-if="qweb_exception and editable"> + <div class="alert alert-danger" t-if="qweb_exception and editable" role="alert"> <h4>Template fallback</h4> <p>An error occured while rendering the template <code t-esc="qweb_exception.qweb['template']"/>.</p> <p>If this error is caused by a change of yours in the templates, you have the possibility to reset one or more templates to their <strong>factory settings</strong>.</p> @@ -849,12 +849,12 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml "widget": "contact", "fields": ["name", "address", "phone", "mobile", "email"]}'/> <t t-if="not res_company.google_map_img()"> - <span class="fa fa-map-marker fa-fw mt16"/> <a t-att-href="res_company.google_map_link()" target="_BLANK"> Google Maps</a> + <span class="fa fa-map-marker fa-fw mt16" role="img" aria-label="Address" title="Address"/> <a t-att-href="res_company.google_map_link()" target="_BLANK"> Google Maps</a> </t> </address> <t t-if="res_company.google_map_img()"> <a t-att-href="res_company.google_map_link()" target="_BLANK"> - <img class="thumbnail img-responsive" t-att-src="res_company.google_map_img()" /> + <img class="thumbnail img-responsive" t-att-src="res_company.google_map_img()" alt="Google Maps"/> </a> </t> </template> @@ -865,7 +865,7 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml <input type="text" name="search" class="search-query form-control oe_search_box" placeholder="Search..." t-att-value="search" /> </div> <span class="input-group-btn"> - <button type="submit" class="btn btn-default oe_search_button"><i class="fa fa-search"/></button> + <button type="submit" class="btn btn-default oe_search_button" aria-label="Search" title="Search"><i class="fa fa-search"/></button> </span> </div> </template> @@ -888,13 +888,13 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml </form> <div t-if="searchbar_sortings" class="dropdown pull-right mt8 mr8"> <button class="btn btn-default" type="button" data-toggle="dropdown"> - <span class="fa fa-sort fa-lg" /> + <span class="fa fa-sort fa-lg" role="img" aria-label="Sort" title="Sort"/> <span class='hidden-xs hidden-sm hidden-md' t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/> - <span class="caret"></span> + <span class="caret" role="img" aria-label="Dropdown menu" title="Dropdown menu"></span> </button> - <ul class="dropdown-menu" aria-labelledby="portal_searchbar_sortby"> + <ul class="dropdown-menu" role="menu" aria-labelledby="portal_searchbar_sortby"> <li t-foreach="searchbar_sortings" t-as="option" t-attf-class="#{sortby == option and 'active'}"> - <a t-att-href="request.httprequest.path + '?' + keep_query('*', sortby=option)"> + <a role="menuitem" t-att-href="request.httprequest.path + '?' + keep_query('*', sortby=option)"> <span t-esc="searchbar_sortings[option].get('label')"/> </a> </li> @@ -915,25 +915,25 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml <tr class="active"> <th>Name</th> <th>Url</th> - <th class="col-md-1 text-center"><i title="Is the page included in the main menu?" class="fa fa-thumb-tack" aria-hidden="true"></i></th> - <th class="col-md-1 text-center"><i title="Is the page published?" class="fa fa-eye" aria-hidden="true"></i></th> - <th class="col-md-1 text-center"><i title="Is the page indexed by search engines?" class="fa fa-globe" aria-hidden="true"></i></th> + <th class="col-md-1 text-center"><i title="Is the page included in the main menu?" role="img" aria-label="Is the page included in the main menu?" class="fa fa-thumb-tack"></i></th> + <th class="col-md-1 text-center"><i title="Is the page published?" role="img" aria-label="Is the page published?" class="fa fa-eye"></i></th> + <th class="col-md-1 text-center"><i title="Is the page indexed by search engines?" role="img" aria-label="Is the page indexed by search engines?" class="fa fa-globe"></i></th> <th class="col-sm-3 col-md-2"></th> </tr> </thead> <t t-foreach="pages" t-as="page"> <tr> - <td><i t-if="page.is_homepage" class="fa fa-home"></i> <span style="word-break: break-all;" t-esc="page.name"/></td> + <td><i t-if="page.is_homepage" class="fa fa-home" role="img" aria-label="Home" title="Home"></i> <span style="word-break: break-all;" t-esc="page.name"/></td> <td><a style="word-break: break-all;" t-attf-href="{{page.url}}"><t t-esc="page.url"/></a></td> - <td class="text-center"><i t-att-class="'fa fa-check' if page.menu_ids else 'fa fa-times text-muted'" aria-hidden="true"></i></td> + <td class="text-center"><i t-att-class="'fa fa-check' if page.menu_ids else 'fa fa-times text-muted'" role="img" t-att-aria-label="'Checked' if page.menu_ids else 'Not checked'" t-att-title="'Checked' if page.menu_ids else 'Not checked'"></i></td> <t t-set='date_formatted'><t t-options='{"widget": "date"}' t-esc="page.date_publish"/></t> - <td class="text-center"><i t-att-title="not page.is_visible and page.website_published and 'This page will be visible on ' + date_formatted" t-att-class="'fa fa-check' if page.is_visible and page.website_published else 'fa fa-eye-slash' if not page.is_visible and page.website_published else 'fa fa-times text-muted'" aria-hidden="true"></i></td> - <td class="text-center"><i t-att-class="'fa fa-check' if page.website_indexed else 'fa fa-times text-muted'" aria-hidden="true"></i></td> + <td class="text-center"><i t-att-title="not page.is_visible and page.website_published and 'This page will be visible on ' + date_formatted" role="img" t-att-aria-label="not page.is_visible and page.website_published and 'This page will be visible on ' + date_formatted" t-att-class="'fa fa-check' if page.is_visible and page.website_published else 'fa fa-eye-slash' if not page.is_visible and page.website_published else 'fa fa-times text-muted'"></i></td> + <td class="text-center"><i t-att-class="'fa fa-check' if page.website_indexed else 'fa fa-times text-muted'" role="img" t-att-aria-label="'Checked' if page.website_indexed else 'Not checked'" t-att-title="'Checked' if page.website_indexed else 'Not checked'"></i></td> <td class="text-right"> - <a class="mr4 fa fa-cog js_page_properties" t-att-data-id="page.id" href="#" title="Manage this page"></a> - <a class="mr4 fa fa-pencil-square-o" t-attf-href="/web#id=#{page.view_id.id}&view_type=form&model=ir.ui.view" title="Edit code in backend"></a> - <a class="mr4 fa fa-clone js_clone_page" t-att-data-id="page.id" href="#" title="Clone this page"></a> - <a class="fa fa-trash js_delete_page" t-att-data-id="page.id" href="#" title="Delete this page"></a> + <a class="mr4 fa fa-cog js_page_properties" t-att-data-id="page.id" href="#" title="Manage this page" aria-label="Manage this page"></a> + <a class="mr4 fa fa-pencil-square-o" t-attf-href="/web#id=#{page.view_id.id}&view_type=form&model=ir.ui.view" title="Edit code in backend" aria-label="Edit code in backend"></a> + <a class="mr4 fa fa-clone js_clone_page" t-att-data-id="page.id" href="#" title="Clone this page" aria-label="Clone this page"></a> + <a class="fa fa-trash js_delete_page" t-att-data-id="page.id" href="#" title="Delete this page" aria-label="Delete this page"></a> </td> </tr> </t> diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml index 6932eb9c053..088ded08317 100644 --- a/addons/website/views/website_views.xml +++ b/addons/website/views/website_views.xml @@ -145,7 +145,7 @@ </group> </group> <field groups="base.group_no_one" name="website_ids"/> - <label string="Related Menu Items"/> + <label for="menu_ids" string="Related Menu Items"/> <field name="menu_ids"/> </sheet> </form> @@ -199,7 +199,7 @@ <field name="parent_id"/> </group> </group> - <label string="Child Menus"/> + <label for="child_id" string="Child Menus"/> <field name="child_id"> <tree> <field name="sequence" widget="handle"/> |