@ilo-org/twig 0.16.2 → 0.16.3

package/.turbo/turbo-build:lib.log

@@ -1,9 +1,9 @@
 
-> @ilo-org/twig@0.16.2 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.16.3 build:lib /home/runner/work/designsystem/designsystem/packages/twig
 > node importprefix.js && node importsvgs.js && pnpm output
 
 theme prefix added
 
-> @ilo-org/twig@0.16.2 output /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.16.3 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @ilo-org/twig
 
+## 0.16.3
+
+### Patch Changes
+
+- 9a326f047: fixed accordion a11y
+- 77fbf565d: Fix lighthouse accessibility audit error of tabs attributes not matching their roles
+- 10dadfad7: Fix design bug in pagination for rtl
+- Updated dependencies [7e1460a88]
+- Updated dependencies [10dadfad7]
+- Updated dependencies [5bc989f5d]
+  - @ilo-org/styles@0.15.0
+
 ## 0.16.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.16.2",
+  "version": "0.16.3",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -27,9 +27,9 @@
     "@ilo-org/brand-assets": "0.4.0",
     "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/styles": "0.14.2",
-    "@ilo-org/utils": "0.0.11",
-    "@ilo-org/themes": "0.7.2"
+    "@ilo-org/styles": "0.15.0",
+    "@ilo-org/themes": "0.7.2",
+    "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

package/src/patterns/components/accordion/accordion-item.twig

@@ -2,13 +2,19 @@
   ACCORDION ITEM COMPONENT
 #}
 {% set uid = "now"|date('Uv') %}
-<li class="{{prefix}}--accordion--item" id=" {{ id }}{{ uid }}">
+{% set accordion_id = id ~ uid %}
+{% set button_id = 'button-' ~ accordion_id %}
+{% set panel_id = 'panel-' ~ accordion_id %}
+{% set expanded_class = defaultExpanded ? prefix ~ '--accordion--panel--open' : '' %}
+{% set scroll_class = scroll ? prefix ~ '--accordion--panel__scroll' : '' %}
+
+<li class="{{prefix}}--accordion--item" id="{{ accordion_id }}">
 	<div class="ilo--h3">
-		<button class="{{prefix}}--accordion--button {{prefix}}--accordion--button--{{ size|default('small') }}" aria-expanded="{{ defaultExpanded }}" aria-controls="panel-{{ id }}{{ uid }}" id="button-{{ id }}{{ uid }}">
+		<button class="{{prefix}}--accordion--button {{prefix}}--accordion--button--{{ size|default('small') }}" aria-expanded="{{ defaultExpanded }}" aria-controls="{{ panel_id }}" id="{{ button_id }}">
 			{{label}}
 		</button>
 	</div>
-	<div class="{{prefix}}--accordion--panel {% if defaultExpanded %} {{prefix}}--accordion--panel--open{% endif %} {% if scroll %} {{prefix}}--accordion--panel__scroll {% endif %}" id="panel-{{ id }}{{ uid }}" aria-labelledby="button-{{ id }}{{ uid }}" role="region">
+	<div class="{{prefix}}--accordion--panel {{ expanded_class }} {{ scroll_class }}" id="{{ panel_id }}" aria-labelledby="{{ button_id }}" role="region" aria-hidden={{defaultExpanded ? 'false' : 'true'}}>
 		<div class="{{prefix}}--accordion--innerpanel">
 			{{content|raw}}
 		</div>

package/src/patterns/components/accordion/accordion.js

@@ -1,5 +1,14 @@
 import { EVENTS, ARIA } from "@ilo-org/utils";
 
+const FOCUSABLE_SELECTORS = [
+  "a",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "[tabindex]:not([tabindex='-1'])",
+];
+
 /**
  * The Accordion module which handles rendering field labels inline on a form.
  *
@@ -91,6 +100,12 @@ export default class Accordion {
       });
     }
 
+    if (this.accordionPanels.length > 0) {
+      this.accordionPanels.forEach((panel) => {
+        this.handleTabIndex(panel, "REMOVE");
+      });
+    }
+
     return this;
   }
 
@@ -147,7 +162,8 @@ export default class Accordion {
     element.parentElement
       .querySelector(".ilo--accordion--button")
       .setAttribute(ARIA.EXPANDED, "false");
-    element.setAttribute(ARIA.HIDDEN, "false");
+    element.setAttribute(ARIA.HIDDEN, "true");
+    this.handleTabIndex(element, "REMOVE");
   }
 
   /**
@@ -161,7 +177,24 @@ export default class Accordion {
     element.parentElement
       .querySelector(".ilo--accordion--button")
       .setAttribute(ARIA.EXPANDED, "true");
-    element.setAttribute(ARIA.HIDDEN, "true");
+    element.setAttribute(ARIA.HIDDEN, "false");
     element.classList.add("ilo--accordion--panel--open");
+    this.handleTabIndex(element, "ADD");
+  }
+
+  /**
+   *
+   * @param {HTMLElement} element - REQUIRED - the accordion panel to be adjusted
+   * @param {('ADD' | 'REMOVE')} mode - REQUIRED -  weather to set or remove tabindex
+   */
+  handleTabIndex(element, mode) {
+    element.querySelectorAll(FOCUSABLE_SELECTORS.join(", ")).forEach((item) => {
+      if (mode === "ADD") {
+        item.removeAttribute("tabindex");
+        return;
+      }
+
+      item.setAttribute("tabindex", "-1");
+    });
   }
 }

package/src/patterns/components/accordion/accordion.wingsuit.yml

@@ -2,9 +2,8 @@ accordion:
   namespace: Components/Content
   use: "@components/accordion/accordion.twig"
   label: Accordion
-  description:
-    The accordion component allows the user to show and hide sections of
-    related content on a page. Items in the accordion can be expanded by default or scrollable if the content is very long.
+  description: The accordion component allows the user to show and hide sections of related content on a page. Items in the accordion can be expanded by default or scrollable if the content is very long.
+
   fields:
     items:
       type: object
@@ -22,6 +21,7 @@ accordion:
           id: item2
           defaultExpanded: false
           scroll: false
+
   settings:
     size:
       type: select
@@ -41,22 +41,38 @@ accordion:
         false: False
       preview: "true"
       required: false
+
   variants:
     default:
-      label: "Default"
+      label: Default
     scrollable:
       label: "Scrollable"
       description: "You can make an accordion item scrollable simply by passing it scroll: true in the preview."
       fields:
         items:
           - label: Topics
-            content: '<div style="padding: 20px"><ul class="ilo--list--unordered"><li>Employment Promotion and Job Creation</li><li>Social Protection</li><li>International Labour Standards</li><li>Social Dialogue and Tripartism</li><li>Occupational Safety and Health</li><li>Labor Migration</li><li>Child Labour and Forced Labour Elimination</li><li>Gender Equality and Non-Discrimination</li><li>Decent Work</li><li>Wages and Working Hours</li><li>Social Security</li><li>Green Jobs</li>'
+            content: '<div style="padding: 20px"><ul class="ilo--list--unordered"><li>Employment Promotion and Job Creation</li><li>Social Protection</li><li>International Labour Standards</li><li>Social Dialogue and Tripartism</li><li>Occupational Safety and Health</li><li>Labor Migration</li><li>Child Labour and Forced Labour Elimination</li><li>Gender Equality and Non-Discrimination</li></ul></div>'
             id: item1
             defaultExpanded: false
             scroll: true
           - label: Sectors
-            content: '<div style="padding: 20px"><ul class="ilo--list--unordered"><li>Agriculture, Forestry, and Fishing</li><li>Construction</li><li>Manufacturing</li><li>Transport and Storage</li><li>Wholesale and Retail Trade</li><li>Information and Communication</li><li>Finance and Insurance</li><li>Health and Social Work</li><li>Educational Services</li><li>Public Administration and Defense</li><li>Other Services</li><li>Mining and Quarrying</li><li>Real Estate Activities</li><li>Water Supply and Waste Management</li><li>Professional, Scientific, and Technical Services</li><li>Arts, Entertainment, and Recreation</li><li>Electricity, Gas, Steam, and Air Conditioning Supply</li><li>Accommodation and Food Service Activities</li></ul></div>'
+            content: '<div style="padding: 20px"><ul class="ilo--list--unordered"><li>Agriculture, Forestry, and Fishing</li><li>Construction</li><li>Manufacturing</li><li>Transport and Storage</li><li>Wholesale and Retail Trade</li><li>Information and Communication</li><li>Finance and Insurance</li><li>Health and Social Work</li><li>Educational Services</li><li>Public Administration and Defense</li><li>Other Services</li></ul></div>'
             id: item2
             defaultExpanded: false
             scroll: true
-  visibility: storybook
+    focus:
+      label: "Focus elements"
+      description: "This variant includes checkboxes inside the accordion item."
+      fields:
+        items:
+          - label: User Preferences
+            content: '<div style="padding: 20px"><form><input type="checkbox" id="option1" name="option1"><label for="option1">Option 1</label><br><input type="checkbox" id="option2" name="option2"><label for="option2">Option 2</label><br><input type="checkbox" id="option3" name="option3"><label for="option3">Option 3</label><br><input type="checkbox" id="option4" name="option4"><label for="option4">Option 4</label><br><input type="checkbox" id="option5" name="option5"><label for="option5">Option 5</label></form></div>'
+            id: item1
+            defaultExpanded: false
+            scroll: false
+          - label: More Preferences
+            content: '<div style="padding: 20px"><form><input type="checkbox" id="option3" name="option3"><label for="option3">Option 3</label><br><input type="checkbox" id="option4" name="option4"><label for="option4">Option 4</label></form></div>'
+            id: item2
+            defaultExpanded: false
+            scroll: false
+            visibility: storybook

package/src/patterns/components/pagination/pagination.twig

@@ -24,7 +24,8 @@
     {% set currentPageZeroIndex = currentPage * 1 %}
     {% set currentPageIndex = currentPageZeroIndex + 1 %}
 
-    <span>{{currentPageIndex}}</span> {{pageCountPreposition}}
+    <span>{{currentPageIndex}}</span> 
+    <span>{{pageCountPreposition}}</span>
     <span>{{totalPages}}</span>
   </p>
 

package/src/patterns/components/tabs/tabs.twig

@@ -1,6 +1,3 @@
-{#
-  TABS COMPONENT
-#}
 {% set uid = "now"|date('Uv') %}
 {% set tabids = [] %}
 {% for item in items %}
@@ -9,8 +6,8 @@
 <div class="{{prefix}}--tabs" data-prefix="{{prefix}}" id="tabs--{{uid}}" data-loadcomponent="Tabs">
     <ul class="{{prefix}}--tabs--selection" aria-controls="tabs--{{uid}}" role="tablist" style="--tabscount: {{items|length}};">
       {% for item in items %}
-        <li class="{{prefix}}--tabs--selection--item" role="tab">
-          <a href="#tab--{{tabids[loop.index - 1]}}" class="{{prefix}}--tabs--selection--button{% if item.icon is defined %} icon{% endif %}" aria-controls="tab--{{tabids[loop.index - 1]}}" tabindex="0" aria-selected="{% if loop.index == 1 %}true{% else %}false{% endif %}" title="{{item.label}}">
+        <li class="{{prefix}}--tabs--selection--item" role="presentation"> {# changed role to presentation for list item #}
+          <a href="#tab--{{tabids[loop.index - 1]}}" class="{{prefix}}--tabs--selection--button{% if item.icon is defined %} icon{% endif %}" aria-controls="tab--{{tabids[loop.index - 1]}}" role="tab" tabindex="0" {% if loop.index == 1 %}aria-selected="true"{% else %}aria-selected="false"{% endif %} title="{{item.label}}">
             <span class="{{prefix}}--tabs--selection--label">{{item.label}}</span>
             {% if item.icon is defined %}
               {% include '@components/icon/icon.twig' with {icon: item.icon} %}
@@ -21,7 +18,7 @@
     </ul>
     <div class="{{prefix}}--tabs--content">
       {% for item in items %}
-        <div id="tab--{{tabids[loop.index - 1]}}" role="tabpanel" aria-expanded="{% if loop.index == 1 %}true{% else %}false{% endif %}">
+        <div id="tab--{{tabids[loop.index - 1]}}" role="tabpanel" aria-labelledby="tab--{{tabids[loop.index - 1]}}" {% if loop.index == 1 %}aria-expanded="true"{% else %}aria-expanded="false"{% endif %}>
           {% include '@components/' ~ item.component ~ '/' ~ item.component ~ '.twig' with item.componentdata %}
         </div>
       {% endfor %}