diff --git a/app/views/govuk_publishing_components/component_guide/show.html.erb b/app/views/govuk_publishing_components/component_guide/show.html.erb
index c5c664b40a..819416182d 100644
--- a/app/views/govuk_publishing_components/component_guide/show.html.erb
+++ b/app/views/govuk_publishing_components/component_guide/show.html.erb
@@ -50,7 +50,7 @@
href: "#other-examples",
text: "Other examples",
items: other_examples_links
- } if @component_doc.other_examples.any?),
+ } if @component_doc.other_examples.any? or @component_doc.uses_component_wrapper_helper?),
].compact
%>
<%= render "govuk_publishing_components/components/contents_list", {
@@ -92,7 +92,7 @@
<% end %>
- <% if @component_doc.other_examples.any? %>
+ <% if @component_doc.other_examples.any? or @component_doc.uses_component_wrapper_helper? %>
Other examples
diff --git a/app/views/govuk_publishing_components/components/_contextual_guidance.html.erb b/app/views/govuk_publishing_components/components/_contextual_guidance.html.erb
index b16d7aac32..3837c51cfa 100644
--- a/app/views/govuk_publishing_components/components/_contextual_guidance.html.erb
+++ b/app/views/govuk_publishing_components/components/_contextual_guidance.html.erb
@@ -10,9 +10,7 @@
component_helper.set_id(id)
component_helper.add_class("gem-c-contextual-guidance")
component_helper.add_data_attribute({ module: "contextual-guidance" })
-
%>
-
<%= tag.div(**component_helper.all_attributes) do %>
<%= tag.div class: "govuk-grid-row" do %>
<%= tag.div class: "govuk-grid-column-two-thirds" do %>
diff --git a/docs/component-wrapper-helper.md b/docs/component-wrapper-helper.md
index 79d41fbfcd..666e1ee5e9 100644
--- a/docs/component-wrapper-helper.md
+++ b/docs/component-wrapper-helper.md
@@ -32,6 +32,9 @@ These options can be passed to any component that uses the component wrapper.
- `role` - accepts a space separated string of roles
- `lang` - accepts a language attribute value
- `open` - accepts an open attribute value (true or false)
+- `hidden` - accepts an empty string, 'hidden', or 'until-found'
+- `tabindex` - accepts an integer. The integer can also be passed as a string.
+- `dir` - accepts 'rtl', 'ltr', or 'auto'.
To prevent breaking [component isolation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/component_principles.md#a-component-is-isolated-when), passed classes should only be used for JavaScript hooks and not styling. All component styling should be included only in the component itself. Any passed classes should be prefixed with `js-`. To allow for extending this option, classes prefixed with `gem-c-`, `govuk-`, `app-c-`, `brand--`, or `brand__` are also permitted, as well as an exact match of `direction-rtl`, but these classes should only be used within the component and not passed to it.
@@ -73,6 +76,8 @@ The component wrapper includes several methods to make managing options easier,
component_helper.add_role("button") # works like 'add_class'
component_helper.set_lang("en") # works like 'set_id' (can only have one lang)
component_helper.set_open(true) # can pass true or false
+ component_helper.set_tabindex(1)
+ component_helper.set_dir("rtl")
%>
<%= tag.div(**component_helper.all_attributes) do %>
component content