Skip to content

Commit

Permalink
Allow select error without message
Browse files Browse the repository at this point in the history
- allows the component to appear in an error state and use a given id for an error element (used for aria-describedby) but without an error message appearing
- intended for use where the error message should be rendered separately from the component
  • Loading branch information
andysellick committed Sep 26, 2019
1 parent 258d3d1 commit 3a7c269
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,20 @@
full_width ||= false
name ||= id
heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)

error_message ||= nil
error_id ||= "error-#{SecureRandom.hex(4)}" if error_message
aria_describedby = { describedby: error_id } if error_message
error_id ||= nil

if error_message || error_id
error_id = "error-#{SecureRandom.hex(4)}" unless error_id
aria_describedby = { describedby: error_id }
end

css_classes = %w(govuk-form-group gem-c-select)
css_classes << "govuk-form-group--error" if error_message

select_classes = %w(govuk-select)
select_classes << "gem-c-select__select--full-width" if full_width
select_classes << "govuk-select--error" if error_message
select_classes << "govuk-select--error" if error_id

label_classes = %w(govuk-label)
label_classes << "govuk-label--#{heading_size}" if heading_size
Expand Down
13 changes: 13 additions & 0 deletions app/views/govuk_publishing_components/components/docs/select.yml
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,19 @@ examples:
value: 'option1'
- text: 'Will make own arrangements'
value: 'option2'
with_error_id_but_no_message:
description: For some selects the error message should be rendered separately but an error state is still required (currently required in smart answers). In this scenario an error_id can be passed without an error_message to highlight the component and set aria-describedby correctly.
data:
id: 'dropdown4-2'
label: 'What lunch option would you like?'
error_id: 'error_id'
options:
- text: ""
value: ""
- text: 'Vegetarian'
value: 'option1'
- text: 'Meat'
value: 'option2'
full_width:
description: Make the select width 100%. This is used for facets in finder-frontend's search.
data:
Expand Down
17 changes: 17 additions & 0 deletions spec/components/select_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,23 @@ def component_name
assert_select ".govuk-select.govuk-select--error[aria-describedby=error_id]"
end

it "applies aria-describedby if an error is is given" do
render_component(
id: "mydropdown",
label: "My dropdown",
error_id: "error_id",
options: [
{
value: "government-gateway",
text: "Use Government Gateway"
}
]
)

assert_select ".gem-c-error-message.govuk-error-message", false
assert_select ".govuk-select.govuk-select--error[aria-describedby=error_id]"
end

it "renders a select box full width" do
render_component(
id: "mydropdown",
Expand Down

0 comments on commit 3a7c269

Please sign in to comment.