Tabs WCAG & reference files

src/il-tabs/README.md

@@ -65,47 +65,3 @@ By default, the first tab is selected on page load. To change which tab is initi
       <!-- ... --->
 </il-tabs>
 ```
-## Accessibility
-In compliance with WCAG 2.2 Level AA this component implements the following accessibility features, referencing the [Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/):
-
-Success Criterion 1.3.1 Info and Relationships
-The contents are contained in a tablist role and items in the tab slot are given the tab role. Guidance is given to use headings to signify headings and aria-controls to show relationships between the tab buttons and the area the tab controls. Orientation is defined using aria-orientation. 
-
-SC 1.3.2 Meaningful Sequence
-Content displayed in the markup matches the sequence generated by the web control. 
-
-SC 1.4.1 Use of Color
-Tabs are displayed in a higher prominence to indicate they are clickable
-
-SC 1.4.3: Contrast (Minimum) 
-There is a minimum contrast ratio of 4.5:1 between the text and the background, following color themes.
-
-SC 1.4.10: Reflow 
-The tab list reduces to an accordion style set of items on smaller screens.
-
-SC 1.4.13 Content on Hover or Focus
-Information does not disappear when items are hovered or focus. A mouse click or Enter is required to display the information. 
-
-SC 2.1.1: Keyboard 
-When the user would tab into the tab area, focus is given to the active tab button in the tab area. When the tab area is focused, arrow keys are used to change to alternate tabs. Enter or space is used to activate the tab. Tab will move to the next available item inside the tab panel, or the tab panel if there are no focusable elements inside the tab panel.
-
-SC 2.4.3 Focus Order
-The tab area is considered one focusable item. Items inside the tab panels will receive tab focus as dictated by the source code order. 
-
-SC 2.4.4 Link Purpose (In Context)
-Guidance is given to ensure tabs in the tab area match the headings in the tab panels. 
-
-SC 2.4.6 Headings and Labels
-Guidance is given to ensure headings are used in the tab panels. 
-
-SC 2.4.7: Focus Visible 
-Focus with the component is clearly indicated.
-
-SC 2.5.8: Target Size (Minimum) 
-Buttons maintain a minimum size of 24×24 pixels.
-
-SC 3.2.1 On Focus
-The buttons in the tab area do not change the tabpanel by focusing on them.
-
-SC 4.1.2 Name, Role, Value
-Guidance is given to use aria-control on the tab buttons and aria-labelledby on the tab panel to link it to a header. The component will assign the aria-selected name to signify the selected tab, and the aria-labelledby on each tab panel to tie the panel back to the tab button.

src/il-tabs/il-tabs.wcag.yml

@@ -0,0 +1,54 @@
+- criteria: 1.3.1
+  techniques: [ARIA11, H42]
+  description: The contents are contained in a tablist role and items in the tab slot are given the tab role. Guidance is given to use headings to signify headings and aria-controls to show relationships between the tab buttons and the area the tab controls. Orientation is defined using aria-orientation.
+
+- criteria: 1.3.2
+  techniques: [C27]
+  description: Content displayed in the markup matches the sequence generated by the web control.
+
+- criteria: 1.4.1
+  techniques: [G182]
+  description: Tabs are displayed in a higher prominence to indicate they are clickable
+
+- criteria: 1.4.3
+  techniques: [G18, G145]
+  description: There is a minimum contrast ratio of 4.5:1 between the text and the background, following color themes.
+
+- criteria: 1.4.10
+  techniques: [C32]
+  description: The tab list reduces to an accordion style set of items on smaller screens.
+
+- criteria: 1.4.13
+  description: Information does not disappear when items are hovered or focus. A mouse click or Enter is required to display the information.
+
+- criteria: 2.1.1
+  techniques: [G202]
+  description: When the user would tab into the tab area, focus is given to the active tab button in the tab area. When the tab area is focused, arrow keys are used to change to alternate tabs. Enter or space is used to activate the tab. Tab will move to the next available item inside the tab panel, or the tab panel if there are no focusable elements inside the tab panel.
+
+- criteria: 2.4.3
+  techniques: [G59, C27]
+  description: The tab area is considered one focusable item. Items inside the tab panels will receive tab focus as dictated by the source code order.
+
+- criteria: 2.4.4
+  techniques: [G91]
+  description: Guidance is given to ensure tabs in the tab area match the headings in the tab panels.
+
+- criteria: 2.4.6
+  techniques: [G130]
+  description: Guidance is given to ensure headings are used in the tab panels.
+
+- criteria: 2.4.7
+  techniques: [G149]
+  description: Focus with the component is clearly indicated.
+
+- criteria: 2.5.8
+  techniques: [C42]
+  description: Buttons maintain a minimum size of 24×24 pixels.
+
+- criteria: 3.2.1
+  techniques: [G107]
+  description: The buttons in the tab area do not change the tabpanel by focusing on them.
+
+- criteria: 4.1.2
+  techniques: [ARIA4, ARIA5]
+  description: Guidance is given to use aria-control on the tab buttons and aria-labelledby on the tab panel to link it to a header. The component will assign the aria-selected name to signify the selected tab, and the aria-labelledby on each tab panel to tie the panel back to the tab button.

src/il-tabs/il-tabs.yml

@@ -0,0 +1,12 @@
+slots:
+  - name: tabs
+    description: Tab elements
+  - default: true
+    description: Tab panel elements
+attributes:
+  - name: direction
+    type: string
+    values:
+      - value: horizontal
+        default: true
+      - value: vertical