settings page: Improve template for a11y

inveniosoftware · Jul 31, 2023 · 1ea695e · 1ea695e
1 parent b9ebcaf
commit 1ea695e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/invenio_theme/assets/semantic-ui/js/invenio_theme/theme.js b/invenio_theme/assets/semantic-ui/js/invenio_theme/theme.js
@@ -22,7 +22,25 @@ jquery("img.has-placeholder").each(function() {
 })
 
 // Initialize Semantic UI components
-jquery(".ui.dropdown").dropdown();
+jquery(".ui.dropdown").dropdown({
+  onShow: function() {
+    const dropdownElem = jquery(this);
+    dropdownElem.attr("aria-expanded", true);
+  },
+  onHide: function() {
+    const dropdownElem = jquery(this);
+    dropdownElem.attr("aria-expanded", false);
+  },
+  onChange: function(value, text, $selectedOption) {
+    const dropdownElem = jquery(this);
+    const options = dropdownElem.find(".item");
+
+    options.each((index, option) => {
+      jquery(option).attr("aria-selected", false);
+    })
+    $selectedOption.attr("aria-selected", true);
+  }
+});
 
 jquery(".ui.accordion").accordion({
   selector: {

diff --git a/invenio_theme/templates/semantic-ui/invenio_theme/page_settings.html b/invenio_theme/templates/semantic-ui/invenio_theme/page_settings.html
@@ -46,18 +46,18 @@ <h1 class="ui large header">{{_("My account")}}</h1>
   <article class="eleven wide tablet twelve wide computer column">
 
     {%- block settings_content scoped %}
-      <div class="ui segments">
+      <section aria-label="{{ _(panel_title|default('')) }}" class="ui segments">
         <div class="ui segment secondary">
 
           {%- block settings_content_title scoped %}
             {%- if panel_icon %}
 
               {%- block settings_content_title_icon scoped %}
-                <i class="{{ panel_icon }}"></i>
+                <i class="{{ panel_icon }}" aria-hidden="true"></i>
               {%- endblock %}
 
             {%- endif %}
-            <strong class="header item">{{ panel_title|default("") }}</strong>
+            <h2 class="ui tiny header inline-block m-0">{{ panel_title|default("") }}</h2>
           {%- endblock %}
 
         </div>
@@ -69,7 +69,7 @@ <h1 class="ui large header">{{_("My account")}}</h1>
           </div>
         {%- endblock settings_body %}
 
-      </div>
+        </section>
     {%- endblock %}
 
   </article>