HTML Source Code
+To copy the following HTML code, please open it in CodePen.
Filter Patterns
+
+
+
+
+ -
+
-
-
+
-
Accordion (Sections With Show/Hide Functionality)
+An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.-- +
- -
+
-
Alert
+An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.-- +
- -
+
-
Alert and Message Dialogs
+An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.-- +
- -
+
-
Breadcrumb
+A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order.-- +
- -
+
-
Button
+A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.-- +
- -
+
-
Carousel (Slide Show or Image Rotator)
+A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.-- +
- -
+
-
Checkbox
+WAI-ARIA supports two types of checkbox widgets: dual-state checkboxes toggle between two choices -- checked and not checked -- and tri-state checkboxes, which allow an additional third state known as partially checked.-- +
- -
+
-
Combobox
+A combobox is an input widget that has an associated popup.-- +
- -
+
-
Dialog (Modal)
+A dialog is a window overlaid on either the primary window or another dialog window.-- +
- -
+
-
Disclosure (Show/Hide)
+A disclosure is a widget that enables content to be either collapsed (hidden) or expanded (visible).-- +
- -
+
-
Feed
+A feed is a section of a page that automatically loads new sections of content as the user scrolls.-- +
- -
+
-
Grid (Interactive Tabular Data and Layout Containers)
+A grid widget is a container that enables users to navigate the information or interactive elements it contains using directional navigation keys, such as arrow keys, Home, and End.-- +
- -
+
-
Landmarks
+Landmarks are a set of eight roles that identify the major sections of a page.-- +
- -
+
-
Link
+A link widget provides an interactive reference to a resource.-- +
- -
+
-
Listbox
+A listbox widget presents a list of options and allows a user to select one or more of them.-- +
- -
+
-
Menu and Menubar
+A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.-- +
- -
+
-
Menu Button
+A menu button is a button that opens a menu as described in the Menu and Menubar Pattern.-- +
- -
+
-
Meter
+A meter is a graphical display of a numeric value that varies within a defined range.-- +
- -
+
-
Radio Group
+A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.-- +
- -
+
-
Slider
+A slider is an input where the user selects a value from within a given range.-- +
- -
+
-
Slider (Multi-Thumb)
+A multi-thumb slider implements the Slider Pattern but includes two or more thumbs, often on a single rail.-- +
- -
+
-
Spinbutton
+A spinbutton is an input widget that restricts its value to a set or range of discrete values.-- +
- -
+
-
Switch
+A switch is an input widget that allows users to choose one of two values: on or off.-- +
- -
+
-
Table
+Like an HTML table element, a WAI-ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget.-- +
- -
+
-
Tabs
+Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.-- +
- -
+
-
Toolbar
+A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.-- +
- -
+
-
Tooltip
+A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.-- +
- -
+
-
Tree View
+A tree view widget presents a hierarchical list.-- +
- -
+
-
Treegrid
+A treegrid widget presents a hierarchical data grid consisting of tabular information that is editable or interactive.-- +
- -
+
-
Window Splitter
+A window splitter is a moveable separator between two sections, or panes, of a window that enables users to change the relative size of the panes.+ + diff --git a/ARIA/apg/patterns/radio/examples/radio-activedescendant.md b/ARIA/apg/patterns/radio/examples/radio-activedescendant.md index f722af01a..14df3d86e 100644 --- a/ARIA/apg/patterns/radio/examples/radio-activedescendant.md +++ b/ARIA/apg/patterns/radio/examples/radio-activedescendant.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio-activedescendant/ sidebar: true -footer: " " +footer: " " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -327,13 +327,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); -+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ -HTML Source Code
+To copy the following HTML code, please open it in CodePen.
+ diff --git a/Gemfile.lock b/Gemfile.lock index 579793eb2..977e37875 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -10,30 +10,41 @@ PATH jekyll-remote-theme jekyll-seo-tag jekyll-sitemap - rouge (= 3.30.0) wai-website-plugin GEM remote: https://rubygems.org/ specs: - addressable (2.8.1) - public_suffix (>= 2.0.2, < 6.0) + addressable (2.8.7) + public_suffix (>= 2.0.2, < 7.0) + bigdecimal (3.1.8) colorator (1.1.0) - concurrent-ruby (1.1.10) + concurrent-ruby (1.3.3) em-websocket (0.5.3) eventmachine (>= 0.12.9) http_parser.rb (~> 0) eventmachine (1.2.7) - faraday (2.6.0) - faraday-net_http (>= 2.0, < 3.1) - ruby2_keywords (>= 0.0.4) - faraday-net_http (3.0.1) - ffi (1.15.5) + faraday (2.9.2) + faraday-net_http (>= 2.0, < 3.2) + faraday-net_http (3.1.0) + net-http + ffi (1.17.0) + ffi (1.17.0-arm64-darwin) + ffi (1.17.0-x86_64-linux-gnu) forwardable-extended (2.6.0) + google-protobuf (4.27.2) + bigdecimal + rake (>= 13) + google-protobuf (4.27.2-arm64-darwin) + bigdecimal + rake (>= 13) + google-protobuf (4.27.2-x86_64-linux) + bigdecimal + rake (>= 13) http_parser.rb (0.8.0) - i18n (1.12.0) + i18n (1.14.5) concurrent-ruby (~> 1.0) - jekyll (4.3.1) + jekyll (4.3.3) addressable (~> 2.4) colorator (~> 1.0) em-websocket (~> 0.5) @@ -49,23 +60,23 @@ GEM safe_yaml (~> 1.0) terminal-table (>= 1.8, < 4.0) webrick (~> 1.7) - jekyll-github-metadata (2.15.0) + jekyll-github-metadata (2.16.1) jekyll (>= 3.4, < 5.0) - octokit (~> 4.0, != 4.4.0) + octokit (>= 4, < 7, != 4.4.0) jekyll-include-cache (0.2.1) jekyll (>= 3.7, < 5.0) jekyll-paginate (1.1.0) jekyll-redirect-from (0.16.0) jekyll (>= 3.3, < 5.0) - jekyll-relative-links (0.6.1) + jekyll-relative-links (0.7.0) jekyll (>= 3.3, < 5.0) jekyll-remote-theme (0.4.3) addressable (~> 2.0) jekyll (>= 3.5, < 5.0) jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0) rubyzip (>= 1.3.0, < 3.0) - jekyll-sass-converter (2.2.0) - sassc (> 2.0.1, < 3.0) + jekyll-sass-converter (3.0.0) + sass-embedded (~> 1.54) jekyll-seo-tag (2.8.0) jekyll (>= 3.8, < 5.0) jekyll-sitemap (1.4.0) @@ -76,45 +87,55 @@ GEM rexml kramdown-parser-gfm (1.1.0) kramdown (~> 2.0) - liquid (4.0.3) - listen (3.7.1) + liquid (4.0.4) + listen (3.9.0) rb-fsevent (~> 0.10, >= 0.10.3) rb-inotify (~> 0.9, >= 0.9.10) mercenary (0.4.0) - mini_portile2 (2.8.0) - nokogiri (1.13.9) - mini_portile2 (~> 2.8.0) + mini_portile2 (2.8.7) + net-http (0.4.1) + uri + nokogiri (1.16.6) + mini_portile2 (~> 2.8.2) racc (~> 1.4) - nokogiri (1.13.9-arm64-darwin) + nokogiri (1.16.6-arm64-darwin) racc (~> 1.4) - nokogiri (1.13.9-x86_64-linux) + nokogiri (1.16.6-x86_64-darwin) racc (~> 1.4) - octokit (4.25.1) + nokogiri (1.16.6-x86_64-linux) + racc (~> 1.4) + octokit (6.1.1) faraday (>= 1, < 3) sawyer (~> 0.9) pathutil (0.16.2) forwardable-extended (~> 2.6) - public_suffix (5.0.0) - racc (1.6.0) + public_suffix (6.0.0) + racc (1.8.0) + rake (13.2.1) rb-fsevent (0.11.2) - rb-inotify (0.10.1) + rb-inotify (0.11.1) ffi (~> 1.0) - rexml (3.2.5) - rouge (3.30.0) - ruby2_keywords (0.0.5) + rexml (3.3.1) + strscan + rouge (4.3.0) rubyzip (2.3.2) safe_yaml (1.0.5) - sassc (2.4.0) - ffi (~> 1.9) + sass-embedded (1.77.5) + google-protobuf (>= 3.25, < 5.0) + rake (>= 13) + sass-embedded (1.77.5-x86_64-darwin) + google-protobuf (>= 3.25, < 5.0) sawyer (0.9.2) addressable (>= 2.3.5) faraday (>= 0.17.3, < 3) + strscan (3.1.0) terminal-table (3.0.2) unicode-display_width (>= 1.1.1, < 3) - unicode-display_width (2.3.0) + unicode-display_width (2.5.0) + uri (0.13.0) wai-website-plugin (0.2) jekyll (>= 3.6, < 5.0) - webrick (1.7.0) + webrick (1.8.1) PLATFORMS ruby @@ -126,4 +147,4 @@ DEPENDENCIES wai-gems! BUNDLED WITH - 2.3.10 + 2.5.14 diff --git a/_external/aria-practices b/_external/aria-practices index 39fb654e5..2d60c413e 160000 --- a/_external/aria-practices +++ b/_external/aria-practices @@ -1 +1 @@ -Subproject commit 39fb654e5146151ee70675af6ae755a72d8f7ff4 +Subproject commit 2d60c413ec23875a30162364a7e715b26875d9db diff --git a/_external/data b/_external/data index 2fa5e7cb6..bb1336392 160000 --- a/_external/data +++ b/_external/data @@ -1 +1 @@ -Subproject commit 2fa5e7cb6f4eb5f35583a94b9a5890a0f2a0a9ec +Subproject commit bb1336392685c5dec9dbf30c5fb5c9e0c0c9260d diff --git a/content-assets/wai-aria-practices/patterns/grid/examples/js/dataGrid.js b/content-assets/wai-aria-practices/patterns/grid/examples/js/dataGrid.js index 375fd4063..0c1a0dcf7 100644 --- a/content-assets/wai-aria-practices/patterns/grid/examples/js/dataGrid.js +++ b/content-assets/wai-aria-practices/patterns/grid/examples/js/dataGrid.js @@ -194,9 +194,10 @@ aria.Grid.prototype.isValidCell = function (row, col) { * Returns whether or not the cell has been hidden. */ aria.Grid.prototype.isHidden = function (row, col) { + // prettier-ignore var cell = this.gridNode - .querySelectorAll(aria.GridSelector.ROW) - [row].querySelectorAll(aria.GridSelector.CELL)[col]; + .querySelectorAll(aria.GridSelector.ROW)[row] + .querySelectorAll(aria.GridSelector.CELL)[col]; return aria.Utils.hasClass(cell, aria.CSSClass.HIDDEN); }; diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css index 0dc3c3fc0..2a966d635 100644 --- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css +++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css @@ -67,23 +67,23 @@ @media (forced-colors: active) { .rating-slider svg .focus-ring { - fill: linktext; + fill: buttontext; } .rating-slider svg .target { - stroke: linktext; + stroke: buttontext; } .rating-slider svg .label { - fill: linktext; + fill: buttontext; } .rating-slider svg .description { - fill: linktext; + fill: buttontext; } .rating-slider svg .current .target { - fill: linktext; + fill: buttontext; } .rating-slider svg .current .label { diff --git a/content-assets/wai-aria-practices/shared/css/core.css b/content-assets/wai-aria-practices/shared/css/core.css index ab1619cdb..f6b1f1068 100644 --- a/content-assets/wai-aria-practices/shared/css/core.css +++ b/content-assets/wai-aria-practices/shared/css/core.css @@ -69,6 +69,7 @@ th .example-header { margin-left: 1em; } +.example-code button, .example-header button { display: inline-block; position: relative; diff --git a/content-assets/wai-aria-practices/shared/js/app.js b/content-assets/wai-aria-practices/shared/js/app.js index 58cbd1e86..05f444abf 100644 --- a/content-assets/wai-aria-practices/shared/js/app.js +++ b/content-assets/wai-aria-practices/shared/js/app.js @@ -20,14 +20,20 @@ // Determine we are on an example page if (!document.location.href.match(/examples\/[^/]+\.html/)) return; + const isExperimental = + document.querySelector('main')?.getAttribute('data-content-phase') === + 'experimental'; + + const usageWarningLink = isExperimental + ? '/templates/experimental-example-usage-warning.html' + : '/templates/example-usage-warning.html'; + // Generate the usage warning link using app.js link as a starting point const scriptSource = document .querySelector('[src$="app.js"]') .getAttribute('src'); - const fetchSource = scriptSource.replace( - '/js/app.js', - '/templates/example-usage-warning.html' - ); + + const fetchSource = scriptSource.replace('/js/app.js', usageWarningLink); // Load and parse the usage warning and insert it before the h1 const html = await (await fetch(fetchSource)).text(); diff --git a/content-assets/wai-aria-practices/shared/js/examples.js b/content-assets/wai-aria-practices/shared/js/examples.js index 27beafe0e..ac03b91d9 100644 --- a/content-assets/wai-aria-practices/shared/js/examples.js +++ b/content-assets/wai-aria-practices/shared/js/examples.js @@ -54,6 +54,7 @@ aria.widget.SourceCode = function () { this.code = new Array(); this.exampleHeader = new Array(); this.resources = new Array(); + this.HTMLDescription = new Array(); }; /** @@ -63,6 +64,7 @@ aria.widget.SourceCode = function () { * @param {string} codeId - ID of element containing only and all of the html used to render the example widget * @param {string} exampleHeaderId - ID of header element under which the "Open in Codepen" button belongs * @param {string} cssJsFilesId - ID of element containing links to all the relevant js and css files used for the example widget + * @param {string} HTMLDescriptionId - ID of the separator element under the HTML Source Code which the "Open in Codepen" button belongs * @function add * @memberof aria.widget.SourceCode */ @@ -70,11 +72,13 @@ aria.widget.SourceCode.prototype.add = function ( locationId, codeId, exampleHeaderId, - cssJsFilesId + cssJsFilesId, + HTMLDescriptionId ) { this.location[this.location.length] = locationId; this.code[this.code.length] = codeId; this.exampleHeader[this.exampleHeader.length] = exampleHeaderId; + this.HTMLDescription[this.HTMLDescription.length] = HTMLDescriptionId; this.resources[this.resources.length] = cssJsFilesId; }; @@ -88,10 +92,20 @@ aria.widget.SourceCode.prototype.make = function () { for (var i = 0; i < this.location.length; i++) { var sourceCodeNode = document.getElementById(this.location[i]); var nodeCode = document.getElementById(this.code[i]); + var exampleAmount = document.querySelectorAll('[id^="ex"]'); sourceCodeNode.className = 'sourcecode'; this.createCode(sourceCodeNode, nodeCode, 0, true); + if (this.HTMLDescription[i]) { + addOpenInCodePenForm( + i + exampleAmount, + this.HTMLDescription[i], + this.code[i], + this.resources[i] + ); + } + // Remove unnecessary `HTML Source Code
+To copy the following HTML code, please open it in CodePen.
` element. if (sourceCodeNode.innerHTML.startsWith('
')) { sourceCodeNode.innerHTML = sourceCodeNode.innerHTML.replace('
', ''); @@ -369,7 +383,7 @@ function addOpenInCodePenForm( exampleFilesId ) { var jsonInputId = 'codepen-data-ex-' + exampleIndex; - var buttonId = exampleCodeId + '-codepenbutton'; + var buttonId = exampleHeaderId + '-codepenbutton'; var form = document.createElement('form'); form.setAttribute('action', 'https://codepen.io/pen/define'); diff --git a/content-assets/wai-aria-practices/shared/js/filterBySearch.js b/content-assets/wai-aria-practices/shared/js/filterBySearch.js new file mode 100644 index 000000000..38b3e14a2 --- /dev/null +++ b/content-assets/wai-aria-practices/shared/js/filterBySearch.js @@ -0,0 +1,175 @@ +'use strict'; + +/** + * @namespace aria + */ + +var aria = aria || {}; + +/* ---------------------------------------------------------------- */ +/* ARIA Filter Namespace */ +/* ---------------------------------------------------------------- */ + +aria.Filter = aria.Filter || {}; + +/** + * Filters list items within a container based on a search term. + * + * @function + * @memberof aria.Filter + * @param {string} searchTerm - The term to filter the list items by. + * @param {string} containerSelector - The CSS selector for the container holding the list items. + * @param {string} className - The class name of the elements within each list item to be checked against the search term. + * @param {string} noResultsElementId - The id of the element to show when no results are found. + * @description + * This function filters the list items within a specified container by comparing the text content + * of elements with a given class name to the provided search term. List items that do not match + * the search term will be hidden. + */ +aria.Filter.filterListItems = function ( + searchTerm, + containerSelector, + className, + noResultsElementId +) { + const container = document.querySelector(containerSelector); + const listItems = container.getElementsByTagName('li'); + const filter = searchTerm.toUpperCase(); + let hasResults = false; + Array.from(listItems).forEach((element) => { + const isMatch = aria.Filter.applyFilterToElement( + element, + filter, + className + ); + if (isMatch) { + hasResults = true; + } + }); + aria.Filter.updateVisibility(noResultsElementId, !hasResults); +}; + +/** + * Updates the visibility of an element based on the search results. + * + * @function updateVisibility + * @param {string} id - The id of the element to update. + * @param {boolean} isVisible - True if the element should be visible, false otherwise. + */ +aria.Filter.updateVisibility = function (id, isVisible) { + const el = document.getElementById(id); + el.style.display = isVisible ? '' : 'none'; + el.setAttribute('aria-hidden', String(!isVisible)); +}; + +/** + * This function checks if the text content of the child element with the specified class name contains the filter term. + * If the text content matches the filter, th + * + * @function applyFilterToElement + * @param {HTMLElement} element - The element to which the visibility filter will be applied. + * @param {string} filter - The text filter term, already converted to uppercase. + * @param {string} className - The class name of the child element whose text content is checked against the filter. + * @returns {boolean} True if the filter term is found in the text value, false otherwise. + */ +aria.Filter.applyFilterToElement = function (element, filter, className) { + const targetElement = element.getElementsByClassName(className)[0]; + if (targetElement) { + const textValue = targetElement.textContent || targetElement.innerText; + const isMatch = aria.Filter.isTextMatch(textValue, filter); + element.style.display = isMatch ? '' : 'none'; + return isMatch; + } + return false; +}; + +/** + * Clears the input element and filters the list items based on the empty string. + * Sets focus back to the input element. + * + * @param {HTMLElement} inputElement - The input element to clear. + * @param {string} containerSelector - The CSS selector for the container holding the list items. + * @param {string} className - The class name of the elements within each list item to be checked against the search term. + * @param {string} noResultsElementId - The id of the element to show when no results are found. + */ +aria.Filter.clearInput = function ( + inputElement, + containerSelector, + className, + noResultsElementId +) { + inputElement.value = ''; + aria.Filter.filterListItems( + '', + containerSelector, + className, + noResultsElementId + ); + inputElement.focus(); +}; + +/** + * Determines if the provided text value contains the filter term, ignoring case. + * + * @function isTextMatch + * @param {string} textValue - The text to search within. + * @param {string} filter - The term to search for, which should already be in uppercase. + * @returns {boolean} True if the filter term is found in the text value, false otherwise. + */ +aria.Filter.isTextMatch = function (textValue, filter) { + return textValue.toUpperCase().indexOf(filter) > -1; +}; + +/** + * Handles the click event for a pattern results view button. + * + * @param {HTMLElement} selectedViewButton - The view button that was clicked. + */ +aria.Filter.onViewButtonClicked = function (selectedViewButton) { + aria.Filter.deactivateAllViewButtons(); + aria.Filter.updateActiveViewButton(selectedViewButton); + + const newViewClassName = aria.Filter.getNewViewClassName(selectedViewButton); + aria.Filter.setResultsViewClass(newViewClassName); +}; + +/** + * Deactivates all view buttons by setting aria-pressed attribute and removing 'active' class + */ +aria.Filter.deactivateAllViewButtons = function () { + const buttons = document.querySelectorAll('.view-toggle button'); + buttons.forEach((btn) => { + btn.setAttribute('aria-pressed', 'false'); + btn.classList.remove('active'); + }); +}; + +/** + * Determines the new view class name based on the selected view button. + * + * @param {HTMLElement} selectedViewButton - The view button that was clicked. + * @returns {string} The new view class name. + */ +aria.Filter.getNewViewClassName = function (selectedViewButton) { + return selectedViewButton.id === 'listViewButton' ? 'list' : 'tiles'; +}; + +/** + * Updates the active view button by setting aria-pressed attribute and adding 'active' class + * + * @param {HTMLElement} selectedViewButton - The view button that was clicked. + */ +aria.Filter.updateActiveViewButton = function (selectedViewButton) { + selectedViewButton.setAttribute('aria-pressed', 'true'); + selectedViewButton.classList.add('active'); +}; + +/** + * Sets the class name of the patterns result container to either 'list' or 'tiles' based on the selected view button + * + * @param {string} viewClass - The class name of the patterns result container. + */ +aria.Filter.setResultsViewClass = function (viewClass) { + const patternsContainer = document.getElementById('patterns'); + patternsContainer.className = viewClass; +}; diff --git a/content-assets/wai-aria-practices/styles.css b/content-assets/wai-aria-practices/styles.css index 66e05d655..3971ff7be 100644 --- a/content-assets/wai-aria-practices/styles.css +++ b/content-assets/wai-aria-practices/styles.css @@ -87,6 +87,105 @@ a.skip-main:focus, a.skip-main:active { } /* Patterns and Practices */ +.pattern-filter-section { + background-color: var(--cloudy-subtle); + padding: 2em 1em; + margin: 1em 0; + border-radius: 4px; +} + +.pattern-filter-section h2 { + margin-top: 0; +} + +.pattern-filter-flex-container { + display: flex; + flex-direction: row; + align-items: center; +} + +.pattern-filter-section form { + display: flex; + flex: 1; + margin-right: 1em; +} + +.pattern-filter-section form svg { + background-color: var(--pure-white); + border: solid 1px var(--light-blue); + border-right: none; + color: var(--grey); + padding: 0 0.25em 0 0.5em; + border-radius: 4px 0 0 4px; +} + +.pattern-filter-section form input { + flex: 1; + margin-right: 0; + border-left: none !important; + border-right: none !important; +} + +.pattern-filter-section form input, +.pattern-filter-section form svg, +#clear-pattern-filter { + border-color: #8fadce !important; +} + +.pattern-filter-section form input::placeholder { + font-style: normal; + font-size: 1em; +} + +#clear-pattern-filter { + background-color: var(--pure-white); + border: solid 1px; + border-left: none; + color: var(--grey); + padding: 0 0.25em 0 0.5em; + border-radius: 0 4px 4px 0; + cursor: pointer; +} + +#clear-pattern-filter svg { + border: none; +} + +.view-toggle { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 0; +} + +.view-toggle button { + padding: 0.3em; + background-color: #e7eff7; + border: solid 1px #8fadce; + color: #8fadce; + width: 28px; + height: 35px; +} + +.view-toggle button.active { + color: var(--wai-green); + background-color: var(--lt-off-white); +} + +.view-toggle button svg { + width: 22px; + height: auto; +} + +.view-toggle button:first-child { + border-radius: 4px 0 0 4px; +} + +.view-toggle button:last-child { + border-radius: 0 4px 4px 0; + border-left: none; +} + ul.tiles { display: grid; row-gap: 50px; @@ -97,71 +196,131 @@ ul.tiles { grid-template-columns: 49% 49%; column-gap: 2%; } + + .view-toggle button { + width: 40px; + height: 40px; + } } @media screen and (min-width: 70em) { ul.tiles { grid-template-columns: 32% 32% 32%; column-gap: 2%; } + + .view-toggle button svg { + width: 22px; + height: auto; + } +} + +ul.list { + display: grid; + grid-template-columns: 1fr; + row-gap: 0; + padding: 2em; + background: #ffffff; + border: 1px solid var(--line-grey); + border-radius: 4px; + row-gap: 1em; +} + +ul.list img { + width: 46px; + height: auto; } -li.tile { +#patterns #no-patterns-found { + list-style: none; +} + +#patterns #no-patterns-found h2 { + border: none; +} + +li.tile, +li.pattern { align-self: stretch; list-style: none; margin: 0; padding: 2em 2em 0; - background: #ffffff; height: 100%; border: 1px solid var(--line-grey); border-radius: 4px; } -li.tile a { +ul.list li.pattern { + border: none; + border-bottom: 1px solid var(--line-grey); + padding: 0.6em 0 0.5em 0; +} + +ul.list li.pattern:last-child { + border-bottom: none; +} + +li.tile a, +li.pattern a { display: block; text-decoration: none; color: var(--wai-green); } -li.tile a:hover { +li.tile a:hover, +li.pattern a:hover { text-decoration: underline; } -li.tile a:focus { +li.tile a:focus, +li.pattern a:focus { outline-offset: 8px; outline-color: #113362; } -li.tile a:visited { +li.tile a:visited, +li.pattern a:visited { color: var(--wai-green); } -li.tile h2.tile-name { +li.tile h2.tile-name, +li.pattern h2.pattern-name { margin: 0; border: none; display: flex; align-items: flex-start; } -li.tile img { +li.pattern img { margin-right: 1em; } @media screen and (max-width: 23em) { - li.tile h2.tile-name { + li.tile h2.tile-name, + li.pattern h2.pattern-name { flex-direction: column; } - li.tile h2.tile-name span { + li.tile h2.tile-name span, + li.pattern h2.pattern-name span { margin-top: 0.5em; } } -li.tile .tile-introduction { +li.tile .tile-introduction, +li.pattern .pattern-introduction { float: left; border-top: 1px solid var(--line-grey); padding-top: 1em; margin-top: 1.25em; } +ul.list .pattern-introduction { + border-top: none; + padding-top: 0; + margin-top: -12px; + margin-left: 4.25em; + max-width: 820px; +} + ul.content-list { list-style-type: none; padding: 0 1.5em; @@ -263,7 +422,8 @@ ul.sidebar-list li a code { display: inline-block; } -li .tile-introduction { +li .tile-introduction, +li .pattern-introduction { color: rgb(29, 29, 29); } diff --git a/netlify.toml b/netlify.toml index 29cc3ea22..df0a92105 100644 --- a/netlify.toml +++ b/netlify.toml @@ -3,7 +3,7 @@ command = "git submodule update --init --remote && bundle exec jekyll build --co publish = "_site" [build.environment] -RUBY_VERSION = "2.6.2" +RUBY_VERSION = "3.3.3" [[redirects]] from = "/" diff --git a/scripts/pre-build/library/determineContentType.js b/scripts/pre-build/library/determineContentType.js index 5fb11c0cf..56305599a 100644 --- a/scripts/pre-build/library/determineContentType.js +++ b/scripts/pre-build/library/determineContentType.js @@ -45,7 +45,10 @@ const determineContentType = (sourcePath) => { } if ( sourcePath.endsWith("shared/templates/read-this-first.html") || - sourcePath.endsWith("shared/templates/example-usage-warning.html") + sourcePath.endsWith("shared/templates/example-usage-warning.html") || + sourcePath.endsWith( + "shared/templates/experimental-example-usage-warning.html" + ) ) { return "template"; } diff --git a/scripts/pre-build/library/transformExample.js b/scripts/pre-build/library/transformExample.js index c8546049f..858d36e55 100644 --- a/scripts/pre-build/library/transformExample.js +++ b/scripts/pre-build/library/transformExample.js @@ -9,12 +9,33 @@ const wrapTablesWithResponsiveDiv = require("./wrapTablesWithResponsiveDiv"); const removeConflictingCss = require("./removeConflictingCss"); const getExampleLastModifiedDate = require("./getExampleLastModifiedDate"); -const loadNotice = async () => { - const relativePath = "content/shared/templates/example-usage-warning.html"; - const templateSourcePath = path.resolve(sourceRoot, relativePath); - const noticeContent = await fs.readFile(templateSourcePath, { - encoding: "utf8", - }); +const loadNoticeCommon = async ({ isExperimental }) => { + let relativePath; + if (isExperimental) { + // Depends on https://github.com/w3c/aria-practices/pull/2977 being merged + relativePath = + "content/shared/templates/experimental-example-usage-warning.html"; + } else { + relativePath = "content/shared/templates/example-usage-warning.html"; + } + + let templateSourcePath = path.resolve(sourceRoot, relativePath); + + let noticeContent; + try { + noticeContent = await fs.readFile(templateSourcePath, { + encoding: "utf8", + }); + } catch (e) { + console.warn(`${e.message}\nReverting to using default example-usage-warning.html ...\n`); + + // Could happen if experimental-example-usage-warning.html doesn't exist + relativePath = "content/shared/templates/example-usage-warning.html"; + templateSourcePath = path.resolve(sourceRoot, relativePath); + noticeContent = await fs.readFile(templateSourcePath, { + encoding: "utf8", + }); + } return async (sourcePath) => { const html = parseHtml(noticeContent); @@ -28,7 +49,8 @@ const loadNotice = async () => { }; }; -const loadedNotice = loadNotice(); +const loadedNotice = loadNoticeCommon({ isExperimental: false }); +const loadedExperimentalNotice = loadNoticeCommon({ isExperimental: true }); const transformExample = async (sourcePath, sourceContents) => { const { sitePath, githubPath } = rewriteSourcePath(sourcePath); @@ -46,7 +68,16 @@ const transformExample = async (sourcePath, sourceContents) => { await rewriteElementPaths(html, { onSourcePath: sourcePath }); - const getNotice = await loadedNotice; + const isExperimental = + html.querySelector("main")?.getAttribute("data-content-phase") === + "experimental"; + + let getNotice; + if (isExperimental) { + getNotice = await loadedExperimentalNotice; + } else { + getNotice = await loadedNotice; + } const notice = await getNotice(sourcePath); html.querySelector("body").insertAdjacentHTML("afterbegin", notice);