YML files

src/README.md

@@ -50,32 +50,3 @@ These components aid visitors who have reached the end of the page content.
 * [Social navigation](il-social-icons/README.md)
 * [Navigation menus](./il-nav/README.md) are lists of links, sometimes with multiple levels, that can be displayed in a variety of ways depending on their context.
 * [Navigation sections](./il-nav-section/README.md) are used with menus to group subsections of the navigation, often so they can be hidden or shown based on user interaction.
-
-## Full component list
-
-* [`il-accordion`](./il-accordion/README.md)
-* [`il-back-to-top`](./il-back-to-top/README.md)
-* [`il-breadcrumbs`](./il-breadcrumbs/README.md)
-* [`il-call-to-action`](./il-call-to-action/README.md)
-* [`il-carousel`](./il-carousel/README.md)
-* [`il-columns`](./il-columns/README.md)
-* [`il-footer`](./il-footer/README.md)
-* [`il-grid`](./il-grid/README.md)
-* [`il-header`](./il-header/README.md)
-* [`il-hero`](./il-hero/README.md)
-* [`il-icon`](./il-icon/README.md)
-* [`il-main-nav`](./il-main-nav/README.md)
-* [`il-nav`](./il-nav/README.md)
-* [`il-nav-section`](./il-nav-section/README.md)
-* [`il-page`](./il-page/README.md)
-* [`il-page-title`](./il-page-title/README.md)
-* [`il-pagination`](./il-pagination/README.md)
-* [`il-panel`](il-panel/README.md)
-* [`il-profile`](./il-profile/README.md)
-* [`il-quote`](./il-quote/README.md)
-* [`il-search`](./il-search/README.md)
-* [`il-section`](./il-section/README.md)
-* [`il-slide`](./il-slide/README.md)
-* [`il-social-nav`](il-social-icons/README.md)
-* [`il-statistic`](./il-statistic/README.md)
-* [`il-tabs`](./il-tabs/README.md)

src/il-accordion/README.md

@@ -72,4 +72,4 @@ To control the initial state of a panel when the page is loaded, use the `data-i
   </il-panel>
 </il-accordion>
 ```
-When using the `limit="1"` attribute and multiple panels with `data-il-state="expanded"`, only the last panel will be expanded on page load.
+When using the `limit="1"` attribute and multiple panels with `data-il-state="expanded"`, only the last panel will be expanded on page load.

src/il-accordion/il-accordion.wcag.yml

@@ -0,0 +1,4 @@
+- criteria: 1.4.1
+  description: Wherever color is used to differentiate between navigation levels or link states, there is a minimum contrast ratio of 3:1 between different colors. Shifts in position and/or indentation are used as additional indicators of navigation level.
+- criteria: 1.4.3
+  techniques: [G18, G145]

src/il-accordion/il-accordion.yml

@@ -0,0 +1,6 @@
+name: Accordion
+category: Content
+attributes:
+  limit:
+    type: integer
+    notes: The only valid value is `1`.

src/il-back-to-top/il-back-to-top.wcag.yml

@@ -0,0 +1,2 @@
+- criteria: 1.4.3
+  techniques: [G18, G145]

src/il-back-to-top/il-back-to-top.yml

@@ -0,0 +1,7 @@
+name: Back to top
+category: Bottom-of-page
+css:
+  - variable: --il-back-to-top-right
+    default: 48px
+  - variable: --il-back-to-top-bottom
+    default: 48px

src/il-breadcrumbs/il-breadcrumbs.wcag.yml

@@ -0,0 +1,2 @@
+- criteria: 1.4.3
+  techniques: [G18, G145]

src/il-breadcrumbs/il-breadcrumbs.yml

@@ -0,0 +1,2 @@
+name: Breadcrumbs
+category: Navigation

src/il-call-to-action/il-call-to-action.wcag.yml

@@ -0,0 +1,2 @@
+- criteria: 1.4.3
+  techniques: [G18, G145]

src/il-call-to-action/il-call-to-action.yml

@@ -0,0 +1,2 @@
+name: Call to action
+category: Navigation

src/il-carousel/il-carousel.wcag.yml

@@ -0,0 +1,2 @@
+- criteria: 1.4.3
+  techniques: [G18, G145]

src/il-carousel/il-carousel.yml

@@ -0,0 +1,2 @@
+name: Carousel
+category: Container

src/il-footer/il-footer.wcag.yml

@@ -0,0 +1,2 @@
+- criteria: 1.4.3
+  techniques: [G18, G145]

src/il-footer/il-footer.yml

@@ -0,0 +1,2 @@
+name: Footer
+category: Bottom-of-page

src/il-main-nav/il-main-nav.access.yml

@@ -0,0 +1,102 @@
+## Accessibility
+
+In compliance with [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Level AA this component implements the following accessibility features:
+
+### [SC 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) [A]
+
+  The contents of this component are contained in a [navigation landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html) and  arranged in [lists](https://w3c.github.io/aria/#list). Lists can be nested to reflect the site hierarchy.
+
+  #### References
+
+  * [Technique H97: Grouping related links using the nav element](https://www.w3.org/WAI/WCAG21/Techniques/html/H97.html)
+  * [Technique H48: Using ol, ul and dl for lists or groups of links](https://www.w3.org/WAI/WCAG21/Techniques/html/H48.html)
+
+  ### [SC 1.4.1: Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) [A]
+
+  Wherever color is used to differentiate between navigation levels or link states, there is a minimum contrast ratio of 3:1 between different colors. Shifts in position and/or indentation are used as additional indicators of navigation level.
+
+  ### [SC 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) [AA]
+
+  There is a minimum contrast ratio of 4.5:1 between the label of a navigation item and its background.
+
+  ### [SC 1.4.10: Reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html) [AA]
+
+  The navigation reduces to a single column of items on smaller screens, eliminating the need for horizontal scrolling.
+
+  ### [SC 1.4.11: Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) [AA]
+
+  The icon that indicates the state of an expandable navigation item uses the same foreground and background colors as the item label, ensuring that the icon meets the minimum contrast ratio for text.
+
+  ### [SC 1.4.13: Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html) [AA]
+
+  Expandable navigation items do not change state in response to hover and focus events. A click event (mouse click or Space/Enter keypress) is required to toggle the item.
+
+  Clicking on a target outside the navigation will close any open dropdowns. Pressing Esc will close any open dropdowns and return focus to a top-level menu item.
+
+### [SC 2.1.1: Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) [A]
+
+The following keyboard commands are meaningful when focus is within this component:
+
+  * `Tab` moves focus forward to the closest next focusable element in the navigation or to the closest next focusable element following the navigation.
+  * `Shift+Tab` moves focus backward to the closest previous focusable element in the navigation or to the closest previous focusable element preceding the navigation.
+  * `Space` and `Enter` activate a navigation item exactly as if they were clicked.
+  * `Esc` closes any expanded navigation section and returns focus to the closest top-level item.
+
+  Arrow navigation is not currently supported at this time.
+
+  #### References
+
+  * [Example Disclosure Navigation Menu](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)
+
+
+  ### [SC 2.1.2: No Keyboard Trap](https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html) [A]
+
+  Pressing `Esc` while focus is within the component closes any expanded sections and returns focus to the top-level navigation items.
+
+  ### [SC 2.4.3: Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) [A]
+
+  Focus order is dictated by the source code order, following the links in the underlying list from first to last, skipping any focusable elements hidden within collapsed navigation sections.
+
+  For expanded navigation sections, the focus order proceeds from the section toggle to the first item in the expanded section. For expanded sections with both a link and a toggle, focus order proceeds from the link to the toggle, then to the first item in the section.
+
+### [SC 2.4.6: Headings and Labels](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html) [AA]
+
+The default label, `Main`, satisfies the following recommendations for a navigation landmark name:
+
+  * It distinguishes the main navigation from other navigation elements on the page.
+  * It does not contain the word `navigation`.
+  * It is 1-3 words in length.
+  * It is capitalized.
+
+  #### References
+
+  * [Technique ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA14.html)
+  * [Composing Effective and User-friendly Accessible Names](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#naming_effectively)
+
+
+  ### [SC 2.4.7: Focus Visible](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html) [AA]
+
+  Focus within the component is clearly indicated.
+
+  ### [SC 2.5.8: Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) [AA]
+
+  Non-inline links and toggle buttons maintain a minimum size of 22×22 pixels.
+
+  ### [SC 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) [A]
+
+
+  toggle button
+  * aria-controls="IDREF"
+  * aria-expanded="true/false"
+  container
+  * id="IDREF"
+  link
+  * aria-current="page"
+
+  * removes any existing aria-current attributes in the nav
+  * sets aria-current="page" on focused link
+
+
+  #### References
+
+  * [Using WAI-ARIA state and property attributes to expose the state of a user interface component](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA5)

src/toolkit.yml

@@ -0,0 +1,60 @@
+categories:
+  - name: Content
+    description: These components represent distinct, specialized pieces of content.
+  - name: Container
+    description: These components group multiple pieces of content and offer different methods of browsing them.
+  - name: Layout
+    description: These components create web pages and arrange content inside them.
+  - name: Top-of-page
+    description: These components help orient users to the page.
+  - name: Bottom-of-page
+    description: These components aid visitors who have reached the end of the page content.
+  - name: Navigation
+
+
+  ## Content components
+
+    * [Calls to action](./il-call-to-action/README.md) invite users to perform a specific action, like start an application or create an email.
+    * [Quotes](./il-quote/README.md) are short, meaningful pieces of text that are attributed to a person, publication, or other source.
+    * [Statistics](./il-statistic/README.md) call attention to important numbers, like rankings and percentages.
+
+  ## Container components
+
+    These components group multiple pieces of content and offer different methods of browsing them.
+
+    * [Accordions](./il-accordion/README.md) present content in a vertical column whose sections can be collapsed and expanded.
+    * [Carousels](./il-carousel/README.md) arrange content in an endless rotation which can be paused, advanced, and rewound.
+    * [Tabs](./il-tabs/README.md) present content as layers, each with a visible tab that is used to select the visible layer.
+
+  ## Layout components
+
+    These components create web pages and arrange content inside them.
+
+    * [Pages](./il-page/README.md) wrap the content for complete web pages, with areas for the header, footer, and other layout elements.
+    * [Sections](./il-section/README.md) group distinct portions of the page, each of which may have a specialized presentation.
+    * [Grids](./il-grid/README.md) arrange pieces of content into rows and columns, left to right and top to bottom.
+    * [Columns](./il-columns/README.md) break up content into newspaper-style columns.
+
+  ## Top-of-page components
+
+    These components help orient users to the page.
+
+    * [The campus header](./il-header/README.md) lets the user know where they are and contains resources like the main navigation and the search form.
+    * [Heroes](./il-hero/README.md) use large, interesting images to introduce the page.
+    * [Page titles](./il-page-title/README.md) precede any page content, with optional areas for elements like breadcrumbs and bylines.
+
+  ## Bottom-of-page-components
+
+    These components aid visitors who have reached the end of the page content.
+
+    * [The campus footer](./il-footer/README.md) contains contact information for the site and links to important resources within the site and on campus.
+    * [Back to top](./il-back-to-top/README.md) scrolls users to the beginning of the current page.
+
+  ## Navigation components
+
+    * The [main navigation](./il-main-nav/README.md) contains the primary navigation for the site.
+    * [Breadcrumbs](./il-breadcrumbs/README.md)
+    * [Pagination](./il-pagination/README.md)
+    * [Social navigation](il-social-icons/README.md)
+    * [Navigation menus](./il-nav/README.md) are lists of links, sometimes with multiple levels, that can be displayed in a variety of ways depending on their context.
+    * [Navigation sections](./il-nav-section/README.md) are used with menus to group subsections of the navigation, often so they can be hidden or shown based on user interaction.