Skip to content

Commit

Permalink
<select> in compact category list has an accessible label (#141)
Browse files Browse the repository at this point in the history
  • Loading branch information
jcarstairs-scottlogic authored Dec 14, 2023
1 parent bc956cf commit 4089dec
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 8 deletions.
19 changes: 13 additions & 6 deletions _includes/category_list_compact.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
{% assign selectedIndex = include.selectedIndex %}
<div class="category-list-compact dropdown-menu grid-x grid-margin-y align-center">
<div class = "cell medium-5 small-5">
<h3>Categories</h3>
<select onchange="location = this.options[this.selectedIndex].value">
{% for category in site.data.categories %}
<option {% if selectedIndex == forloop.index0 %}selected="selected"{% endif %}
value="{{ site.baseurl }}{{ category.url }}">{{ category.title }}</option>
{% endfor %}
<label for="category-select">
Category
</label>

<select id="category-select" onchange="location = this.options[this.selectedIndex].value">
{% for category in site.data.categories %}
<option
{% if selectedIndex == forloop.index0 %} selected="selected" {% endif %}
value="{{ site.baseurl }}{{ category.url }}"
>
{{ category.title }}
</option>
{% endfor %}
</select>
</div>
</div>
5 changes: 4 additions & 1 deletion scss/_post-index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,10 @@
}

.category-list-compact {
h3 {
label {
font-size: 20px;
font-weight: 700;
margin-bottom: .5rem;
text-align: center;
}
}
Expand Down
2 changes: 1 addition & 1 deletion style.css

Large diffs are not rendered by default.

0 comments on commit 4089dec

Please sign in to comment.