diff --git a/CHANGELOG.md b/CHANGELOG.md index 56b9ad4c08..7d7aaf7a48 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,9 @@ - Update [`govuk-colour` mixins](https://govuk-frontend-review.herokuapp.com/docs/#helpers/colour-function-govuk-colour) to support legacy colours. [Example commit](https://github.com/alphagov/calendars/commit/ccd2b25873ee026858958d4732d42071bea57255) - Check [govuk-frontend 3.0 changelog](https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0) to see if and how the breaking release affects your application. +* BREAKING: Remove the accessible-autocomplete component (PR #1038) + [content-data-admin](https://github.com/alphagov/content-data-admin) is the only application that uses the accessible-autocomplete component. In order to migrate to this release it you must copy the files removed in PR #1038. + * Update feedback component to use govuk-frontend layout classes (PR #1010) * Fix focus and hover states for breadcrumbs, contents-list, highlight-boxes, modal-dialogue, step-by-step-nav, previous-and-next-navigation and title component (PR #1010) * Normalise falsey values to nil for subscription links component (PR #1021) diff --git a/app/assets/javascripts/govuk_publishing_components/components/accessible-autocomplete.js b/app/assets/javascripts/govuk_publishing_components/components/accessible-autocomplete.js deleted file mode 100644 index fc7d265314..0000000000 --- a/app/assets/javascripts/govuk_publishing_components/components/accessible-autocomplete.js +++ /dev/null @@ -1,79 +0,0 @@ -/* eslint-env jquery */ -/* global accessibleAutocomplete */ -// = require accessible-autocomplete/dist/accessible-autocomplete.min.js - -window.GOVUK = window.GOVUK || {} -window.GOVUK.Modules = window.GOVUK.Modules || {}; - -(function (Modules) { - 'use strict' - - Modules.AccessibleAutocomplete = function () { - var $selectElem - - this.start = function ($element) { - $selectElem = $element.find('select') - - var configOptions = { - selectElement: document.getElementById($selectElem.attr('id')), - showAllValues: true, - confirmOnBlur: true, - preserveNullOptions: true, // https://github.com/alphagov/accessible-autocomplete#null-options - defaultValue: '' - } - - configOptions.onConfirm = this.onConfirm - - new accessibleAutocomplete.enhanceSelectElement(configOptions) // eslint-disable-line no-new, new-cap - // attach the onConfirm function to data attr, to call it in finder-frontend when clearing facet tags - $selectElem.data('onconfirm', this.onConfirm) - } - - this.onConfirm = function (label, value, removeDropDown) { - function escapeHTML (str) { - return new window.Option(str).innerHTML - } - - if ($selectElem.data('track-category') !== undefined && $selectElem.data('track-action') !== undefined) { - track($selectElem.data('track-category'), $selectElem.data('track-action'), label, $selectElem.data('track-options')) - } - // This is to compensate for the fact that the accessible-autocomplete library will not - // update the hidden select if the onConfirm function is supplied - // https://github.com/alphagov/accessible-autocomplete/issues/322 - if (typeof label !== 'undefined') { - if (typeof value === 'undefined') { - value = $selectElem.children('option').filter(function () { return $(this).html() === escapeHTML(label) }).val() - } - - if (typeof value !== 'undefined') { - var $option = $selectElem.find('option[value=\'' + value + '\']') - // if removeDropDown we are clearing the selection from outside the component - var selectState = typeof removeDropDown === 'undefined' - $option.prop('selected', selectState) - $selectElem.change() - } - - // used to clear the autocomplete when clicking on a facet tag in finder-frontend - // very brittle but menu visibility is determined by autocomplete after this function is called - // setting autocomplete val to '' causes menu to appear, we don't want that, this solves it - // ideally will rewrite autocomplete to have better hooks in future - if (removeDropDown) { - $selectElem.closest('.gem-c-accessible-autocomplete').addClass('gem-c-accessible-autocomplete--hide-menu') - setTimeout(function () { - $('.autocomplete__menu').remove() // this element is recreated every time the user starts typing - $selectElem.closest('.gem-c-accessible-autocomplete').removeClass('gem-c-accessible-autocomplete--hide-menu') - }, 100) - } - } - } - - function track (category, action, label, options) { - if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) { - options = options || {} - options.label = label - - window.GOVUK.analytics.trackEvent(category, action, options) - } - } - } -})(window.GOVUK.Modules) diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss index d88feeaaf1..edeb87f049 100644 --- a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +++ b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss @@ -23,7 +23,6 @@ @import "components/mixins/css3"; // components -@import "components/accessible-autocomplete"; @import "components/accordion"; @import "components/attachment"; @import "components/attachment-link"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_accessible-autocomplete.scss b/app/assets/stylesheets/govuk_publishing_components/components/_accessible-autocomplete.scss deleted file mode 100644 index 8ad1f52722..0000000000 --- a/app/assets/stylesheets/govuk_publishing_components/components/_accessible-autocomplete.scss +++ /dev/null @@ -1,41 +0,0 @@ -@import url(asset-path("accessible-autocomplete/dist/accessible-autocomplete.min.css")); - -.gem-c-accessible-autocomplete { - .autocomplete__input { - z-index: 1; - } - - .autocomplete__dropdown-arrow-down { - z-index: 0; - } - - .autocomplete__option { - @include govuk-font(19); - } - - // needed as frontend doesn't currently support select multiples - // hopefully will in future and this can be removed - .govuk-select[multiple] { - height: auto; - } - - .js-enabled & .gem-c-autocomplete__multiselect-instructions { - display: none; - } - - .autocomplete__list .autocomplete__option { - padding: 5px 6px; - - &:before { - position: relative; - top: 3px; - padding-top: 2px; - } - } -} - -.gem-c-accessible-autocomplete--hide-menu { - .autocomplete__menu { - display: none; - } -} diff --git a/app/views/govuk_publishing_components/components/_accessible_autocomplete.html.erb b/app/views/govuk_publishing_components/components/_accessible_autocomplete.html.erb deleted file mode 100644 index b086e5f119..0000000000 --- a/app/views/govuk_publishing_components/components/_accessible_autocomplete.html.erb +++ /dev/null @@ -1,35 +0,0 @@ -<% - id ||= "autocomplete-#{SecureRandom.hex(4)}" - label ||= nil - data_attributes ||= nil - options ||= [] - selected_option ||= nil - multiple ||= false - - classes = %w(gem-c-accessible-autocomplete govuk-form-group) -%> -<% if label && options.any? %> - <%= tag.div class: classes, data: { module: "accessible-autocomplete" } do %> - <%= - render "govuk_publishing_components/components/label", { - html_for: id - }.merge(label.symbolize_keys) - %> - - <% if multiple %> - - <%= t('components.autocomplete.multiselect') %> - - <% end %> - - <%= - select_tag( - id, - options_for_select(options, selected_option), - multiple: multiple, - class: "govuk-select", - data: data_attributes - ) - %> - <% end %> -<% end %> diff --git a/app/views/govuk_publishing_components/components/docs/accessible_autocomplete.yml b/app/views/govuk_publishing_components/components/docs/accessible_autocomplete.yml deleted file mode 100644 index 65e0875adf..0000000000 --- a/app/views/govuk_publishing_components/components/docs/accessible_autocomplete.yml +++ /dev/null @@ -1,49 +0,0 @@ -name: Accessible autocomplete -description: An autocomplete component, built to be accessible. -body: | - This component uses the [Accessible Autocomplete](https://github.com/alphagov/accessible-autocomplete) code to create an accessible autocomplete element. The autocomplete is created with the `showAllValues` - option set to `true` and the `confirmOnBlur` option set to `false` (see [Autocomplete examples](https://alphagov.github.io/accessible-autocomplete/examples) here). It also depends upon the - [label component](https://github.com/component-guide/label). - - If Javascript is disabled, the component appears as a select box, so the user can still select an option. -accessibility_criteria: | - [Accessibility acceptance criteria](https://github.com/alphagov/accessible-autocomplete/blob/master/accessibility-criteria.md) -examples: - default: - data: - label: - text: 'Countries' - options: [['', ''], ['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us'], ['The Separate Customs Territory of Taiwan, Penghu, Kinmen, and Matsu (Chinese Taipei)', 'tw']] - with_unique_identifier: - data: - id: 'unique-autocomplete' - label: - text: 'Countries' - options: [['', ''], ['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us']] - with_selected_option_chosen: - data: - id: 'selected-option-chosen-autocomplete' - label: - text: 'Countries' - options: [['', ''], ['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us']] - selected_option: ['United Kingdom', 'gb'] - with_tracking_enabled: - description: | - This example shows tracking enabled on an autocomplete. Tracking will be enabled automatically when `track_category` and `track_action` are specified in `data_attributes`. - data: - id: 'tracking-enabled-autocomplete' - label: - text: 'Countries' - options: [['', ''], ['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us']] - data_attributes: - track_category: 'chosen_category' - track_action: 'chosen_action' - track_option: - custom_dimension: 'your_custom_dimension' - with_multiple_selections: - description: This parameter allows the user to choose more than one option from the autocomplete. The component generates a select multiple in place of a regular select, and the autocomplete Javascript detects this and provides the multiple selection functionality. - data: - multiple: true - label: - text: 'Countries' - options: [['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us'], ['The Separate Customs Territory of Taiwan, Penghu, Kinmen, and Matsu (Chinese Taipei)', 'tw']] diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index 2dcf4a2edd..d1669d94fd 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -29,7 +29,6 @@ # Add GOV.Frontend assets Rails.application.config.assets.precompile += %w( - accessible-autocomplete/dist/accessible-autocomplete.min.css govuk-logotype-crown.png ) diff --git a/config/locales/en.yml b/config/locales/en.yml index 3af98b0d47..2cae04b811 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -30,8 +30,6 @@ en: request_format_details_html: "If you use assistive technology and need a version of this document in a more accessible format, please email %{alternative_format_contact_email}. Please tell us what format you need. It will help us if you say what assistive technology you use." article_schema: scoped_search_description: "Search within %{title}" - autocomplete: - multiselect: "To select multiple items in a list, hold down Ctrl (PC) or Cmd (Mac) key." back_link: back: 'Back' contents_list: diff --git a/package-lock.json b/package-lock.json index dfd8893062..0d37fd55c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3,13 +3,6 @@ "requires": true, "lockfileVersion": 1, "dependencies": { - "accessible-autocomplete": { - "version": "git://github.com/alphagov/accessible-autocomplete.git#3523dd9fffc70cbd9f6f555f75863c33a709f49e", - "from": "git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support", - "requires": { - "preact": "^8.3.1" - } - }, "acorn": { "version": "5.7.3", "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz", @@ -1493,11 +1486,6 @@ "integrity": "sha1-0aIUg/0iu0HlihL6NCGCMUCJfEU=", "dev": true }, - "preact": { - "version": "8.4.2", - "resolved": "https://registry.npmjs.org/preact/-/preact-8.4.2.tgz", - "integrity": "sha512-TsINETWiisfB6RTk0wh3/mvxbGRvx+ljeBccZ4Z6MPFKgu/KFGyf2Bmw3Z/jlXhL5JlNKY6QAbA9PVyzIy9//A==" - }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", diff --git a/package.json b/package.json index 9101a563c0..646aa2a6b8 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ ] }, "dependencies": { - "accessible-autocomplete": "git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support", "axe-core": "3.2.2", "govuk-frontend": "3.0.0", "jquery": "1.12.4" diff --git a/spec/components/accessible_autocomplete_spec.rb b/spec/components/accessible_autocomplete_spec.rb deleted file mode 100644 index a8d9864634..0000000000 --- a/spec/components/accessible_autocomplete_spec.rb +++ /dev/null @@ -1,66 +0,0 @@ -require 'rails_helper' - -describe "AccessibleAutocomplete", type: :view do - def component_name - "accessible_autocomplete" - end - - it 'renders select element' do - render_component( - id: 'basic-autocomplete', - label: { text: "Countries" }, - options: [['United Kingdom', 'gb'], ['United States', 'us']] - ) - - assert_select ".govuk-label", text: "Countries", for: "basic-autocomplete" - assert_select "select#basic-autocomplete" - assert_select "select[multiple]", false - assert_select "select#basic-autocomplete option[value=gb]" - assert_select "select#basic-autocomplete option[value=gb]", text: 'United Kingdom' - assert_select "select#basic-autocomplete option[value=us]" - assert_select "select#basic-autocomplete option[value=us]", text: 'United States' - end - - it 'renders select element with selected value' do - render_component( - id: 'basic-autocomplete', - label: { text: "Countries" }, - options: [['United Kingdom', 'gb'], ['United States', 'us']], - selected_option: ['United States', 'us'] - ) - - assert_select ".govuk-label", text: "Countries", for: "basic-autocomplete" - assert_select "select#basic-autocomplete" - assert_select "select#basic-autocomplete option[value=gb]" - assert_select "select#basic-autocomplete option[value=us][selected]" - end - - it 'does not render when no data is specified' do - assert_empty render_component({}) - end - - it 'does not render when no label is specified' do - assert_empty render_component( - id: 'basic-autocomplete', - options: [['United Kingdom', 'gb'], ['United States', 'us']] - ) - end - - it 'does not render when no options are specified' do - assert_empty render_component( - id: 'basic-autocomplete', - label: { text: "Countries" } - ) - end - - it 'renders the multiple selection version correctly' do - render_component( - multiple: true, - label: { text: "Countries" }, - options: [['United Kingdom', 'gb'], ['United States', 'us']] - ) - - assert_select "select[multiple]" - assert_select ".gem-c-autocomplete__multiselect-instructions" - end -end diff --git a/spec/javascripts/components/accessible-autocomplete-spec.js b/spec/javascripts/components/accessible-autocomplete-spec.js deleted file mode 100644 index a5ffcd9221..0000000000 --- a/spec/javascripts/components/accessible-autocomplete-spec.js +++ /dev/null @@ -1,175 +0,0 @@ -/* eslint-env jasmine, jquery */ -/* global GOVUK */ - -describe('An accessible autocomplete component', function () { - 'use strict' - - function loadAutocompleteComponent () { - window.setFixtures(html) - var autocomplete = new GOVUK.Modules.AccessibleAutocomplete() - autocomplete.start($('.gem-c-accessible-autocomplete')) - } - - function loadAutocompleteMultiple () { - window.setFixtures(html) - var autocomplete = new GOVUK.Modules.AccessibleAutocomplete() - $('.gem-c-accessible-autocomplete').find('select').attr('multiple', 'multiple').find('option:first-child').remove() - autocomplete.start($('.gem-c-accessible-autocomplete')) - } - - var html = - '
' + - '' + - '
' - - // the autocomplete onConfirm function fires after the tests run unless we put - // in a timeout like this - makes the tests a bit verbose unfortunately - function testAsyncWithDeferredReturnValue () { - var deferred = $.Deferred() - - setTimeout(function () { - deferred.resolve() - }, 500) - - return deferred.promise() - } - - describe('updates the hidden select when', function () { - beforeEach(function (done) { - loadAutocompleteComponent() - - // the autocomplete is complex enough that all of these - // events are necessary to simulate user input - $('.autocomplete__input').val('Moose').click().focus().trigger( - $.Event('keypress', { which: 13, key: 13, keyCode: 13 }) - ).blur() - - testAsyncWithDeferredReturnValue().done(function () { - done() - }) - }) - - it('an option is selected', function () { - expect($('select').val()).toEqual('mo') - }) - }) - - describe('updates the hidden select when', function () { - beforeEach(function (done) { - loadAutocompleteComponent() - - $('select').val('de').change() - $('.autocomplete__input').val('Deer') - - $('.autocomplete__input').val('').click().focus().trigger( - $.Event('keypress', { which: 13, key: 13, keyCode: 13 }) - ).blur() - - testAsyncWithDeferredReturnValue().done(function () { - done() - }) - }) - - it('the input is cleared', function () { - expect($('select').val()).toEqual('') - }) - }) - - describe('triggers a Google Analytics event', function () { - beforeEach(function (done) { - GOVUK.analytics = { - trackEvent: function () { - } - } - spyOn(GOVUK.analytics, 'trackEvent') - - loadAutocompleteComponent() - - $('.autocomplete__input').val('Moose').click().focus().trigger( - $.Event('keypress', { which: 13, key: 13, keyCode: 13 }) - ).blur() - - testAsyncWithDeferredReturnValue().done(function () { - done() - }) - }) - - it('when a valid option is chosen', function () { - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('category', 'action', Object({ label: 'Moose' })) - }) - }) - - describe('triggers a Google Analytics event', function () { - beforeEach(function (done) { - GOVUK.analytics = { - trackEvent: function () { - } - } - spyOn(GOVUK.analytics, 'trackEvent') - - loadAutocompleteComponent() - - $('.autocomplete__input').val('Deer').click().focus().trigger( - $.Event('keypress', { which: 13, key: 13, keyCode: 13 }) - ).blur() - - $('.autocomplete__input').val('').click().focus().trigger( - $.Event('keypress', { which: 13, key: 13, keyCode: 13 }) - ).blur() - - testAsyncWithDeferredReturnValue().done(function () { - done() - }) - }) - - it('when an input is cleared', function () { - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('category', 'action', Object({ label: '' })) - }) - }) - - describe('in multiple mode', function () { - beforeEach(function (done) { - loadAutocompleteMultiple() - // use the component api for this test - // as methods in previous tests don't seem to - // work in multiple mode - var onConfirm = $('select').data('onconfirm') - - $('.autocomplete__input').val('Deer') - onConfirm('Deer', 'de') - - testAsyncWithDeferredReturnValue().done(function () { - done() - }) - }) - - it('selects one option in the select', function () { - expect($('select').val()).toEqual(['de']) - }) - }) - - describe('in multiple mode', function () { - beforeEach(function (done) { - loadAutocompleteMultiple() - var onConfirm = $('select').data('onconfirm') - - $('.autocomplete__input').val('Moose') - onConfirm('Moose', 'mo') - - $('.autocomplete__input').val('Deer') - onConfirm('Deer', 'de') - - testAsyncWithDeferredReturnValue().done(function () { - done() - }) - }) - - it('selects multiple options in the select', function () { - expect($('select').val()).toEqual(['mo', 'de']) - }) - }) -})