v4.0 changelog

What's New

• Added collapsible alert plugin
• Dependencies: Switched open layer dependency to a compiled version
• Build: Replaced the html minifier with a faster one
• Build: Moved the Travis variables to Travis UI
• Build: Check dependencies on every build
• Dependencies: Update DataTables to version 1.10.2
• Dependencies: Update jQuery Validation to version 1.13.0
• Dependencies: Update jquery-pjax to version 1.8.2
• Multimedia player: Added cue point support
• Multimedia player: Improved YouTube support
• Tabs: Added support for nesting tabs
• Enbled SVG polyfill on basic HTML version

Template changes (non-breaking)

• Themes: Added server message pages and 404 error pages
• Themes: Cleaned up the splash page markup (non-breaking markup change)
• Themes: Removed aria-label from logo links since unnecessary duplication with text in the link itself (non-breaking markup change)
• Themes: Removed role='img' from logo link object to prevent object from being announced by screen readers (non-breaking markup change)

What's New

• Added wb-ready events to all plugins and polyfills
• Build: Fixed Linux issues with the development environment setup script
• Cleaned up the display of Basic HTML version and when JavaScript is disabled
• Core: Updated Bootstrap for Sass version to 3.2.0+1
• Date picker: Fixed French toggle and close button
• Documentation: Added all missing documentation for plugins, polyfills and "other" components
• Documentation: Translated the getting started documentation and the multimedia player and Web Accessibility Assessment Methodology documentation into French
• Documentation: Updated the browser testing recommendations
• Equal heights: Fix a bug in IE8 where the last class would get removed if not followed by a semi-colon
• Feeds: Switched timerpoke-based visibility check to widget-based visibility check
• Lightbox: Added documentation on how to leverage Magnific Popup mfp* events
• Lightbox: Fixed null error when element is deleted
• Made Basic HTML version more noticeable by making skip links visible at all times
• Multimedia player: Fixed the controls being shifted in the YouTube player
• Overlay / Lightbox: Fixed handling of same-page links to elsewhere on the page
• Share / Multimedia player: Added 'Share this audio file' option
• Tables: Added documentation on how to leverage DataTables *.dt events
• Tables: Fixed sort order of formatted numbers
• Tables: Made sort icons narrower and removed extra space when sorting disabled
• Tabs: Fixed automatic tab rotation and handling of data
• Tabs: Fixed fade effect in Safari
• Tabs: Fixed linking to an anchor within the same tab panel
• Tabs: Fixed printing of regular tabs with CSS transitions
• Themes: Added server message pages and 404 error pages
• Themes: Cleaned up the splash page markup (non-breaking markup change)
• Themes: Removed aria-label from logo links since unnecessary duplication with text in the link itself (non-breaking markup change)
• Themes: Removed role='img' from logo link object to prevent object from being announced by screen readers (non-breaking markup change)

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"[{htmlmin-lb}]
   • 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 "Site menu" heading in the full menu AJAX file to "Topics menu"[{htmlmin-lb}]
   • Before:

     <h2>Site menu</h2>

   • After:

     <h2>Topics menu</h2>

3. Moved contact information section to the start of the footer[{htmlmin-lb}]
   • 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>

4. Moved the Date modified RDFa property into the time element[{htmlmin-lb}]
   • 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>

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

What's New

• AJAX fetch: Modified the Ajax Fetch plugin to provide more control via jQuery AJAX settings and to send the context with the event
• Calendar of events: Added fluid width display option
• Calendar of events / Date picker: Fixed goto month field issues.
• Calendar of events / Date picker: Fixed numerous keyboard handling issues.
• CSS: Fixed pagination wrapping in IE8
• CSS: Fixed wrapping issues with the btn class
• Data AJAX: Added documentation
• Data InView: Added documentation and examples for CSS transitions and view state change events
• Datalist polyfill: Added an example of a dynamic datalist
• Datalist polyfill: Added the update event to allow updating of a dynamically modified datalist
• Date picker: Fixed spacing for picker toggle button in RTL display
• Feeds: Added Flickr and YouTube support
• Feeds: Delayed postProcessing of feeds when not visible
• Feeds: Now uses the AJAX Fetch plugin
• Footnotes: Increased width and spacing of links
• Geomap: Added margins to the map object to make scrolling on mobile devices easier
• Geomap: Fixed accessibility issues with new AOI feature
• HTML minification: Preserved line breaks to make it easier to implement the templates.
• i18n Fixed i18n strings where ' was not properly encoded
• Lightbox: Added open.wb-lbx event for opening a Lightbox popup through JavaScript
• Menu: Added search icon to mobile panel button and increased mobile panel button height by 20%
• Menu: Changed menu panel heading, button and title to 'Search and menus'
• Menu: Fixed a display issue with the slflnk class
• Menu: Fixed menu handling for undefined AJAX response
• Menu: Fixed outlining of non-section wb-navcurr links in the menu panel
• Multimedia player: Fixed not being able to have more than one YouTube player per page
• Overlay: Added documentation
• Overlay: Added example of opening overlays with JavaScript
• Session timeout: Prevented double firing of requests.
• Tables: Added documentation
• Tables: Added role='button' and aria-pressed to the pagination buttons to indicate which button is pressed
• Tables: Removed HTML tags before doing any filtering for formatted number
• Tabs: Fixed handling of attributes when transitioning between views
• Tabs: Only pause initialized video players when changing tabs
• Tabs - Carousel: Added support for fade and slide transitions
• Template: Added support for a full-width main
• Template: Changed site menu heading in fullmenu AJAX file
• Template: Changed heading text and skip link text for site menu, secondary menu and site information
• Template: Made skip to footer link discoverable in small view
• Template: Moved contact information section to the start of the footer
• Template: Moved the Date modified RDFa property into the time element
• Toggle: Fixed arrow key handling
• Variants: Added Jekyll and WordPress working examples
• WET theme: Increased the minimum height of the top bar in mobile view

What's New

• Ajax fetch / Data Ajax / Menu: Now passing along AJAX status and messaging in Ajax fetch and only completing Data Ajax and Menu updates when there are no load errors
• Archived: Removed duplicate icon
• Calendar of events: Fixed arrowing to previous/next month
• Calendar of events: Switched to only one link being in the tab order at a time
• Calender of events / Date picker: Fixed application of colours to other themes
• Core: Fixed gray-light so meets colour contrast against white backgrounds
• Core: Fixed selector for wet-boew script element
• Core: Preventing viewChange from removing all classes if executed too early. This is a failsafe for cases where viewChange is manually triggered too early.
• CSS: Fixed colcount support for ordered lists
• Date picker: Fixed listing of maximum month
• Feeds: Added Facebook template for Facebook-driven feeds
• Form validation: Added ability to configure which fields for validation to ignore
• Form validation: Made labels for number and digit/numeric validation more accurate
• Geomap: Added area of interest (AOI), geolcoation, and geocoding widgets
• jQuery: Update to 1.11.1 and 2.1.1 patch releases
• Lightbox: Fixed incorrect closing of AJAX popups.
• Menu: Fixed order of navcurrent checking to go from more specific links to less specific links
• Multimedia player: Added a volume control
• Multimedia player: Added the ability to share a video
• Multimedia player: Added WAI-ARIA properties to the toggle buttons (mute and cc)
• Multimedia player: Dropped the fast forward and rewind buttons
• Multimedia player: Fixed the audio player displaying as a video
• Multimedia player: Fixed the display and positioning of the progress bar and the closed caption button
• Multimedia player: Fixed the multimedia player in xxsmall view
• Multimedia player: Increased the captions area to minimize shifting in mobile devices. Also centred captions vertically.
• Multimedia player: Made the text always visible and the background for the controls lighter
• Multimedia player: Removed the overlay for the YouTube player. The overlay was overlapping all buttons rendering them non-functional.
• Multimedia player: Unified the multimedia controls focus display
• Share: Changed share widget from a right panel to a centred popup
• Share: Removed Technorati option due to 404 error for faves option
• Share: Removed underlining for space between link text and the share icon
• Tabbed interface: Added ability to control rotation interval through data-wb-tabs
• Tabbed interface: Carousels are now scalable so can fit in columns of varying sizes
• Tabbed interface: Enabled tab count to be visible in extra-small view
• Tabbed interface: Fixed fading effect
• Tabbed interface: Stops carousel for any clicks within a tab panel
• Tabbed interface / Multimedia player: Added example of the multimedia player embedded in a Tabbed interface carousel
• Tabbed interface / Multimedia player: Automatically stops all multimedia players within the current tab panel when the tab panel changes
• Tabbed interface / Multimedia player: Changed examples to use figure/figcaption
• Tabbed interface / Multimedia player: Fixed z-index issue with multimedia players embedded in a tabs carousel

What's New

• Archived: Added underline to top overlay link
• Archived: Moved explanatory archived message to within archived section and corrected heading
• Archived: Updated archived notice heading
• Charts - Upgraded to Flot 0.8.3 and fixed the missing table caption issue
• Date picker: Fixed toggle button when secondary menu is present
• Definition lists: Allowed wrapping in dt elements of .dl-horizontal
• HTML Table Validator: Migrated to v4.0
• Lightbox: Fixed cursor hover over close button
• Lightbox: Fixed printing issues
• Menu: Fixed loading of extra language links in the mobile panel
• Slider polyfill: Replaced fd-slider with a custom version that allows dynamic creation of the polyfill
• Slider polyfill: Standardized event handling to address Android issues
• Tables: Added indication of current and future state to sorting icons
• Tables: Aligned pagination with Bootstrap pagination
• Tables: Fixed sorting of formatted numbers
• Tables: Moved showing x to x of x entries to the top of the table
• Tables: Now hiding deactivated pagination buttons
• Tables: Removed bolding from show and filter fields and updated example source code
• Tables: Updated to DataTables 1.10.0

What's New

• Build: Added SCSS-Lint to the Travis build
• Data-picture: Added support for data-class attribute
• Details/summary: Added indenting and margin bottom when details is open
• Documentation: Added a getting started guide
• Favicon: Updated plugin element selector
• Feedback form: Fixed triggering of the form validation plugin
• Lightbox: Fixed inner padding of AJAX modal dialog
• Lightbox: Popup now closes when navigating outside the popup
• Menu: Added support for additional footer links in the mobile panel
• Menu: Added support for more than just English and French
• Menu: Changed down triangle to chevron
• Menu: Fixed secondary menu links in mobile panel in IE8
• Menu: Removed underlining on menu hover
• Multimedia player: Fixed issues with the iPad player not preserving ratio
• Multimedia player: Fixed the display of the progress bar in Webkit
• Multimedia player: Fixed the YouTube player duration not updating properly
• Multimedia player: Hiding the close captions button on the audio player
• Multimedia player: Restored responsiveness for the YouTube player
• Overlay: Fixed incorrect overlay border in IE8
• Share widget: Removed DZone due to their broken login page redirect
• Tabbed interface: Fixed duplication of carousel play/pause button text when button is activated
• Tables: Added sorting for currency and formatted numbers
• Tables: Changed sort icons
• Web Accessibility Assessment Methodology: Fixed issue with AA total
• WET theme: Enabled secondary menu to work without the a element on the top header

What's New

• Buttons: Changed button borders to give them more depth
• Calendar of Events: Removed role='application'
• Core: Standardized WET data handling to data-wb-pluginName and global overrides to window[ pluginName ]
• CSS: Overrode the default width of 100% for form controls and added a class for enabling 100% width
• CSS: Fixed the sizes and top margins of heading elements
• CSS: Made footer visible in small view
• Form validation: Improved compatibility with name attributes containing periods
• Geomap: Fixed map not loading IE8
• Input type='date' polyfill: Made close button label more meaningful
• Input type='date' polyfill: Changed toggle from button to link to prevent inadvertent triggering of the toggle
• Input type="date" polyfill: Fixed keyboard focus handling on calendar days
• Lightbox: Added focus redirection to prevent Jaws from exiting the Lightbox prematurely
• Markup: Fixed a validation error with favicon references
• Menu: Removed the box shadow from the sub menus, added wb-navcurr styling and changed the colour of the lines separating menu items
• Menu: Added support for wb-navcurr highlighting in the mobile panel
• Menu: Fixed display of non-section links and summary focus in mobile panel
• Menu: Made mobile panel button look more like a button
• Menu: Improved support for nested menu items
• Multimedia player: Added the ability to include the multimedia player in a tab panel
• Multimedia player: Fixed issue where the multimedia player would not initialize for dynamic elements
• Overlay: Ensured overlay is scrolled to the top when opened
• Pagination: Fixed the design of the pagination widget
• Share widget: Added ability to customize the link CSS and add sites to the panel
• Tabs: Updated the design of the accordion style in small view and under to better represent the relationship of the elements.
• Tabs: Fixed carousel-s2 display issue in small and extra-small view

What's New

• Geomap: Ported Charts plugin from WET v3.1.
• Share widget: Corrected share widget links
• Share widget: Added site filter
• Share widget: Added Yahoo! Mail, Gmail and mailto options
• Tabs: Changed top border, and background colours of tabs to make the active tab more distinctive
• Tabs: Changed the carousel tabbing order so previous/next are before the tabs
• Tabs: Reconfigured button locations and backgrounds of carousel style 2 in small view
• Tabs: Added Item x of n display for carousel in small view
• Multimedia player: Fixed display of buttons
• Form validation: Changed appearance of error summary and inline messages
• Menu: Changed secondary menu to a contextual menu
• Bootstrap: Switched to Sass variant
• Bootstrap: Overrode the default appearance of Bootstrap labels, alerts and btn-default
• WET theme: Removed role='contentinfo' from Date modified field
• Build: Added HTML validation
• Build: Added the i18n auto-generation of theme pages with strings from Google Docs
• Build: Separate IE8 uglify for ANSII issue

What's New

• Breaking change: Feedback form JS and CSS are no longer included in the core files. The separate JS and CSS files need to be included in the page for the feedback form to work.
• Menu: Restructured the menus in the mobile panel, switching from a single WAI-ARIA accordion to multiple WAI-ARIA menus.
• Tabbed interface carousel: Corrected overlapping and clipping issues on small-screen smartphones.
• Secondary menu: Corrected structural issues and a disabled a non-functional link.
• Touchscreen: Corrected several touch-related issues with the menu bar, the mobile panel, accordions and details/summary.
• Localstorage: Prevented JS errors when localStorage becomes unavailable when the browser is in private mode.
• Overlay: Prevented the top overlay from overlapping content that gain focus (e.g., clicking a same-page link).
• Charts: Ported Charts plugin from WET v3.1.
• Themes: Ported the GC Web Usability, GC Intranet, Base and OGPL themes from WET v3.1.
• Share widget: Added the ability to share multiple different types of content on the same page.
• Web Accessibility Assessment Methodology: Ported the Web Accessibility Assessment Methodology from WET v3.1.
• RTL: Fixed numerous RTL issues with various plugins and themes

What's New

• New plugin framework based upon JavaScript Event Programming (JEP)
• Major reduction in total page sizes, page load times and page paint times (approximately an 80% decrease)
• Replaced grid system with Twitter Bootstrap
• Ported most v3.1 plugins and polyfills and optimized for touchscreen mobile devices
• Replaced mobile popups with a mobile panel, reducing the number of buttons for mobile to one
• Increased font size and spacing between touch targets to better support touchscreen devices
• New plugins: Data AJAX, Data-Inview, Equal height, Overlay, Toggle and Twitter Embedded Timeline
• Removed dependency on jQuery Mobile
• Page no longer refreshes when transitioning between views
• Replaced custom Ant build system with a build system based on Node.js, Grunt.js, Bower, Assemble and other well-supported build components