Changelog

All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog.

[3.0.0] - 2019-08

Added

  • Component facets advanced: Advanced facets with collapsible groups and checkboxes
  • Component(s): pills
    Description: Added the pills component
  • Component(s): tabs -pills
    Description: Added an example to the tabs with the pills component

Changed

  • Component navbar primary: Added the new autocomplete component to the navbar and it now uses Pandosearch
  • Component navbar white: Added the new autocomplete component to the navbar and it now uses Pandosearch
  • Component searchresults template: Usage of the new search components (autocomplete, facets, results) and implemented Pandosearch
  • Component default template: Now makes use of Pandosearch for the autocomplete in the navbar
  • Component forminputs template: Now makes use of Pandosearch for the autocomplete in the navbar
  • Component navbar: The mobile navbar is moved from the hamburger menu to the navbar
  • Component accordion: Made the accordion component more accessible
  • Component button horizontal-collapse: Made horizontal collapsing button more accessible
  • Component footer: Make footer more accessible
  • Component alerts: Made close button more accessible
  • Component input: The input element has now screen reader friendly feedback
  • Component select: Add more contrasting focus color
  • Component navbar primary: Changed the way menu items look on hover and various small accessibility changes
  • Component navbar white: Changed the way menu items look on hover and various small accessibility changes
  • Component carousel: Improved accessibility
  • Component autocomplete: Improved accessibility
  • Component forminputs template: Added the changed input element to this overview
  • Component input: Change p in example to div
  • Component select: Improved accessibility for the select component
  • Component progressbar: Added better example
  • Component: navbar primary
    Description: Added missing alt attribute
  • Component: sidenav
    Description: Moved div outside of ul
  • Component: stepper
    Description: Removed role="form" and added action to form
  • Component: timepicker
    Description: Made inputs self-closing
  • Component: autocomplete
    Changes: CSS, HTML, JS
    Description: Added option to show section headers
  • Component: navbar primary–default
    Changes: HTML, JS
    Description: Added section headers to the pandosearch autocomplete results
  • Component: searchresults template
    Description: Added reference to the pagination component
  • Component(s): cards filename, cards services, cards services-no-icon, cards news
    Changes: CSS, HTML
    Description: Added underline to read-more link
  • Component(s): no title-link, title link
    Changes: CSS, HTML
    Description: Added underline to links
  • Component(s): facets
    Description: Fixed active-icon in edge
  • Component(s): autocomplete
    Changes: JS
    Description: Fixed issues with IE11
  • Component(s): navbar primary
    Changes: CSS
    Description: Some styling changes for the clear input button
  • Component(s): autocomplete
    Changes: CSS, HTML, JS
    Description: Added a clear input button and fixed some small issues with the headers
  • Component(s): facets, facets advanced
    Changes: CSS, JS
    Description: Hide “filter results” bar when there are no facets
  • Component(s): stepper
    Changes: HTML, JS
    Description: Use correct step status labels (aria-label was preventing the screenreader to read the rest of the step contents)
  • Component(s): listing
    Changes: CSS
    Description: Removed extra focus border on title
  • Component(s): searchresults template
    Changes: JS
    Description: It is possible to sort facets
  • Component(s): searchresults template
    Changes: JS
    Description: The search results will show the description instead of the body
  • Component(s): autocomplete
    Changes: JS
    Description: Increase timeout so the click event will fire before closing the dropdown
  • Component(s): autocomplete
    Changes: HTML, JS
    Description: Opening and closing the autocomplete is now more robust
  • Component(s): stepper
    Changes: HTML
    Description: Changed classes so it works with the new mdbootstrap version
  • Component(s): autocomplete
    Changes: CSS
    Description: Break long items on word
  • Component(s): navbar primary
    Changes: JS
    Description: Close the mobile menu when clicked outside or when smooth scroll is enabled and clicked on an item
  • Component(s): autocomplete
    Changes: JS
    Description: Improved the way the autocomplete results are closed when clicked outside
  • Component(s): date picker
    Changes: JS
    Description: Improved accessibility by removing buttons from the picker from the tabindex
  • Component(s): pagination
    Changes: HTML
    Description: Improved accessibility changing the aria-labels for page landmarks
  • Component(s): facets advanced
    Changes: HTML
    Description: Improved accessibility by removing the region role
  • Component(s): tabs
    Changes: CSS, HTML
    Description: Improved accessibility by changing from the list to just divs
  • Component(s): tags
    Changes: HTML
    Description: Improved accessibility by adding a label to the button
  • Component(s): autocomplete
    Changes: HTML
    Description: Improved accessibility by adding role and aria-hidden
  • Component(s): carousel
    Changes: JS
    Description: Improved readability of script and change native DOM manipulation for jQuery
  • Component(s): date picker
    Changes: CSS, HTML, JS
    Description: Improved screen-reader support
  • Component(s): autocomplete
    Changes: CSS
    Description: Add highlight on focus and hover
  • Component(s): inline text-elements
    Changes: CSS, HTML
    Description: Removed underline element and used styling instead
  • Component(s): hover effects
    Changes: HTML
    Description: Add dummy alt tag
  • Component(s): popover
    Changes: HTML
    Description: Use h1 element in the example
  • Component(s): facets
    Changes: CSS
    Description: Add default color so every heading can be used
  • Component(s): complex table, normal table
    Changes: CSS, HTML
    Description: Added caption to improve accessibility
  • Component(s): default template, searchresults template
    Description: Added navbar scripts on the CL
  • Component(s): navbar primary
    Changes: HTML, JS
    Description: Added some extra scripts to make closing the autocomplete results possible
  • Component(s): autocomplete
    Changes: JS
    Description: Also close the searchbar on mobile when clicked outside
  • Component(s): autocomplete
    Changes: JS
    Description: Added method to change the icon of the autocomplete based on whether the input field is empty or not
  • Component(s): searchresults template
    Changes: JS
    Description: Changed pandosearch example script so it will change the icon of the autocomplete
  • Component(s): navbar
    Changes: CSS, HTML
    Description: The HTML and CSS for the primary and white navbar is now the same (except colors)
  • Component(s): carousel
    Changes: JS
    Description: Removed pause on hover because it interfered with the pause button
  • Component(s): navbar
    Changes: JS
    Description: Added script to detect scrolling on the navbar with ie11

[2.0.0] - 2018-06

Added

  • MDBootstrap v4.5.9
  • Documentation of the component preview (index) page within the How to use docs
  • Component footer: added text-center to footer-copyright
  • Component navbar (primary and white): added class ml-auto to form element
  • Component sidenav: as of MDB v4.5.0, sidenav relies on a custom scrollbar thus a container element is needed surrounding the original ul element
  • Component button: Using aria-label on the button and anchors
  • Component button floating: Using aria-label on the button and anchors
  • Component button horizontal-collapse: Using aria-label on the button and anchors
  • Component footer: Allowing the use of header elements in the footer and ensuring the correct aria tags are present on the footer
  • Component icons: Guidance on adding aria-label with icons
  • Component badges: Placeholder alt text added
  • Component pagination: aria-label added to the navigation element
  • Component stepper: Placeholders added to each input
  • Component navbar primary: Aria-label added to the search icon along with a tabindex
  • Component navbar white: Alt text added to the icon
  • Component navbar white: Aria-label added to the search icon along with a tabindex
  • Component switch: An accessible version of a material switch component has been added.
  • Component complex table: A new type of responsive table has been added. This component has row and column headings.
  • Component multiple upload: A HTML5 file upload input example has been added
  • Component checkbox: Added a material checkbox element
  • Component autocomplete: Added an autocomplete component
  • Component facets: Added a facets component (for filtering search results)
  • Component results: Added a search results component

Changed

  • Component cards (filename, news, services, services no icon): changed card-block to card-body
  • Component navbar (primary and white): changed navbar-toggleable-md to navbar-expand-lg
  • Template default: changed hidden-md-up to d-md-none since the underlying Bootstrap version (as part of the MDB framework as a whole) updated to v4 and uses different display utilities (see: https://mdbootstrap.com/utilities/bootstrap-display-property/)
  • Component alerts: Alerts can now only be closed by clicking a close button and set Alerts status to prototype and updated docs to advise modal use
  • Component button: Replacing i tags with span with aria-hidden=”true” and updated the button notes mentioning the use of anchors or button where appropriate
  • Component button floating: Replacing i tags with span with aria-hidden=”true” and updated the button notes mentioning the use of anchors or button where appropriate
  • Component button horizontal-collapse: Replacing i tags with span with aria-hidden=”true” and updated the button notes mentioning the use of anchors or button where appropriate
  • Component footer: Replacing i tags with span
  • Component hover effects: Updated hover effects accessibility guidance for light and super light overlays
  • Component icons: Icons changed to span elements
  • Component title link: Paragraph headers on list-group lists replaced with h tags with accessibility in mind
  • Component title no-link: Paragraph headers on list-group lists replaced with h tags with accessibility in mind
  • Component search results: Search result header tag changed to h tag
  • Component sidenav: Set Sidenav status to prototype and updated docs to advise Do not implement!
  • Component steppers: Stepper updated to use aria-label and use span for icons
  • Component sticky content: Sticky content p title replace with h5
  • Component accordion: Replacing i tags with span
  • Component input error: Label font now darker to give more contrast against a white background
  • Component input normal: Label font now darker to give more contrast against a white background
  • Component input read-only: Label font now darker to give more contrast against a white background
  • Component textarea: Label font now darker to give more contrast against a white background
  • Component tags: Replacing i tag with a button for removal
  • Component stepper: Replaced the previous steppers component with a new responsive stepper form component
  • Component stepper: Added backward navigation to the stepper component
  • Component stepper: Disabled step contrast increased
  • Component stepper: Back and next buttons changed to work based on validation messages and not disabling buttons
  • Component tabs: Changed tabs to match aria accessibility guidelines
  • Component cards: Images on cards will cover the image view-box and will not stretch
  • Component normal table: This is the old responsive table (only renamed due to the complex table)
  • Component lightbox: Added portrait image example
  • Component time picker: The time picker has been made inaccessible to screen readers with manual input in it’s place.
  • Component date picker: The date picker has been made inaccessible to screen readers with manual input in it’s place.
  • Component select: Switched to a custom aria select listbox element to improve accessibility
  • Component popovers: The popover will open on click or on focus with the space or enter key. Closing the popup can be done with the ‘x’ or with the enter, space or escape key.
  • Component checkbox: aria-checked attribute added
  • Component switch: aria-checked attribute added
  • Component multiple upload: aria-labelledby added to the input element using the button
  • Component checkbox: The tick has been changed to green
  • Component switch: On hover the shadow will now be green
  • Component title link: Change the example so it uses a paragraph as title like the note suggests
  • Component title no-link: Change the example so it uses a paragraph as title like the note suggests
  • Component pagination: Added a script to easily implement the pagination
  • Component anchors: Added a line beneath anchors to make them more visible
  • Component facets: Changed texts to dutch
  • Component results: Change highlight of search result
  • Component autocomplete: Changed behavior of search icon and fix closing of search after tab
  • Component button floating: Removed light background on focus to increase contrast
  • Component icons: Example is better accessible
  • Component title link: Make the list an actual list and change heading
  • Component no title-link: Make the list an actual list
  • Component title no-link: Change heading to h1 element
  • Component pagination: Changed contrast for the buttons and changed icon to span
  • Component select: Add more contrasting focus color
  • Component listing: Use h1 element in the example
  • Component accordion: Change the depreciated href to data-target
  • Component listing: Use h1 element in the example
  • Component autocomplete: Change icon from i to span
  • Component popovers: Set status to prototype

Removed

  • Component popovers: removed obsolete data-trigger="focus" attribute, since this already is specified in the JavaScript initialization
  • Component sidenav: removed class sn-bg-1 from ul element

[1.0.0] - 2017-09

Added

  • First stable release of the Nijmegen Component Library
  • Component carousel: Removed role="listbox" and role="option" to ensure the carousel works with a screen reader
  • Component listing: Removed labelledby from the listing item
  • Component pagination: aria-label removed from page links where an sr-only element already exists