v4.0.4 - Notes d'utilisation

Template changes (non-breaking)

Note: Only the changes to the English templates are shown. The same changes were made to the templates in the other supported languages.

1. Added a search icon to the mobile panel button, changed the size of the button and changed menu panel button and title to "Search and menus"
   • Canada.ca theme:
     • Before:

       <section class="wb-mb-links col-xs-3 visible-sm visible-xs" id="wb-glb-mn">
       	<h2>Menu</h2>
       	<ul class="list-inline text-right chvrn">
       		<li><a href="#mb-pnl" title="Menu" aria-controls="mb-pnl" class="overlay-lnk" role="button"><span class="glyphicon glyphicon-th-list"><span class="wb-inv">Menu</span></span></a></li>

     • After:

       <section class="wb-mb-links col-xs-3 visible-sm visible-xs" id="wb-glb-mn">
       	<h2>Search and menus</h2>
       	<ul class="list-inline text-right chvrn">
       		<li><a href="#mb-pnl" title="Search and menus" aria-controls="mb-pnl" class="overlay-lnk btn" role="button"><span class="glyphicon glyphicon-search"><span class="glyphicon glyphicon-th-list"><span class="wb-inv">Search and menus</span></span></span></a></li>

   • Other themes:
     • Before:

       <section class="wb-mb-links col-xs-12 visible-sm visible-xs" id="wb-glb-mn">
       	<h2>Menu</h2>
       	<ul class="pnl-btn list-inline text-right">
       		<li><a href="#mb-pnl" title="Menu" aria-controls="mb-pnl" class="overlay-lnk btn-xs btn-default" role="button"><span class="glyphicon glyphicon-th-list"><span class="wb-inv">Menu</span></span></a></li>

     • After:

       section class="wb-mb-links col-xs-12 visible-sm visible-xs" id="wb-glb-mn">
       	<h2>Search and menus</h2>
       	<ul class="pnl-btn list-inline text-right">
       		<li><a href="#mb-pnl" title="Search and menus" aria-controls="mb-pnl" class="overlay-lnk btn btn-sm btn-default" role="button"><span class="glyphicon glyphicon-search"><span class="glyphicon glyphicon-th-list"><span class="wb-inv">Search and menus</span></span></span></a></li>

2. Changed heading text and skip link text for "Site menu", "Secondary menu" and "Site information" to "Topics menu", "Section menu" and "About this site"
   • Before:

     <li class="wb-slc visible-md visible-lg"><a class="wb-sl" href="#wb-info">Skip to site information</a></li>
     <li class="wb-slc visible-md visible-lg"><a class="wb-sl" href="#wb-sec">Skip to secondary menu</a></li>
     ...
     <h2 class="wb-inv">Site menu</h2>
     ...
     <h2>Secondary menu</h2>
     ...
     <h2 class="wb-inv">Site information</h2>

   • After:

     <li class="wb-slc visible-md visible-lg"><a class="wb-sl" href="#wb-info">Skip to "About this site"</a></li>
     <li class="wb-slc visible-md visible-lg"><a class="wb-sl" href="#wb-sec">Skip to section menu</a></li>
     ...
     <h2 class="wb-inv">Topics menu</h2>
     ...
     <h2>Section menu</h2>
     ...
     <h2 class="wb-inv">About this site</h2>

3. Changed "Site menu" heading in the full menu AJAX file to "Topics menu"
   • Before:

     <h2>Site menu</h2>

   • After:

     <h2>Topics menu</h2>

4. Moved contact information section to the start of the footer
   • Canada.ca theme:
     • Before:

       <h2 class="wb-inv">Site Information</h2>
       	<div class="row">
       		<section class="col-sm-3 col-lg-3">
       			<h3>Government</h3>
       			...
       		</section>
       		<section class="col-sm-3 col-lg-3">
       			<h3>Transparency</h3>
       			...
       		</section>
       		<div class="col-sm-3 col-lg-3 brdr-lft">
       			<section>
       				<h3>News</h3>
       				...
       			</section>
       			<section>
       				<h3>Contact information</h3>
       				...
       			</section>
       		</div>

     • After:

       <h2 class="wb-inv">About this site</h2>
       	<div class="row">
       		<div class="col-sm-3 col-lg-3">
       			<section>
       				<h3>News</h3>
       				...
       			</section>
       			<section>
       				<h3>Contact information</h3>
       				...
       			</section>
       		</div>
       		<section class="col-sm-3 col-lg-3">
       			<h3>Government</h3>
       			...
       		</section>
       		<section class="col-sm-3 col-lg-3 brdr-lft">
       			<h3>Transparency</h3>
       			...
       		</section>

   • Other themes:
     • Before:

       <h2 class="wb-inv">Site Information</h2>
       	<div class="row">
       		<section class="col-sm-3 col-lg-3">
       			<h3>About</h3>
       			...
       		</section>
       		<section class="col-sm-3 col-lg-3">
       			<h3>Contact information</h3>
       			...
       		</section>

     • After:

       <h2 class="wb-inv">About this site</h2>
       	<div class="row">
       		<section class="col-sm-3 col-lg-3">
       			<h3>Contact information</h3>
       			...
       		</section>
       		<section class="col-sm-3 col-lg-3">
       			<h3>About</h3>
       			...
       		</section>

5. Moved the Date modified RDFa property into the time element
   • Before:

     <dl id="wb-dtmd" property="dateModified">
     	<dt>Date modified: </dt>
     	<dd>
     		<time>2014-07-22</time>
     	</dd>
     </dl>

   • After:

     <dl id="wb-dtmd">
     	<dt>Date modified: </dt>
     	<dd>
     		<time property="dateModified">2014-07-22</time>
     	</dd>
     </dl>

6. Wrapped Tabbed interface details and carousel tab panels with div class="tabpanels"
   • Tabbed interface:
     • Before:

       <div class="wb-tabs wb-eqht">
       	<details id="details-panel1">
       		...
       	</details>
       	<details id="details-panel2">
       		...
       	</details>
       	<details id="details-panel3">
       		...
       	</details>
       </div>

     • After:

       <div class="wb-tabs wb-eqht">
       	<div class="tabpanels">
       		<details id="details-panel1">
       			...
       		</details>
       		<details id="details-panel2">
       			...
       		</details>
       		<details id="details-panel3">
       			...
       		</details>
       	</div>
       </div>

   • Carousel:
     • Before:

       <div class="wb-tabs carousel-s1">
       	<ul role="tablist">
       		...
       	</ul>
       	<div role="tabpanel" id="panel1" class="in fade">
       		...
       	</div>
       	<div role="tabpanel" id="panel2" class="out fade">
       		..
       	</div>
       	...
       </div>

     • After:

       <div class="wb-tabs carousel-s1">
       	<ul role="tablist">
       		...
       	</ul>
       	<div class="tabpanels">
       		<div role="tabpanel" id="panel1" class="in fade">
       			...
       		</div>
       		<div role="tabpanel" id="panel2" class="out fade">
       			..
       		</div>
       		...
       	</div>
       </div>