From 03c0d3d89ddf217c8cca4b19ec7ef7e91cc91e9b Mon Sep 17 00:00:00 2001 From: msharkey Date: Thu, 14 Dec 2023 14:51:39 -0600 Subject: [PATCH] YML files --- src/README.md | 29 ----- src/il-accordion/README.md | 2 +- src/il-accordion/il-accordion.wcag.yml | 4 + src/il-accordion/il-accordion.yml | 6 ++ src/il-back-to-top/il-back-to-top.wcag.yml | 2 + src/il-back-to-top/il-back-to-top.yml | 7 ++ src/il-breadcrumbs/il-breadcrumbs.wcag.yml | 2 + src/il-breadcrumbs/il-breadcrumbs.yml | 2 + .../il-call-to-action.wcag.yml | 2 + src/il-call-to-action/il-call-to-action.yml | 2 + src/il-carousel/il-carousel.wcag.yml | 2 + src/il-carousel/il-carousel.yml | 2 + src/il-columns/README.md | 42 -------- src/il-footer/il-footer.wcag.yml | 2 + src/il-footer/il-footer.yml | 2 + src/il-main-nav/il-main-nav.access.yml | 102 ++++++++++++++++++ src/toolkit.yml | 60 +++++++++++ 17 files changed, 198 insertions(+), 72 deletions(-) create mode 100644 src/il-accordion/il-accordion.wcag.yml create mode 100644 src/il-accordion/il-accordion.yml create mode 100644 src/il-back-to-top/il-back-to-top.wcag.yml create mode 100644 src/il-back-to-top/il-back-to-top.yml create mode 100644 src/il-breadcrumbs/il-breadcrumbs.wcag.yml create mode 100644 src/il-breadcrumbs/il-breadcrumbs.yml create mode 100644 src/il-call-to-action/il-call-to-action.wcag.yml create mode 100644 src/il-call-to-action/il-call-to-action.yml create mode 100644 src/il-carousel/il-carousel.wcag.yml create mode 100644 src/il-carousel/il-carousel.yml delete mode 100644 src/il-columns/README.md create mode 100644 src/il-footer/il-footer.wcag.yml create mode 100644 src/il-footer/il-footer.yml create mode 100644 src/il-main-nav/il-main-nav.access.yml create mode 100644 src/toolkit.yml diff --git a/src/README.md b/src/README.md index 1409a16a..f756dbac 100644 --- a/src/README.md +++ b/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) diff --git a/src/il-accordion/README.md b/src/il-accordion/README.md index 209c6516..402d1066 100644 --- a/src/il-accordion/README.md +++ b/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 ``` -When using the `limit="1"` attribute and multiple panels with `data-il-state="expanded"`, only the last panel will be expanded on page load. \ No newline at end of file +When using the `limit="1"` attribute and multiple panels with `data-il-state="expanded"`, only the last panel will be expanded on page load. diff --git a/src/il-accordion/il-accordion.wcag.yml b/src/il-accordion/il-accordion.wcag.yml new file mode 100644 index 00000000..8873d3db --- /dev/null +++ b/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] \ No newline at end of file diff --git a/src/il-accordion/il-accordion.yml b/src/il-accordion/il-accordion.yml new file mode 100644 index 00000000..80eff911 --- /dev/null +++ b/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`. diff --git a/src/il-back-to-top/il-back-to-top.wcag.yml b/src/il-back-to-top/il-back-to-top.wcag.yml new file mode 100644 index 00000000..7fbf2047 --- /dev/null +++ b/src/il-back-to-top/il-back-to-top.wcag.yml @@ -0,0 +1,2 @@ +- criteria: 1.4.3 + techniques: [G18, G145] \ No newline at end of file diff --git a/src/il-back-to-top/il-back-to-top.yml b/src/il-back-to-top/il-back-to-top.yml new file mode 100644 index 00000000..10c9ee88 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/il-breadcrumbs/il-breadcrumbs.wcag.yml b/src/il-breadcrumbs/il-breadcrumbs.wcag.yml new file mode 100644 index 00000000..7fbf2047 --- /dev/null +++ b/src/il-breadcrumbs/il-breadcrumbs.wcag.yml @@ -0,0 +1,2 @@ +- criteria: 1.4.3 + techniques: [G18, G145] \ No newline at end of file diff --git a/src/il-breadcrumbs/il-breadcrumbs.yml b/src/il-breadcrumbs/il-breadcrumbs.yml new file mode 100644 index 00000000..93fd91cb --- /dev/null +++ b/src/il-breadcrumbs/il-breadcrumbs.yml @@ -0,0 +1,2 @@ +name: Breadcrumbs +category: Navigation \ No newline at end of file diff --git a/src/il-call-to-action/il-call-to-action.wcag.yml b/src/il-call-to-action/il-call-to-action.wcag.yml new file mode 100644 index 00000000..7fbf2047 --- /dev/null +++ b/src/il-call-to-action/il-call-to-action.wcag.yml @@ -0,0 +1,2 @@ +- criteria: 1.4.3 + techniques: [G18, G145] \ No newline at end of file diff --git a/src/il-call-to-action/il-call-to-action.yml b/src/il-call-to-action/il-call-to-action.yml new file mode 100644 index 00000000..1487e7f7 --- /dev/null +++ b/src/il-call-to-action/il-call-to-action.yml @@ -0,0 +1,2 @@ +name: Call to action +category: Navigation \ No newline at end of file diff --git a/src/il-carousel/il-carousel.wcag.yml b/src/il-carousel/il-carousel.wcag.yml new file mode 100644 index 00000000..7fbf2047 --- /dev/null +++ b/src/il-carousel/il-carousel.wcag.yml @@ -0,0 +1,2 @@ +- criteria: 1.4.3 + techniques: [G18, G145] \ No newline at end of file diff --git a/src/il-carousel/il-carousel.yml b/src/il-carousel/il-carousel.yml new file mode 100644 index 00000000..c987e0f8 --- /dev/null +++ b/src/il-carousel/il-carousel.yml @@ -0,0 +1,2 @@ +name: Carousel +category: Container \ No newline at end of file diff --git a/src/il-columns/README.md b/src/il-columns/README.md deleted file mode 100644 index a794d758..00000000 --- a/src/il-columns/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# Columns - -This is a layout component that spreads content across multiple, newspaper-style columns. This is not ideal for long sections of content, but it can improve the readability of long lists of short items. - -## Arranging content in columns - -The `count` attribute determines the number of columns in the layout. - -```html - - - -``` - -The content placed inside `il-columns` will be split across the total number of columns. Elements will be split in order to balance the amount of content in each column. - -``` -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * This list * distributed * three columns - * of items * evenly * of this layout - * will be * across the -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` -If there is not enough available horizontal space for the requested number of columns, the number will be reduced to accommodate the available space. On very small screens, the content will be presented in a single column. - -## Using columns with navigation menus - -Columns are a good choice for arranging small collections of navigation menus, as might appear in the footer. When multiple `il-nav` components are placed in an `il-column` component, the toolkit ensures that: - -* No column splits occur between the title of a menu and its contents -* No column splits occur within a menu - -[screenshot of the footer of a website with 4 navigation menus arranged in 2 columns] \ No newline at end of file diff --git a/src/il-footer/il-footer.wcag.yml b/src/il-footer/il-footer.wcag.yml new file mode 100644 index 00000000..7fbf2047 --- /dev/null +++ b/src/il-footer/il-footer.wcag.yml @@ -0,0 +1,2 @@ +- criteria: 1.4.3 + techniques: [G18, G145] \ No newline at end of file diff --git a/src/il-footer/il-footer.yml b/src/il-footer/il-footer.yml new file mode 100644 index 00000000..5d1c2f0f --- /dev/null +++ b/src/il-footer/il-footer.yml @@ -0,0 +1,2 @@ +name: Footer +category: Bottom-of-page \ No newline at end of file diff --git a/src/il-main-nav/il-main-nav.access.yml b/src/il-main-nav/il-main-nav.access.yml new file mode 100644 index 00000000..92df7ba8 --- /dev/null +++ b/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) diff --git a/src/toolkit.yml b/src/toolkit.yml new file mode 100644 index 00000000..707685cc --- /dev/null +++ b/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.