Skip to content

Commit

Permalink
Add aria controls and describedby
Browse files Browse the repository at this point in the history
This commit adds the aria-controls and aria-describedby
attributes to the button presenter. This will improve the
usability of the button component for users of screenreaders.
  • Loading branch information
Jonathan Young committed Nov 28, 2022
1 parent ecd1889 commit 1ca5616
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 1 deletion.
8 changes: 7 additions & 1 deletion lib/govuk_publishing_components/presenters/button_helper.rb
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ class ButtonHelper
:name,
:value,
:classes,
:aria_label
:aria_label,
:aria_controls,
:aria_describedby

def initialize(local_assigns)
@href = local_assigns[:href]
Expand Down Expand Up @@ -52,6 +54,8 @@ def initialize(local_assigns)
@aria_label = local_assigns[:aria_label]
@info_text_id = "info-text-id-#{SecureRandom.hex(4)}"
@button_id = "button-id-#{SecureRandom.hex(4)}"
@aria_controls = local_assigns[:aria_controls]
@aria_describedby = local_assigns[:aria_describedby]
end

def link?
Expand Down Expand Up @@ -90,6 +94,8 @@ def html_options
options[:name] = name if name.present? && value.present?
options[:value] = value if name.present? && value.present?
options[:aria] = { label: aria_label } if aria_label
options[:aria][:controls] = aria_controls if aria_controls
options[:aria][:describedby] = aria_describedby if aria_describedby
options[:draggable] = false if link?
options
end
Expand Down
12 changes: 12 additions & 0 deletions spec/components/button_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -231,4 +231,16 @@ def component_name

assert_select '.gem-c-button[aria-label="Button with custom label"]'
end

it "renders with aria-controls" do
render_component(text: "Button", aria_controls: "Testing aria-controls")

assert_select '.gem-c-button[aria-controls="Testing aria-controls"]'
end

it "renders with aria-describedby" do
render_component(text: "Button", aria_describedby: "Testing aria-describedby")

assert_select '.gem-c-button[aria-describedby="Testing aria-describedby"]'
end
end

0 comments on commit 1ca5616

Please sign in to comment.