From d5c43faa97b94f887cd8eaf88fbbea415a6a787e Mon Sep 17 00:00:00 2001 From: michael-n-cooper-bot Date: Tue, 24 Oct 2023 23:22:19 +0000 Subject: [PATCH 1/7] Commit changes --- ARIA/apg/patterns/accordion/examples/accordion.md | 2 +- ARIA/apg/patterns/alert/examples/alert.md | 2 +- ARIA/apg/patterns/alertdialog/examples/alertdialog.md | 2 +- ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md | 2 +- ARIA/apg/patterns/button/examples/button.md | 2 +- ARIA/apg/patterns/button/examples/button_idl.md | 2 +- .../apg/patterns/carousel/examples/carousel-1-prev-next.md | 2 +- ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md | 2 +- ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md | 2 +- ARIA/apg/patterns/checkbox/examples/checkbox.md | 2 +- .../combobox/examples/combobox-autocomplete-both.md | 2 +- .../combobox/examples/combobox-autocomplete-list.md | 2 +- .../combobox/examples/combobox-autocomplete-none.md | 2 +- ARIA/apg/patterns/combobox/examples/combobox-datepicker.md | 2 +- .../apg/patterns/combobox/examples/combobox-select-only.md | 2 +- ARIA/apg/patterns/combobox/examples/grid-combo.md | 2 +- .../patterns/dialog-modal/examples/datepicker-dialog.md | 2 +- ARIA/apg/patterns/dialog-modal/examples/dialog.md | 2 +- ARIA/apg/patterns/disclosure/examples/disclosure-faq.md | 2 +- .../disclosure/examples/disclosure-image-description.md | 2 +- .../disclosure/examples/disclosure-navigation-hybrid.md | 2 +- .../patterns/disclosure/examples/disclosure-navigation.md | 2 +- ARIA/apg/patterns/feed/examples/feed.md | 2 +- ARIA/apg/patterns/grid/examples/advanced-data-grid.md | 2 +- ARIA/apg/patterns/grid/examples/data-grids.md | 2 +- ARIA/apg/patterns/grid/examples/layout-grids.md | 2 +- .../patterns/landmarks/examples/general-principles.html | 5 +++++ ARIA/apg/patterns/link/examples/link.md | 2 +- ARIA/apg/patterns/listbox/examples/listbox-collapsible.md | 2 +- ARIA/apg/patterns/listbox/examples/listbox-grouped.md | 2 +- .../apg/patterns/listbox/examples/listbox-rearrangeable.md | 2 +- ARIA/apg/patterns/listbox/examples/listbox-scrollable.md | 2 +- .../examples/menu-button-actions-active-descendant.md | 2 +- .../patterns/menu-button/examples/menu-button-actions.md | 2 +- .../apg/patterns/menu-button/examples/menu-button-links.md | 2 +- ARIA/apg/patterns/menubar/examples/menubar-editor.md | 2 +- ARIA/apg/patterns/menubar/examples/menubar-navigation.md | 2 +- ARIA/apg/patterns/meter/examples/meter.md | 2 +- ARIA/apg/patterns/radio/examples/radio-activedescendant.md | 2 +- ARIA/apg/patterns/radio/examples/radio-rating.md | 2 +- ARIA/apg/patterns/radio/examples/radio.md | 2 +- .../slider-multithumb/examples/slider-multithumb.md | 2 +- ARIA/apg/patterns/slider/examples/slider-color-viewer.md | 2 +- ARIA/apg/patterns/slider/examples/slider-rating.md | 2 +- ARIA/apg/patterns/slider/examples/slider-seek.md | 2 +- ARIA/apg/patterns/slider/examples/slider-temperature.md | 2 +- .../patterns/spinbutton/examples/datepicker-spinbuttons.md | 2 +- ARIA/apg/patterns/switch/examples/switch-button.md | 2 +- ARIA/apg/patterns/switch/examples/switch-checkbox.md | 2 +- ARIA/apg/patterns/switch/examples/switch.md | 2 +- ARIA/apg/patterns/table/examples/sortable-table.md | 2 +- ARIA/apg/patterns/table/examples/table.md | 2 +- ARIA/apg/patterns/tabs/examples/tabs-automatic.md | 2 +- ARIA/apg/patterns/tabs/examples/tabs-manual.md | 2 +- ARIA/apg/patterns/toolbar/examples/toolbar.md | 2 +- ARIA/apg/patterns/treegrid/examples/treegrid-1.md | 2 +- ARIA/apg/patterns/treeview/examples/treeview-1a.md | 2 +- ARIA/apg/patterns/treeview/examples/treeview-1b.md | 2 +- ARIA/apg/patterns/treeview/examples/treeview-navigation.md | 2 +- .../landmark-regions/landmark-regions-practice.md | 7 +++++-- _external/aria-practices | 2 +- 61 files changed, 69 insertions(+), 61 deletions(-) diff --git a/ARIA/apg/patterns/accordion/examples/accordion.md b/ARIA/apg/patterns/accordion/examples/accordion.md index beb4e6d37..56a901de8 100644 --- a/ARIA/apg/patterns/accordion/examples/accordion.md +++ b/ARIA/apg/patterns/accordion/examples/accordion.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/accordion/examples/accordion/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/alert/examples/alert.md b/ARIA/apg/patterns/alert/examples/alert.md index d2e78d523..ea203b9c6 100644 --- a/ARIA/apg/patterns/alert/examples/alert.md +++ b/ARIA/apg/patterns/alert/examples/alert.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alert/examples/alert/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/alertdialog/examples/alertdialog.md b/ARIA/apg/patterns/alertdialog/examples/alertdialog.md index a69b9ebf8..adc54b959 100644 --- a/ARIA/apg/patterns/alertdialog/examples/alertdialog.md +++ b/ARIA/apg/patterns/alertdialog/examples/alertdialog.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alertdialog/examples/alertdialog/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md b/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md index c99aeb3a9..593f0ca37 100644 --- a/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md +++ b/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/breadcrumb/examples/breadcrumb/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/button/examples/button.md b/ARIA/apg/patterns/button/examples/button.md index 7ad3a0ff9..87a7d17b5 100644 --- a/ARIA/apg/patterns/button/examples/button.md +++ b/ARIA/apg/patterns/button/examples/button.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/button/examples/button_idl.md b/ARIA/apg/patterns/button/examples/button_idl.md index 490736efc..7ccf22874 100644 --- a/ARIA/apg/patterns/button/examples/button_idl.md +++ b/ARIA/apg/patterns/button/examples/button_idl.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button_idl/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md b/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md index 27c883a51..1cd50c2e6 100644 --- a/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md +++ b/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md b/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md index 7dffc906d..ab6a7d31f 100644 --- a/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md +++ b/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/carousel/examples/carousel-2-tablist/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md b/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md index 217051e7e..26ed1999c 100644 --- a/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md +++ b/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/checkbox/examples/checkbox-mixed/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/checkbox/examples/checkbox.md b/ARIA/apg/patterns/checkbox/examples/checkbox.md index f9682aff1..977e7f509 100644 --- a/ARIA/apg/patterns/checkbox/examples/checkbox.md +++ b/ARIA/apg/patterns/checkbox/examples/checkbox.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/checkbox/examples/checkbox/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md index 6b763323f..26886a6fb 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md index c0872733f..58f9491fd 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md index 47409e19d..3651155cd 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md b/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md index 491116275..adec07aaa 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-datepicker/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/combobox/examples/combobox-select-only.md b/ARIA/apg/patterns/combobox/examples/combobox-select-only.md index f3213e345..028193917 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-select-only.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-select-only.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-select-only/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/combobox/examples/grid-combo.md b/ARIA/apg/patterns/combobox/examples/grid-combo.md index 7e6377520..463830e4d 100644 --- a/ARIA/apg/patterns/combobox/examples/grid-combo.md +++ b/ARIA/apg/patterns/combobox/examples/grid-combo.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/grid-combo/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md b/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md index 7c38f70f9..e7c34605d 100644 --- a/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md +++ b/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/dialog-modal/examples/dialog.md b/ARIA/apg/patterns/dialog-modal/examples/dialog.md index aee446fcc..b449ee2b1 100644 --- a/ARIA/apg/patterns/dialog-modal/examples/dialog.md +++ b/ARIA/apg/patterns/dialog-modal/examples/dialog.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/dialog-modal/examples/dialog/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md b/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md index 5f201761d..99fd510d0 100644 --- a/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md +++ b/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-faq/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md index fee070ceb..99a1ad409 100644 --- a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md +++ b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-image-description/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md index 41ce85325..26b93ea17 100644 --- a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md +++ b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md index 64283cbc7..33a69bef4 100644 --- a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md +++ b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-navigation/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/feed/examples/feed.md b/ARIA/apg/patterns/feed/examples/feed.md index 82a8776d1..ed14685d9 100644 --- a/ARIA/apg/patterns/feed/examples/feed.md +++ b/ARIA/apg/patterns/feed/examples/feed.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/feed/examples/feed/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/grid/examples/advanced-data-grid.md b/ARIA/apg/patterns/grid/examples/advanced-data-grid.md index 6b282ddaf..317f5241f 100644 --- a/ARIA/apg/patterns/grid/examples/advanced-data-grid.md +++ b/ARIA/apg/patterns/grid/examples/advanced-data-grid.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/advanced-data-grid/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/grid/examples/data-grids.md b/ARIA/apg/patterns/grid/examples/data-grids.md index 3dc9a8ab9..457fad361 100644 --- a/ARIA/apg/patterns/grid/examples/data-grids.md +++ b/ARIA/apg/patterns/grid/examples/data-grids.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/data-grids/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/grid/examples/layout-grids.md b/ARIA/apg/patterns/grid/examples/layout-grids.md index 94bbbc738..199526969 100644 --- a/ARIA/apg/patterns/grid/examples/layout-grids.md +++ b/ARIA/apg/patterns/grid/examples/layout-grids.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/layout-grids/ sidebar: true -footer: "

View issues related to this example

Page last updated: 2 October 2023

" +footer: "

View issues related to this example

Page last updated: 24 October 2023

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/landmarks/examples/general-principles.html b/ARIA/apg/patterns/landmarks/examples/general-principles.html index f2db7214a..76975b01c 100644 --- a/ARIA/apg/patterns/landmarks/examples/general-principles.html +++ b/ARIA/apg/patterns/landmarks/examples/general-principles.html @@ -84,6 +84,11 @@

General Principles

  • Landmark roles can be nested to identify parent/child relationships of the information being presented.
    • +
  • + Note that wrapping the content of a modal dialog in a landmark region is unnecessary. + A landmark that wraps modal content cannot provide any benefit to users because it is not perceivable unless the modal is open. + In addition, when a modal is open, a landmark containing its content is superfluous because the modal itself is a container that provides both a name and boundaries. +

    • Step 3: Label each area

    diff --git a/ARIA/apg/patterns/link/examples/link.md b/ARIA/apg/patterns/link/examples/link.md index 5a55c20a1..e735827a7 100644 --- a/ARIA/apg/patterns/link/examples/link.md +++ b/ARIA/apg/patterns/link/examples/link.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/link/examples/link/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md b/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md index 1df9cb988..461c10014 100644 --- a/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md +++ b/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-collapsible/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/listbox/examples/listbox-grouped.md b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md index 41e0e5c17..ec3ece502 100644 --- a/ARIA/apg/patterns/listbox/examples/listbox-grouped.md +++ b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-grouped/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md b/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md index c219ca4f0..22d5bd302 100644 --- a/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md +++ b/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-rearrangeable/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md b/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md index 4890e5c9f..16b27f65b 100644 --- a/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md +++ b/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-scrollable/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md b/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md index 91331573a..360765957 100644 --- a/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md +++ b/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-de sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md b/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md index efc2bd7b0..00ae63ae4 100644 --- a/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md +++ b/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-actions/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-links.md b/ARIA/apg/patterns/menu-button/examples/menu-button-links.md index d926553f2..cd96d981e 100644 --- a/ARIA/apg/patterns/menu-button/examples/menu-button-links.md +++ b/ARIA/apg/patterns/menu-button/examples/menu-button-links.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-links/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/menubar/examples/menubar-editor.md b/ARIA/apg/patterns/menubar/examples/menubar-editor.md index 6c16eaec5..e1fdaf8c3 100644 --- a/ARIA/apg/patterns/menubar/examples/menubar-editor.md +++ b/ARIA/apg/patterns/menubar/examples/menubar-editor.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menubar/examples/menubar-editor/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/menubar/examples/menubar-navigation.md b/ARIA/apg/patterns/menubar/examples/menubar-navigation.md index 60084d2e3..c35b73256 100644 --- a/ARIA/apg/patterns/menubar/examples/menubar-navigation.md +++ b/ARIA/apg/patterns/menubar/examples/menubar-navigation.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menubar/examples/menubar-navigation/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/meter/examples/meter.md b/ARIA/apg/patterns/meter/examples/meter.md index aabc8a12f..84755cb5d 100644 --- a/ARIA/apg/patterns/meter/examples/meter.md +++ b/ARIA/apg/patterns/meter/examples/meter.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/meter/examples/meter/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/radio/examples/radio-activedescendant.md b/ARIA/apg/patterns/radio/examples/radio-activedescendant.md index 7db074684..ea97bb38c 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: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/radio/examples/radio-rating.md b/ARIA/apg/patterns/radio/examples/radio-rating.md index fbdbb6401..5d47b812a 100644 --- a/ARIA/apg/patterns/radio/examples/radio-rating.md +++ b/ARIA/apg/patterns/radio/examples/radio-rating.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio-rating/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/radio/examples/radio.md b/ARIA/apg/patterns/radio/examples/radio.md index 490ee72ff..46e60f286 100644 --- a/ARIA/apg/patterns/radio/examples/radio.md +++ b/ARIA/apg/patterns/radio/examples/radio.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md b/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md index de36a5482..35289db7f 100644 --- a/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md +++ b/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md index 86604f6a9..fb21afe5a 100644 --- a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md +++ b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-color-viewer/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md index a9cfa7fc4..6ce6ed340 100644 --- a/ARIA/apg/patterns/slider/examples/slider-rating.md +++ b/ARIA/apg/patterns/slider/examples/slider-rating.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/slider/examples/slider-seek.md b/ARIA/apg/patterns/slider/examples/slider-seek.md index 3adb552a5..d313c14f9 100644 --- a/ARIA/apg/patterns/slider/examples/slider-seek.md +++ b/ARIA/apg/patterns/slider/examples/slider-seek.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-seek/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/slider/examples/slider-temperature.md b/ARIA/apg/patterns/slider/examples/slider-temperature.md index 47126250b..ec1de9fb9 100644 --- a/ARIA/apg/patterns/slider/examples/slider-temperature.md +++ b/ARIA/apg/patterns/slider/examples/slider-temperature.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-temperature/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md b/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md index a96857dd3..c0fddbb19 100644 --- a/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md +++ b/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/switch/examples/switch-button.md b/ARIA/apg/patterns/switch/examples/switch-button.md index 9adbd68b9..1c00a2940 100644 --- a/ARIA/apg/patterns/switch/examples/switch-button.md +++ b/ARIA/apg/patterns/switch/examples/switch-button.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/switch/examples/switch-button/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/switch/examples/switch-checkbox.md b/ARIA/apg/patterns/switch/examples/switch-checkbox.md index 66539b97e..a1b9ac8d8 100644 --- a/ARIA/apg/patterns/switch/examples/switch-checkbox.md +++ b/ARIA/apg/patterns/switch/examples/switch-checkbox.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/switch/examples/switch-checkbox/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/switch/examples/switch.md b/ARIA/apg/patterns/switch/examples/switch.md index 2ba338b1e..714175fd7 100644 --- a/ARIA/apg/patterns/switch/examples/switch.md +++ b/ARIA/apg/patterns/switch/examples/switch.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/switch/examples/switch/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/table/examples/sortable-table.md b/ARIA/apg/patterns/table/examples/sortable-table.md index 8d9439509..63ec1bf42 100644 --- a/ARIA/apg/patterns/table/examples/sortable-table.md +++ b/ARIA/apg/patterns/table/examples/sortable-table.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/table/examples/sortable-table/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/table/examples/table.md b/ARIA/apg/patterns/table/examples/table.md index 845291ee2..60856a707 100644 --- a/ARIA/apg/patterns/table/examples/table.md +++ b/ARIA/apg/patterns/table/examples/table.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/table/examples/table/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/tabs/examples/tabs-automatic.md b/ARIA/apg/patterns/tabs/examples/tabs-automatic.md index 93dbeb76e..f756f3f6c 100644 --- a/ARIA/apg/patterns/tabs/examples/tabs-automatic.md +++ b/ARIA/apg/patterns/tabs/examples/tabs-automatic.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/tabs/examples/tabs-automatic/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/tabs/examples/tabs-manual.md b/ARIA/apg/patterns/tabs/examples/tabs-manual.md index a0bfe3e7e..5887e22ef 100644 --- a/ARIA/apg/patterns/tabs/examples/tabs-manual.md +++ b/ARIA/apg/patterns/tabs/examples/tabs-manual.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/tabs/examples/tabs-manual/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/toolbar/examples/toolbar.md b/ARIA/apg/patterns/toolbar/examples/toolbar.md index c0f716546..b3aed3e2f 100644 --- a/ARIA/apg/patterns/toolbar/examples/toolbar.md +++ b/ARIA/apg/patterns/toolbar/examples/toolbar.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/toolbar/examples/toolbar/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/treegrid/examples/treegrid-1.md b/ARIA/apg/patterns/treegrid/examples/treegrid-1.md index f901e0979..f288b1063 100644 --- a/ARIA/apg/patterns/treegrid/examples/treegrid-1.md +++ b/ARIA/apg/patterns/treegrid/examples/treegrid-1.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treegrid/examples/treegrid-1/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/treeview/examples/treeview-1a.md b/ARIA/apg/patterns/treeview/examples/treeview-1a.md index ce2334664..45c15c953 100644 --- a/ARIA/apg/patterns/treeview/examples/treeview-1a.md +++ b/ARIA/apg/patterns/treeview/examples/treeview-1a.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-1a/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/treeview/examples/treeview-1b.md b/ARIA/apg/patterns/treeview/examples/treeview-1b.md index f94cf4475..df1978e1d 100644 --- a/ARIA/apg/patterns/treeview/examples/treeview-1b.md +++ b/ARIA/apg/patterns/treeview/examples/treeview-1b.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-1b/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/treeview/examples/treeview-navigation.md b/ARIA/apg/patterns/treeview/examples/treeview-navigation.md index e9672c598..c25e30cfd 100644 --- a/ARIA/apg/patterns/treeview/examples/treeview-navigation.md +++ b/ARIA/apg/patterns/treeview/examples/treeview-navigation.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-navigation/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 2 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md b/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md index 6e33815f5..02e0ff7dd 100644 --- a/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md +++ b/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md @@ -147,10 +147,13 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

    Step 3: Label areas

    diff --git a/_external/aria-practices b/_external/aria-practices index 7fb7c8e28..9a5e55ccb 160000 --- a/_external/aria-practices +++ b/_external/aria-practices @@ -1 +1 @@ -Subproject commit 7fb7c8e28b55a2804bda682c36945a1154d1096a +Subproject commit 9a5e55ccbeb0f1bf92b6127c9865da8426d1c864 From 0189a44b8b71025365e5233c6c8ff459061f5ddf Mon Sep 17 00:00:00 2001 From: alflennik Date: Thu, 30 Nov 2023 10:53:47 -0500 Subject: [PATCH 2/7] Source patterns and practices pages from APG --- .../pre-build/library/determineContentType.js | 9 +- .../library/recursivelyCopyAllContent.js | 5 +- .../pre-build/library/rewriteElementPaths.js | 6 +- scripts/pre-build/library/rewritePath.js | 22 +++- scripts/pre-build/library/transformExample.js | 38 +++--- scripts/pre-build/library/transformPattern.js | 7 -- .../library/transformPatternIndex.js | 103 +++++------------ .../library/transformPracticeIndex.js | 109 +++--------------- scripts/pre-build/package-lock.json | 1 - scripts/pre-build/package.json | 1 - scripts/pre-build/pre-build.js | 2 +- 11 files changed, 94 insertions(+), 209 deletions(-) diff --git a/scripts/pre-build/library/determineContentType.js b/scripts/pre-build/library/determineContentType.js index d5de2753d..5fb11c0cf 100644 --- a/scripts/pre-build/library/determineContentType.js +++ b/scripts/pre-build/library/determineContentType.js @@ -12,8 +12,7 @@ const determineContentType = (sourcePath) => { if ( sourcePath.endsWith("feed/examples/feed-display.html") || sourcePath.match(/content\/patterns\/landmarks\/examples\/.+\.html/) || - sourcePath.endsWith("toolbar/examples/help.html") || - sourcePath.endsWith("shared/templates/example-usage-warning.html") + sourcePath.endsWith("toolbar/examples/help.html") ) { return "htmlAsset"; } @@ -44,6 +43,12 @@ const determineContentType = (sourcePath) => { if (sourcePath.endsWith("content/index/index.html")) { return "exampleIndex"; } + if ( + sourcePath.endsWith("shared/templates/read-this-first.html") || + sourcePath.endsWith("shared/templates/example-usage-warning.html") + ) { + return "template"; + } throw new Error( `Could not determine content type for file at ${sourcePath}\n` + `This file may not follow established conventions.` diff --git a/scripts/pre-build/library/recursivelyCopyAllContent.js b/scripts/pre-build/library/recursivelyCopyAllContent.js index c844f40f4..424cbc0b9 100644 --- a/scripts/pre-build/library/recursivelyCopyAllContent.js +++ b/scripts/pre-build/library/recursivelyCopyAllContent.js @@ -17,7 +17,10 @@ const recursivelyCopyAllContent = async ({ forEachFile }) => { } const { buildPath } = rewriteSourcePath(sourcePath); - if (buildPath === null) continue; // File is ignored + + // Some files, notably templates, have no buildPath and can be ignored + if (buildPath === null) continue; + const buildContents = await forEachFile(sourcePath, sourceContents); await fs.mkdir(path.dirname(buildPath), { recursive: true }); diff --git a/scripts/pre-build/library/rewriteElementPaths.js b/scripts/pre-build/library/rewriteElementPaths.js index b04178804..a956bda9e 100644 --- a/scripts/pre-build/library/rewriteElementPaths.js +++ b/scripts/pre-build/library/rewriteElementPaths.js @@ -1,6 +1,9 @@ const { rewriteRelativePath } = require("./rewritePath"); -const rewriteElementPaths = async (html, { onSourcePath }) => { +const rewriteElementPaths = async (html, { + onSourcePath, + optionalTemplateSourcePath // See rewriteRelativePath for more info +}) => { const { specLinks } = await import( "../../../_external/aria-practices/content/shared/js/specLinks.mjs" ); @@ -24,6 +27,7 @@ const rewriteElementPaths = async (html, { onSourcePath }) => { if (isRelativeLink && !isJekyllLink) { const { siteRelativePath } = rewriteRelativePath(href ?? src, { onSourcePath, + optionalTemplateSourcePath }); element.setAttribute(href ? "href" : "src", siteRelativePath); } diff --git a/scripts/pre-build/library/rewritePath.js b/scripts/pre-build/library/rewritePath.js index 8eb0824a4..2f866b40d 100644 --- a/scripts/pre-build/library/rewritePath.js +++ b/scripts/pre-build/library/rewritePath.js @@ -26,7 +26,7 @@ const rewriteSourcePath = (sourcePath) => { const githubPath = relative(sourceRoot, sourcePath); let buildRelative = githubPath.replace(/^content\//, ""); - if (contentType === "ignored") { + if (contentType === "template") { return { githubPath, buildPath: null, sitePath: null }; } if (contentType !== "htmlAsset") { @@ -96,20 +96,32 @@ const getSitePath = (buildPath, contentType) => { case "htmlAsset": case "otherAsset": return buildRelative; - case "ignored": + case "template": return null; default: throw new Error(`Script did not recognize content type ${contentType}`); } }; -const rewriteRelativePath = (relativePathAndHash, { onSourcePath }) => { - const { buildPath: onBuildPath } = rewriteSourcePath(onSourcePath); +const rewriteRelativePath = ( + relativePathAndHash, + { + onSourcePath, + // Only needed for templates. This is required because templates have a + // sourcePath (the template file) but they lack a predetermined buildPath + // (which will be wherever the template is used). + optionalTemplateSourcePath, + } +) => { + let onBuildPath = rewriteSourcePath(onSourcePath).buildPath; const [relativePathAndQuery, hash] = relativePathAndHash.split("#"); const [relativePath, queryString] = relativePathAndQuery.split("?"); - const sourcePath = path.resolve(dirname(onSourcePath), relativePath); + const sourcePath = path.resolve( + dirname(optionalTemplateSourcePath || onSourcePath), + relativePath + ); const { buildPath } = rewriteSourcePath(sourcePath); const siteRootPathPreHash = getSitePath( diff --git a/scripts/pre-build/library/transformExample.js b/scripts/pre-build/library/transformExample.js index 62c9143b5..6155b4dff 100644 --- a/scripts/pre-build/library/transformExample.js +++ b/scripts/pre-build/library/transformExample.js @@ -11,14 +11,19 @@ const wrapTablesWithResponsiveDiv = require("./wrapTablesWithResponsiveDiv"); const removeConflictingCss = require("./removeConflictingCss"); const loadNotice = async () => { - const noticePath = path.resolve( - sourceRoot, - "content/shared/templates/example-usage-warning.html" - ); - const noticeContent = await fs.readFile(noticePath, { encoding: "utf8" }); + const relativePath = "content/shared/templates/example-usage-warning.html"; + const templateSourcePath = path.resolve(sourceRoot, relativePath); + const noticeContent = await fs.readFile(templateSourcePath, { + encoding: "utf8", + }); const html = parseHtml(noticeContent); - return () => { + return async (sourcePath) => { + await rewriteElementPaths(html, { + onSourcePath: sourcePath, + optionalTemplateSourcePath: templateSourcePath, + }); + return html.querySelector("body").innerHTML; }; }; @@ -54,23 +59,14 @@ const transformExample = async (sourcePath, sourceContents) => { const title = html.querySelector("h1").innerHTML; html.querySelector("h1").remove(); - const slug = sitePath.match(/patterns\/([^/]+)\//)?.[1]; + removeConflictingCss(html); - const img = ``; - if (html.querySelector(".advisement")) { - html.querySelector(".advisement").insertAdjacentHTML("afterend", img); - } else { - html.querySelector("h2").insertAdjacentHTML("afterend", img); - } + const lastModifiedDateFormatted = await getLastModifiedDate(sourcePath); - removeConflictingCss(html); + await rewriteElementPaths(html, { onSourcePath: sourcePath }); const getNotice = await loadedNotice; - const notice = getNotice(); + const notice = await getNotice(sourcePath); html.querySelector("body").insertAdjacentHTML( "afterbegin", ` @@ -79,10 +75,6 @@ const transformExample = async (sourcePath, sourceContents) => { ` ); - const lastModifiedDateFormatted = await getLastModifiedDate(sourcePath); - - await rewriteElementPaths(html, { onSourcePath: sourcePath }); - const relatedLinksElement = html.querySelector( '[aria-label="Related Links"]' ); diff --git a/scripts/pre-build/library/transformPattern.js b/scripts/pre-build/library/transformPattern.js index aca355309..447b65bbc 100644 --- a/scripts/pre-build/library/transformPattern.js +++ b/scripts/pre-build/library/transformPattern.js @@ -31,13 +31,6 @@ const transformPattern = async (sourcePath, sourceContents) => { examplesSection = findExamplesSection(); examplesSection.classList.add("examples-section"); - examplesSection.insertAdjacentHTML( - "afterbegin", - `` - ); await rewriteElementPaths(html, { onSourcePath: sourcePath }); diff --git a/scripts/pre-build/library/transformPatternIndex.js b/scripts/pre-build/library/transformPatternIndex.js index 104638e0b..7fb3923db 100644 --- a/scripts/pre-build/library/transformPatternIndex.js +++ b/scripts/pre-build/library/transformPatternIndex.js @@ -1,97 +1,50 @@ const path = require("path"); const fs = require("fs/promises"); const { parse: parseHtml } = require("node-html-parser"); -const glob = require("glob"); const formatForJekyll = require("./formatForJekyll"); -const { rewriteSourcePath } = require("./rewritePath"); - -const transformPatternIndex = async (sourcePath /* , sourceContents */) => { - const { sitePath, githubPath } = rewriteSourcePath(sourcePath); - - const patterns = []; - - const patternPaths = await new Promise((resolve, reject) => { - glob( - path.resolve( - __dirname, - "../../../_external/aria-practices/content/patterns/*/*-pattern.html" - ), - {}, - (error, patternPaths) => { - if (error) return reject(error); - resolve(patternPaths); - } - ); +const { rewriteSourcePath, sourceRoot } = require("./rewritePath"); +const removeConflictingCss = require("./removeConflictingCss"); +const rewriteElementPaths = require("./rewriteElementPaths"); + +const getReadThisFirst = async (sourcePath) => { + const relativePath = "content/shared/templates/read-this-first.html"; + const filePath = path.resolve(sourceRoot, relativePath); + const fileContent = await fs.readFile(filePath, { encoding: "utf8" }); + const html = parseHtml(fileContent); + await rewriteElementPaths(html, { + onSourcePath: sourcePath, + optionalTemplateSourcePath: path.join(sourceRoot, relativePath), }); + return html.querySelector("body").innerHTML; +}; - for (const patternPath of patternPaths) { - const { sitePath } = rewriteSourcePath(patternPath); - - const patternContents = await fs.readFile(patternPath, { - encoding: "utf8", - }); - - const patternHtml = parseHtml(patternContents); - - let title = patternHtml.querySelector("h1").innerHTML.trim(); - if (!title.match(/ Pattern\b/)) { - throw new Error("Found pattern with unexpected h1 headline"); - } - title = title.replace(/ Pattern/g, ""); +const transformPatternIndex = async (sourcePath, sourceContents) => { + const readThisFirst = await getReadThisFirst(sourcePath); - const slug = patternPath.match( - /content\/patterns\/([^/]+)\/[^/]+-pattern\.html/ - )?.[1]; + const { sitePath, githubPath } = rewriteSourcePath(sourcePath); + const html = parseHtml(sourceContents); - let firstParagraph = patternHtml.querySelectorAll("p")[0].textContent; - if (firstParagraph.trim().startsWith("NOTE:")) { - firstParagraph = patternHtml.querySelectorAll("p")[1].textContent; - } - const periodMatch = /(\.[^\w]|\.$)/.exec(firstParagraph); - const incompleteSentence = periodMatch === null; - if (incompleteSentence) - throw new Error( - `Pattern ${slug} does not begin with a complete sentence.` - ); - const endOfSentence = periodMatch.index + 1; - const firstSentence = firstParagraph.substr(0, endOfSentence); + const title = html.querySelector("h1").innerHTML; + html.querySelector("h1").remove(); - patterns.push({ sitePath, title, slug, introduction: firstSentence }); - } + removeConflictingCss(html); - patterns.sort((a, b) => a.title.localeCompare(b.title)); + await rewriteElementPaths(html, { onSourcePath: sourcePath }); const content = ` - {% include read-this-first.html %} - - `; + ${readThisFirst} + ${html.querySelector("body").innerHTML} + ` return formatForJekyll({ - title: "Patterns", + title, sitePath, githubPath, content, enableSidebar: false, + head: html.querySelector("head").innerHTML, }); }; module.exports = transformPatternIndex; +module.exports.getReadThisFirst = getReadThisFirst diff --git a/scripts/pre-build/library/transformPracticeIndex.js b/scripts/pre-build/library/transformPracticeIndex.js index fbf5701be..5b2be7289 100644 --- a/scripts/pre-build/library/transformPracticeIndex.js +++ b/scripts/pre-build/library/transformPracticeIndex.js @@ -1,111 +1,36 @@ -const path = require("path"); -const fs = require("fs/promises"); const { parse: parseHtml } = require("node-html-parser"); -const glob = require("glob"); const formatForJekyll = require("./formatForJekyll"); const { rewriteSourcePath } = require("./rewritePath"); +const removeConflictingCss = require("./removeConflictingCss"); +const rewriteElementPaths = require("./rewriteElementPaths"); +const { getReadThisFirst } = require("./transformPatternIndex"); -const transformPracticeIndex = async (sourcePath /* , sourceContents */) => { +const transformPatternIndex = async (sourcePath, sourceContents) => { + const readThisFirst = await getReadThisFirst(sourcePath); + const { sitePath, githubPath } = rewriteSourcePath(sourcePath); + const html = parseHtml(sourceContents); - const practices = []; + const title = html.querySelector("h1").innerHTML; + html.querySelector("h1").remove(); - const practicePaths = await new Promise((resolve, reject) => { - glob( - path.resolve( - __dirname, - "../../../_external/aria-practices/content/practices/*/*-practice.html" - ), - {}, - (error, patternPaths) => { - if (error) return reject(error); - resolve(patternPaths); - } - ); - }); - - for (const practicePath of practicePaths) { - const { sitePath } = rewriteSourcePath(practicePath); - const practiceContents = await fs.readFile(practicePath, { - encoding: "utf8", - }); - - const practiceHtml = parseHtml(practiceContents); - - const title = practiceHtml.querySelector("h1").innerHTML; - - const slug = practicePath.match( - /content\/practices\/([^/]+)\/[^/]+-practice\.html/ - )?.[1]; - - let firstParagraph = practiceHtml.querySelectorAll("p")[0].textContent; - const periodMatch = /(\.[^\w]|\.$)/.exec(firstParagraph); - const incompleteSentence = periodMatch === null; - if (incompleteSentence) - throw new Error( - `Practice ${slug} does not begin with a complete sentence.` - ); - const endOfSentence = periodMatch.index + 1; - const firstSentence = firstParagraph.substr(0, endOfSentence); + removeConflictingCss(html); - practices.push({ sitePath, title, slug, introduction: firstSentence }); - } - - const importanceOrder = [ - "landmark-regions", - "names-and-descriptions", - "keyboard-interface", - "grid-and-table-properties", - "range-related-properties", - "structural-roles", - "hiding-semantics", - ]; - - practices.sort((a, b) => { - const aRank = - importanceOrder.indexOf(a.slug) === -1 - ? Infinity - : importanceOrder.indexOf(a.slug); - - const bRank = - importanceOrder.indexOf(b.slug) === -1 - ? Infinity - : importanceOrder.indexOf(b.slug); - - return aRank < bRank ? -1 : 1; - }); + await rewriteElementPaths(html, { onSourcePath: sourcePath }); const content = ` - {% include read-this-first.html %} - - `; + ${readThisFirst} + ${html.querySelector("body").innerHTML} + ` return formatForJekyll({ - title: "Practices", + title, sitePath, githubPath, content, enableSidebar: false, + head: html.querySelector("head").innerHTML, }); }; -module.exports = transformPracticeIndex; +module.exports = transformPatternIndex; diff --git a/scripts/pre-build/package-lock.json b/scripts/pre-build/package-lock.json index 944ed88f4..4cc655172 100644 --- a/scripts/pre-build/package-lock.json +++ b/scripts/pre-build/package-lock.json @@ -7,7 +7,6 @@ "dependencies": { "date-fns": "^2.28.0", "fuzzysearch": "^1.0.3", - "glob": "^7.1.7", "lodash": "^4.17.21", "node-dir": "^0.1.17", "node-html-parser": "^4.1.2", diff --git a/scripts/pre-build/package.json b/scripts/pre-build/package.json index a8bbae018..d248d637e 100644 --- a/scripts/pre-build/package.json +++ b/scripts/pre-build/package.json @@ -2,7 +2,6 @@ "dependencies": { "date-fns": "^2.28.0", "fuzzysearch": "^1.0.3", - "glob": "^7.1.7", "lodash": "^4.17.21", "node-dir": "^0.1.17", "node-html-parser": "^4.1.2", diff --git a/scripts/pre-build/pre-build.js b/scripts/pre-build/pre-build.js index 01d2cc5e3..694de71c3 100644 --- a/scripts/pre-build/pre-build.js +++ b/scripts/pre-build/pre-build.js @@ -45,7 +45,7 @@ const preBuild = async () => { return transformHtmlAsset(sourcePath, sourceContents); case "otherAsset": return transformOtherAsset(sourcePath, sourceContents); - case "ignored": + case "template": break; default: throw new Error( From 91cedca5082b4a31683ed8f13e4dd5f3cb603644 Mon Sep 17 00:00:00 2001 From: alflennik Date: Tue, 5 Dec 2023 13:22:43 -0500 Subject: [PATCH 3/7] Fix example page issue --- .../patterns/accordion/accordion-pattern.md | 5 +- .../patterns/accordion/examples/accordion.md | 8 +- ARIA/apg/patterns/alert/alert-pattern.md | 5 +- ARIA/apg/patterns/alert/examples/alert.md | 8 +- .../alertdialog/alertdialog-pattern.md | 5 +- .../alertdialog/examples/alertdialog.md | 8 +- .../patterns/breadcrumb/breadcrumb-pattern.md | 5 +- .../breadcrumb/examples/breadcrumb.md | 8 +- ARIA/apg/patterns/button/button-pattern.md | 5 +- ARIA/apg/patterns/button/examples/button.md | 8 +- .../patterns/button/examples/button_idl.md | 8 +- .../apg/patterns/carousel/carousel-pattern.md | 5 +- .../carousel/examples/carousel-1-prev-next.md | 8 +- .../carousel/examples/carousel-2-tablist.md | 8 +- .../apg/patterns/checkbox/checkbox-pattern.md | 5 +- .../checkbox/examples/checkbox-mixed.md | 8 +- .../patterns/checkbox/examples/checkbox.md | 8 +- .../apg/patterns/combobox/combobox-pattern.md | 5 +- .../examples/combobox-autocomplete-both.md | 8 +- .../examples/combobox-autocomplete-list.md | 8 +- .../examples/combobox-autocomplete-none.md | 8 +- .../combobox/examples/combobox-datepicker.md | 8 +- .../combobox/examples/combobox-select-only.md | 8 +- .../patterns/combobox/examples/grid-combo.md | 8 +- .../dialog-modal/dialog-modal-pattern.md | 5 +- .../examples/datepicker-dialog.md | 8 +- .../patterns/dialog-modal/examples/dialog.md | 8 +- .../patterns/disclosure/disclosure-pattern.md | 5 +- .../disclosure/examples/disclosure-faq.md | 8 +- .../examples/disclosure-image-description.md | 8 +- .../examples/disclosure-navigation-hybrid.md | 9 +- .../examples/disclosure-navigation.md | 8 +- ARIA/apg/patterns/feed/examples/feed.md | 8 +- ARIA/apg/patterns/feed/feed-pattern.md | 5 +- .../grid/examples/advanced-data-grid.md | 8 +- ARIA/apg/patterns/grid/examples/data-grids.md | 8 +- .../patterns/grid/examples/layout-grids.md | 8 +- ARIA/apg/patterns/grid/grid-pattern.md | 5 +- .../patterns/landmarks/landmarks-pattern.md | 5 +- ARIA/apg/patterns/link/examples/link.md | 8 +- ARIA/apg/patterns/link/link-pattern.md | 5 +- .../listbox/examples/listbox-collapsible.md | 8 +- .../listbox/examples/listbox-grouped.md | 8 +- .../listbox/examples/listbox-rearrangeable.md | 8 +- .../listbox/examples/listbox-scrollable.md | 8 +- ARIA/apg/patterns/listbox/listbox-pattern.md | 5 +- .../menu-button-actions-active-descendant.md | 8 +- .../examples/menu-button-actions.md | 8 +- .../menu-button/examples/menu-button-links.md | 8 +- .../menu-button/menu-button-pattern.md | 5 +- .../menubar/examples/menubar-editor.md | 8 +- .../menubar/examples/menubar-navigation.md | 8 +- .../menubar/menu-and-menubar-pattern.md | 5 +- ARIA/apg/patterns/meter/examples/meter.md | 8 +- ARIA/apg/patterns/meter/meter-pattern.md | 5 +- ARIA/apg/patterns/patterns.md | 801 +++++++++--------- .../radio/examples/radio-activedescendant.md | 8 +- .../patterns/radio/examples/radio-rating.md | 8 +- ARIA/apg/patterns/radio/examples/radio.md | 8 +- .../apg/patterns/radio/radio-group-pattern.md | 5 +- .../examples/slider-multithumb.md | 8 +- .../slider-multithumb-pattern.md | 5 +- .../slider/examples/slider-color-viewer.md | 8 +- .../patterns/slider/examples/slider-rating.md | 8 +- .../patterns/slider/examples/slider-seek.md | 8 +- .../slider/examples/slider-temperature.md | 8 +- ARIA/apg/patterns/slider/slider-pattern.md | 5 +- .../examples/datepicker-spinbuttons.md | 8 +- .../patterns/spinbutton/spinbutton-pattern.md | 5 +- .../patterns/switch/examples/switch-button.md | 8 +- .../switch/examples/switch-checkbox.md | 8 +- ARIA/apg/patterns/switch/examples/switch.md | 8 +- ARIA/apg/patterns/switch/switch-pattern.md | 5 +- .../patterns/table/examples/sortable-table.md | 8 +- ARIA/apg/patterns/table/examples/table.md | 8 +- ARIA/apg/patterns/table/table-pattern.md | 5 +- .../patterns/tabs/examples/tabs-automatic.md | 8 +- .../apg/patterns/tabs/examples/tabs-manual.md | 8 +- ARIA/apg/patterns/tabs/tabs-pattern.md | 5 +- ARIA/apg/patterns/toolbar/examples/toolbar.md | 8 +- ARIA/apg/patterns/toolbar/toolbar-pattern.md | 5 +- ARIA/apg/patterns/tooltip/tooltip-pattern.md | 5 +- .../patterns/treegrid/examples/treegrid-1.md | 8 +- .../apg/patterns/treegrid/treegrid-pattern.md | 5 +- .../patterns/treeview/examples/treeview-1a.md | 8 +- .../patterns/treeview/examples/treeview-1b.md | 8 +- .../treeview/examples/treeview-navigation.md | 8 +- .../apg/patterns/treeview/treeview-pattern.md | 5 +- .../windowsplitter/windowsplitter-pattern.md | 5 +- ARIA/apg/practices/practices.md | 183 ++-- .../templates/example-usage-warning.html | 28 - _external/aria-practices | 2 +- _includes/read-this-first.html | 13 - .../pattern-accordion.svg} | 0 .../alert.svg => images/pattern-alert.svg} | 0 .../pattern-alertdialog.svg} | 0 .../pattern-breadcrumb.svg} | 0 .../button.svg => images/pattern-button.svg} | 0 .../pattern-carousel.svg} | 0 .../pattern-checkbox.svg} | 0 .../pattern-combobox.svg} | 0 .../pattern-dialog-modal.svg} | 0 .../pattern-disclosure.svg} | 0 .../{img/feed.svg => images/pattern-feed.svg} | 0 .../{img/grid.svg => images/pattern-grid.svg} | 0 .../pattern-landmarks.svg} | 0 .../{img/link.svg => images/pattern-link.svg} | 0 .../pattern-listbox.svg} | 0 .../pattern-menu-button.svg} | 0 .../pattern-menubar.svg} | 0 .../meter.svg => images/pattern-meter.svg} | 0 .../radio.svg => images/pattern-radio.svg} | 0 .../pattern-slider-multithumb.svg} | 0 .../slider.svg => images/pattern-slider.svg} | 0 .../pattern-spinbutton.svg} | 0 .../switch.svg => images/pattern-switch.svg} | 0 .../table.svg => images/pattern-table.svg} | 0 .../{img/tabs.svg => images/pattern-tabs.svg} | 0 .../pattern-toolbar.svg} | 0 .../pattern-tooltip.svg} | 0 .../pattern-treegrid.svg} | 0 .../pattern-treeview.svg} | 0 .../pattern-windowsplitter.svg} | 0 .../{img => images}/read-this-first.svg | 0 scripts/pre-build/library/transformExample.js | 6 +- 125 files changed, 718 insertions(+), 930 deletions(-) delete mode 100644 ARIA/apg/shared/templates/example-usage-warning.html delete mode 100644 _includes/read-this-first.html rename content-images/wai-aria-practices/{img/accordion.svg => images/pattern-accordion.svg} (100%) rename content-images/wai-aria-practices/{img/alert.svg => images/pattern-alert.svg} (100%) rename content-images/wai-aria-practices/{img/alertdialog.svg => images/pattern-alertdialog.svg} (100%) rename content-images/wai-aria-practices/{img/breadcrumb.svg => images/pattern-breadcrumb.svg} (100%) rename content-images/wai-aria-practices/{img/button.svg => images/pattern-button.svg} (100%) rename content-images/wai-aria-practices/{img/carousel.svg => images/pattern-carousel.svg} (100%) rename content-images/wai-aria-practices/{img/checkbox.svg => images/pattern-checkbox.svg} (100%) rename content-images/wai-aria-practices/{img/combobox.svg => images/pattern-combobox.svg} (100%) rename content-images/wai-aria-practices/{img/dialog-modal.svg => images/pattern-dialog-modal.svg} (100%) rename content-images/wai-aria-practices/{img/disclosure.svg => images/pattern-disclosure.svg} (100%) rename content-images/wai-aria-practices/{img/feed.svg => images/pattern-feed.svg} (100%) rename content-images/wai-aria-practices/{img/grid.svg => images/pattern-grid.svg} (100%) rename content-images/wai-aria-practices/{img/landmarks.svg => images/pattern-landmarks.svg} (100%) rename content-images/wai-aria-practices/{img/link.svg => images/pattern-link.svg} (100%) rename content-images/wai-aria-practices/{img/listbox.svg => images/pattern-listbox.svg} (100%) rename content-images/wai-aria-practices/{img/menu-button.svg => images/pattern-menu-button.svg} (100%) rename content-images/wai-aria-practices/{img/menubar.svg => images/pattern-menubar.svg} (100%) rename content-images/wai-aria-practices/{img/meter.svg => images/pattern-meter.svg} (100%) rename content-images/wai-aria-practices/{img/radio.svg => images/pattern-radio.svg} (100%) rename content-images/wai-aria-practices/{img/slider-multithumb.svg => images/pattern-slider-multithumb.svg} (100%) rename content-images/wai-aria-practices/{img/slider.svg => images/pattern-slider.svg} (100%) rename content-images/wai-aria-practices/{img/spinbutton.svg => images/pattern-spinbutton.svg} (100%) rename content-images/wai-aria-practices/{img/switch.svg => images/pattern-switch.svg} (100%) rename content-images/wai-aria-practices/{img/table.svg => images/pattern-table.svg} (100%) rename content-images/wai-aria-practices/{img/tabs.svg => images/pattern-tabs.svg} (100%) rename content-images/wai-aria-practices/{img/toolbar.svg => images/pattern-toolbar.svg} (100%) rename content-images/wai-aria-practices/{img/tooltip.svg => images/pattern-tooltip.svg} (100%) rename content-images/wai-aria-practices/{img/treegrid.svg => images/pattern-treegrid.svg} (100%) rename content-images/wai-aria-practices/{img/treeview.svg => images/pattern-treeview.svg} (100%) rename content-images/wai-aria-practices/{img/windowsplitter.svg => images/pattern-windowsplitter.svg} (100%) rename content-images/wai-aria-practices/{img => images}/read-this-first.svg (100%) diff --git a/ARIA/apg/patterns/accordion/accordion-pattern.md b/ARIA/apg/patterns/accordion/accordion-pattern.md index 7f4ad6bbd..67f8a7c17 100644 --- a/ARIA/apg/patterns/accordion/accordion-pattern.md +++ b/ARIA/apg/patterns/accordion/accordion-pattern.md @@ -80,9 +80,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

    -
    +
    +

    Example

    Accordion Example: demonstrates a form divided into three sections using an accordion to show one section at a time.

    diff --git a/ARIA/apg/patterns/accordion/examples/accordion.md b/ARIA/apg/patterns/accordion/examples/accordion.md index 56a901de8..c11ae1c5f 100644 --- a/ARIA/apg/patterns/accordion/examples/accordion.md +++ b/ARIA/apg/patterns/accordion/examples/accordion.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/accordion/examples/accordion/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 30 November 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -93,10 +93,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
    -

    About This Example

    +

    About This Example

    +

    The below example section contains a simple personal information input form divided into 3 sections that demonstrates the Accordion Pattern.

    diff --git a/ARIA/apg/patterns/alert/alert-pattern.md b/ARIA/apg/patterns/alert/alert-pattern.md index f2a259fdd..20830a675 100644 --- a/ARIA/apg/patterns/alert/alert-pattern.md +++ b/ARIA/apg/patterns/alert/alert-pattern.md @@ -81,9 +81,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

    -
    +
    +

    Example

    Alert Example

    diff --git a/ARIA/apg/patterns/alert/examples/alert.md b/ARIA/apg/patterns/alert/examples/alert.md index ea203b9c6..9c3b6f689 100644 --- a/ARIA/apg/patterns/alert/examples/alert.md +++ b/ARIA/apg/patterns/alert/examples/alert.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alert/examples/alert/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 30 November 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -97,10 +97,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
    -

    About This Example

    +

    About This Example

    +

    The below example demonstrates the Alert Pattern. Activating the Trigger Alert button causes a message to be inserted into the example alert element. diff --git a/ARIA/apg/patterns/alertdialog/alertdialog-pattern.md b/ARIA/apg/patterns/alertdialog/alertdialog-pattern.md index 8c66ba215..227b5467c 100644 --- a/ARIA/apg/patterns/alertdialog/alertdialog-pattern.md +++ b/ARIA/apg/patterns/alertdialog/alertdialog-pattern.md @@ -69,9 +69,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

    -
    +
    +

    Example

    Alert Dialog Example: A confirmation prompt that demonstrates an alert dialog.

    diff --git a/ARIA/apg/patterns/alertdialog/examples/alertdialog.md b/ARIA/apg/patterns/alertdialog/examples/alertdialog.md index adc54b959..d5697bb50 100644 --- a/ARIA/apg/patterns/alertdialog/examples/alertdialog.md +++ b/ARIA/apg/patterns/alertdialog/examples/alertdialog.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alertdialog/examples/alertdialog/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 30 November 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -95,10 +95,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
    -

    About This Example

    +

    About This Example

    +

    The below example of a confirmation prompt demonstrates the Alert Dialog Pattern. It also includes an example of the Alert Pattern to make comparing the experiences provided by the two patterns easy. diff --git a/ARIA/apg/patterns/breadcrumb/breadcrumb-pattern.md b/ARIA/apg/patterns/breadcrumb/breadcrumb-pattern.md index 64edb83de..05f50cfa1 100644 --- a/ARIA/apg/patterns/breadcrumb/breadcrumb-pattern.md +++ b/ARIA/apg/patterns/breadcrumb/breadcrumb-pattern.md @@ -69,9 +69,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

    -
    +
    +

    Example

    Breadcrumb design pattern example

    diff --git a/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md b/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md index 593f0ca37..32a28e6ba 100644 --- a/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md +++ b/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/breadcrumb/examples/breadcrumb/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 24 October 2023

    " +footer: "

    View issues related to this example

    Page last updated: 30 November 2023

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -93,10 +93,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
    -

    About This Example

    +

    About This Example

    +

    The following example demonstrates the Breadcrumb Pattern.

    diff --git a/ARIA/apg/patterns/button/button-pattern.md b/ARIA/apg/patterns/button/button-pattern.md index 05a4decd8..fe26dada7 100644 --- a/ARIA/apg/patterns/button/button-pattern.md +++ b/ARIA/apg/patterns/button/button-pattern.md @@ -90,9 +90,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
    -
    +
    +

    Examples

    • Button Examples: Examples of clickable HTML div and span elements made into accessible command and toggle buttons.
      • diff --git a/ARIA/apg/patterns/button/examples/button.md b/ARIA/apg/patterns/button/examples/button.md index 87a7d17b5..c3f2c71c7 100644 --- a/ARIA/apg/patterns/button/examples/button.md +++ b/ARIA/apg/patterns/button/examples/button.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button/ sidebar: true -footer: "

      View issues related to this example

      Page last updated: 24 October 2023

      " +footer: "

      View issues related to this example

      Page last updated: 30 November 2023

      " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -95,10 +95,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
      -

      About This Example

      +

      About This Example

      +

      The following command and toggle button examples demonstrate the Button Pattern.

      Similar examples include:

        diff --git a/ARIA/apg/patterns/button/examples/button_idl.md b/ARIA/apg/patterns/button/examples/button_idl.md index 7ccf22874..086390b6f 100644 --- a/ARIA/apg/patterns/button/examples/button_idl.md +++ b/ARIA/apg/patterns/button/examples/button_idl.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button_idl/ sidebar: true -footer: "

        View issues related to this example

        Page last updated: 24 October 2023

        " +footer: "

        View issues related to this example

        Page last updated: 30 November 2023

        " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -96,6 +96,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

        About This example

        +

        The following examples of the Button Pattern demonstrate a new JavaScript syntax for coding ARIA attributes.

        The JavaScript for the example buttons on this page uses the IDL Interface defined in ARIA 1.2. @@ -121,10 +122,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); browser that does not yet provide support for ARIA attribute reflection, the buttons will not be styled correctly.

        - +

        This Print action button uses a div element.

        Print Page
        diff --git a/ARIA/apg/patterns/carousel/carousel-pattern.md b/ARIA/apg/patterns/carousel/carousel-pattern.md index bf7a66c4b..b23f0e162 100644 --- a/ARIA/apg/patterns/carousel/carousel-pattern.md +++ b/ARIA/apg/patterns/carousel/carousel-pattern.md @@ -97,9 +97,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
      -
      +
      +

      Examples

      • Auto-Rotating Image Carousel with Buttons for Slide Control: A basic image carousel that demonstrates the accessibility features necessary for carousels that rotate automatically on page load and also enables users to choose which slide is displayed with buttons for previous and next slide.
        • diff --git a/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md b/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md index 1cd50c2e6..2b4445fe0 100644 --- a/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md +++ b/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/ sidebar: true -footer: "

        View issues related to this example

        Page last updated: 24 October 2023

        " +footer: "

        View issues related to this example

        Page last updated: 30 November 2023

        " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -96,10 +96,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
        -

        About This Example

        +

        About This Example

        +

        The following example implementation of the Carousel Pattern demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads. For instance, rotation stops when users either move focus into the carousel or hover the mouse over carousel content, and users can manually control which slide is displayed with previous and next slide buttons. diff --git a/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md b/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md index ab6a7d31f..cfe3879e1 100644 --- a/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md +++ b/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/carousel/examples/carousel-2-tablist/ sidebar: true -footer: "

        View issues related to this example

        Page last updated: 24 October 2023

        " +footer: "

        View issues related to this example

        Page last updated: 30 November 2023

        " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
        -

        About This Example

        +

        About This Example

        +

        The following example implementation of the Carousel Pattern demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads. This example also illustrates how to use the tabs pattern to provide users with a way to skip slides in the sequence by directly choosing which one to view. diff --git a/ARIA/apg/patterns/checkbox/checkbox-pattern.md b/ARIA/apg/patterns/checkbox/checkbox-pattern.md index 69c0fb460..2dbabed66 100644 --- a/ARIA/apg/patterns/checkbox/checkbox-pattern.md +++ b/ARIA/apg/patterns/checkbox/checkbox-pattern.md @@ -83,9 +83,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

      -
      +
      +

      Examples

      • Checkbox (Two-State) Example: Demonstrates a simple 2-state checkbox.
        • diff --git a/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md b/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md index 26ed1999c..30e2a3d33 100644 --- a/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md +++ b/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/checkbox/examples/checkbox-mixed/ sidebar: true -footer: "

        View issues related to this example

        Page last updated: 24 October 2023

        " +footer: "

        View issues related to this example

        Page last updated: 30 November 2023

        " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
        -

        About This Example

        +

        About This Example

        +

        This example demonstrates using the Checkbox Pattern to create a tri-state, or mixed-state, checkbox. In this implementation, the mixed-state checkbox represents the state of a set of standard HTML checkboxes. diff --git a/ARIA/apg/patterns/checkbox/examples/checkbox.md b/ARIA/apg/patterns/checkbox/examples/checkbox.md index 977e7f509..56ed93881 100644 --- a/ARIA/apg/patterns/checkbox/examples/checkbox.md +++ b/ARIA/apg/patterns/checkbox/examples/checkbox.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/checkbox/examples/checkbox/ sidebar: true -footer: "

        View issues related to this example

        Page last updated: 24 October 2023

        " +footer: "

        View issues related to this example

        Page last updated: 30 November 2023

        " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
        -

        About This Example

        +

        About This Example

        +

        This example implements the Checkbox Pattern for a two state checkbox using div elements.

        Similar examples include:

        diff --git a/ARIA/apg/patterns/combobox/combobox-pattern.md b/ARIA/apg/patterns/combobox/combobox-pattern.md index 718a5d967..888e772e1 100644 --- a/ARIA/apg/patterns/combobox/combobox-pattern.md +++ b/ARIA/apg/patterns/combobox/combobox-pattern.md @@ -143,9 +143,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

        -
        +
        +

        Examples

        • Select-Only Combobox: A single-select combobox with no text input that is functionally similar to an HTML select element.
          • diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md index 26886a6fb..5207fb374 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/ sidebar: true -footer: "

          View issues related to this example

          Page last updated: 24 October 2023

          " +footer: "

          View issues related to this example

          Page last updated: 30 November 2023

          " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
          -

          About This Example

          +

          About This Example

          +

          The below combobox for choosing the name of a US state or territory demonstrates the Combobox Pattern. The design pattern describes four types of autocomplete behavior. diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md index 58f9491fd..9f550985a 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/ sidebar: true -footer: "

          View issues related to this example

          Page last updated: 24 October 2023

          " +footer: "

          View issues related to this example

          Page last updated: 30 November 2023

          " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
          -

          About This Example

          +

          About This Example

          +

          The below combobox for choosing the name of a US state or territory demonstrates the Combobox Pattern. The design pattern describes four types of autocomplete behavior. diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md index 3651155cd..2bdef41e9 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none/ sidebar: true -footer: "

          View issues related to this example

          Page last updated: 24 October 2023

          " +footer: "

          View issues related to this example

          Page last updated: 30 November 2023

          " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
          -

          About This Example

          +

          About This Example

          +

          The below combobox that enables users to choose a term from a hypothetical list of previously searched terms demonstrates the Combobox Pattern. The design pattern describes four types of autocomplete behavior. diff --git a/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md b/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md index adec07aaa..9a27ef9da 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-datepicker/ sidebar: true -footer: "

          View issues related to this example

          Page last updated: 24 October 2023

          " +footer: "

          View issues related to this example

          Page last updated: 30 November 2023

          " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -100,10 +100,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
          -

          About This Example

          +

          About This Example

          +

          The below date picker demonstrates an implementation of the Combobox Pattern that opens a dialog. The date picker dialog is opened by activating the choose date button or by moving keyboard focus to the combobox and pressing Down Arrow or Alt + Down Arrow. diff --git a/ARIA/apg/patterns/combobox/examples/combobox-select-only.md b/ARIA/apg/patterns/combobox/examples/combobox-select-only.md index 028193917..ee214694b 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-select-only.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-select-only.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-select-only/ sidebar: true -footer: "

          View issues related to this example

          Page last updated: 24 October 2023

          " +footer: "

          View issues related to this example

          Page last updated: 30 November 2023

          " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
          -

          About This Example

          +

          About This Example

          +

          The following example implementation of the Combobox Pattern demonstrates a single-select combobox widget that is functionally similar to an HTML select element. Unlike the editable combobox examples, this select-only combobox is not made with an <input> element, and it does not accept freeform user input. diff --git a/ARIA/apg/patterns/combobox/examples/grid-combo.md b/ARIA/apg/patterns/combobox/examples/grid-combo.md index 463830e4d..ce648c692 100644 --- a/ARIA/apg/patterns/combobox/examples/grid-combo.md +++ b/ARIA/apg/patterns/combobox/examples/grid-combo.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/grid-combo/ sidebar: true -footer: "

          View issues related to this example

          Page last updated: 24 October 2023

          " +footer: "

          View issues related to this example

          Page last updated: 30 November 2023

          " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -96,10 +96,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
          -

          About This Example

          +

          About This Example

          +

          The following example combobox implements the combobox pattern using a grid for the suggested values popup.

          diff --git a/ARIA/apg/patterns/dialog-modal/dialog-modal-pattern.md b/ARIA/apg/patterns/dialog-modal/dialog-modal-pattern.md index 25f04db0d..28809d303 100644 --- a/ARIA/apg/patterns/dialog-modal/dialog-modal-pattern.md +++ b/ARIA/apg/patterns/dialog-modal/dialog-modal-pattern.md @@ -79,9 +79,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

          -
          +
          +

          Examples

          • Modal Dialog Example: Demonstrates multiple layers of modal dialogs with both small and large amounts of content.
            • diff --git a/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md b/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md index e7c34605d..bcdd99d78 100644 --- a/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md +++ b/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/ sidebar: true -footer: "

            View issues related to this example

            Page last updated: 24 October 2023

            " +footer: "

            View issues related to this example

            Page last updated: 30 November 2023

            " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -100,10 +100,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
            -

            About This Example

            +

            About This Example

            +

            The example below includes a date input field and a button that opens a date picker that implements the Dialog (Modal) Pattern. The dialog contains a calendar that uses the grid pattern to present buttons that enable the user to choose a day from the calendar. diff --git a/ARIA/apg/patterns/dialog-modal/examples/dialog.md b/ARIA/apg/patterns/dialog-modal/examples/dialog.md index b449ee2b1..f56eb2bcf 100644 --- a/ARIA/apg/patterns/dialog-modal/examples/dialog.md +++ b/ARIA/apg/patterns/dialog-modal/examples/dialog.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/dialog-modal/examples/dialog/ sidebar: true -footer: "

            View issues related to this example

            Page last updated: 24 October 2023

            " +footer: "

            View issues related to this example

            Page last updated: 30 November 2023

            " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -95,10 +95,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
            -

            About This Example

            +

            About This Example

            +

            Following is an example implementation of the Dialog (Modal) Pattern. The below Add Delivery Address button opens a modal dialog that contains two buttons that open other dialogs. diff --git a/ARIA/apg/patterns/disclosure/disclosure-pattern.md b/ARIA/apg/patterns/disclosure/disclosure-pattern.md index d35de64ec..6c6c371fe 100644 --- a/ARIA/apg/patterns/disclosure/disclosure-pattern.md +++ b/ARIA/apg/patterns/disclosure/disclosure-pattern.md @@ -70,9 +70,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

            -
            +
            +

            Examples

            • Disclosure (Show/Hide) of Image Description
              • diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md b/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md index 99fd510d0..08947588d 100644 --- a/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md +++ b/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-faq/ sidebar: true -footer: "

              View issues related to this example

              Page last updated: 24 October 2023

              " +footer: "

              View issues related to this example

              Page last updated: 30 November 2023

              " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -96,10 +96,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
              -

              About This Example

              +

              About This Example

              +

              The following example demonstrates using the Disclosure Pattern to create a set of frequently asked questions where the answers may be independently shown or hidden.

              diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md index 99a1ad409..b9ca87d10 100644 --- a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md +++ b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-image-description/ sidebar: true -footer: "

              View issues related to this example

              Page last updated: 24 October 2023

              " +footer: "

              View issues related to this example

              Page last updated: 30 November 2023

              " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
              -

              About This Example

              +

              About This Example

              +

              The following example demonstrates using the Disclosure Pattern to provide a way of revealing a table of data that complements an image.

              diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md index 26b93ea17..60e8d9922 100644 --- a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md +++ b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/ sidebar: true -footer: "

              View issues related to this example

              Page last updated: 24 October 2023

              " +footer: "

              View issues related to this example

              Page last updated: 30 November 2023

              " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -103,11 +103,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); Typical site navigation does not need all the keyboard interactions specified by the menu and menubar pattern.

              - - + +

              The following example demonstrates using the Disclosure Pattern to show and hide dropdown lists of links in a navigation bar for a mythical university web site. Unlike the other disclosure navigation menu example, this example includes top-level links alongside the disclosure buttons. diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md index 33a69bef4..4fdeb0072 100644 --- a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md +++ b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-navigation/ sidebar: true -footer: "

              View issues related to this example

              Page last updated: 24 October 2023

              " +footer: "

              View issues related to this example

              Page last updated: 30 November 2023

              " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -103,10 +103,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); Typical site navigation does not need all the keyboard interactions specified by the menu and menubar pattern.

              - + +

              The following example demonstrates using the Disclosure Pattern to show and hide dropdown lists of links in a navigation bar for a mythical university web site. Each disclosure button represents a section of the web site, and expanding it shows a list of links to pages within that section. diff --git a/ARIA/apg/patterns/feed/examples/feed.md b/ARIA/apg/patterns/feed/examples/feed.md index ed14685d9..6d9698aab 100644 --- a/ARIA/apg/patterns/feed/examples/feed.md +++ b/ARIA/apg/patterns/feed/examples/feed.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/feed/examples/feed/ sidebar: true -footer: "

              View issues related to this example

              Page last updated: 24 October 2023

              " +footer: "

              View issues related to this example

              Page last updated: 30 November 2023

              " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -88,10 +88,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
              -

              About This Example

              +

              About This Example

              +

              NOTE: The feed role is a new WAI-ARIA feature, introduced by WAI-ARIA 1.1. This page provides a proposed implementation of a feed component. diff --git a/ARIA/apg/patterns/feed/feed-pattern.md b/ARIA/apg/patterns/feed/feed-pattern.md index 39ea59724..c9a4d65b4 100644 --- a/ARIA/apg/patterns/feed/feed-pattern.md +++ b/ARIA/apg/patterns/feed/feed-pattern.md @@ -105,9 +105,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

              -
              +
              +

              Example

              Example Implementation of Feed Pattern diff --git a/ARIA/apg/patterns/grid/examples/advanced-data-grid.md b/ARIA/apg/patterns/grid/examples/advanced-data-grid.md index 317f5241f..86329c818 100644 --- a/ARIA/apg/patterns/grid/examples/advanced-data-grid.md +++ b/ARIA/apg/patterns/grid/examples/advanced-data-grid.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/advanced-data-grid/ sidebar: true -footer: "

              View issues related to this example

              Page last updated: 24 October 2023

              " +footer: "

              View issues related to this example

              Page last updated: 30 November 2023

              " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -101,10 +101,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
              -

              About This Example

              +

              About This Example

              +

              This example has not yet been developed. Development is described in issue 155. diff --git a/ARIA/apg/patterns/grid/examples/data-grids.md b/ARIA/apg/patterns/grid/examples/data-grids.md index 457fad361..dff878f38 100644 --- a/ARIA/apg/patterns/grid/examples/data-grids.md +++ b/ARIA/apg/patterns/grid/examples/data-grids.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/data-grids/ sidebar: true -footer: "

              View issues related to this example

              Page last updated: 24 October 2023

              " +footer: "

              View issues related to this example

              Page last updated: 30 November 2023

              " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -101,10 +101,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
              -

              About This Example

              +

              About This Example

              +

              Following are three example implementations of the Grid Pattern that demonstrate the keyboard interactions and ARIA features that enable accessible, interactive presentation of tabular information. Each of the following three grids presents a set of financial transactions. diff --git a/ARIA/apg/patterns/grid/examples/layout-grids.md b/ARIA/apg/patterns/grid/examples/layout-grids.md index 199526969..436338406 100644 --- a/ARIA/apg/patterns/grid/examples/layout-grids.md +++ b/ARIA/apg/patterns/grid/examples/layout-grids.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/layout-grids/ sidebar: true -footer: "

              View issues related to this example

              Page last updated: 24 October 2023

              " +footer: "

              View issues related to this example

              Page last updated: 30 November 2023

              " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -96,10 +96,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
              -

              About This Example

              +

              About This Example

              +

              The following examples demonstrate how the Grid Pattern can be used to group a collection of interactive widgets into a single tab stop. In these examples, each widget, such as a link or button, is in a separate cell of the grid, and the user can navigate between them with the arrow keys. diff --git a/ARIA/apg/patterns/grid/grid-pattern.md b/ARIA/apg/patterns/grid/grid-pattern.md index 5ecd923e8..2c321243f 100644 --- a/ARIA/apg/patterns/grid/grid-pattern.md +++ b/ARIA/apg/patterns/grid/grid-pattern.md @@ -95,9 +95,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

              -
              +
              +

              Examples

              • Layout Grid Examples: Three example implementations of grids that are used to lay out widgets, including a collection of navigation links, a message recipients list, and a set of search results.
                • diff --git a/ARIA/apg/patterns/landmarks/landmarks-pattern.md b/ARIA/apg/patterns/landmarks/landmarks-pattern.md index 7b1096366..e9315f7a4 100644 --- a/ARIA/apg/patterns/landmarks/landmarks-pattern.md +++ b/ARIA/apg/patterns/landmarks/landmarks-pattern.md @@ -80,9 +80,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

              -
              +
              +

              Examples

              • Main Landmark Example
                • diff --git a/ARIA/apg/patterns/link/examples/link.md b/ARIA/apg/patterns/link/examples/link.md index e735827a7..c916f2d22 100644 --- a/ARIA/apg/patterns/link/examples/link.md +++ b/ARIA/apg/patterns/link/examples/link.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/link/examples/link/ sidebar: true -footer: "

                View issues related to this example

                Page last updated: 24 October 2023

                " +footer: "

                View issues related to this example

                Page last updated: 30 November 2023

                " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                -

                About This Example

                +

                About This Example

                +

                The examples below demonstrate three variations of the Link Pattern. The link pattern is used when it is necessary for elements other than the HTML a element to have link behaviors. diff --git a/ARIA/apg/patterns/link/link-pattern.md b/ARIA/apg/patterns/link/link-pattern.md index e6cb9546f..5851d1dd7 100644 --- a/ARIA/apg/patterns/link/link-pattern.md +++ b/ARIA/apg/patterns/link/link-pattern.md @@ -74,9 +74,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

                -
                +
                +

                Examples

                Link Examples: Link widgets constructed from HTML span and img elements.

                diff --git a/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md b/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md index 461c10014..ee8076923 100644 --- a/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md +++ b/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-collapsible/ sidebar: true -footer: "

                View issues related to this example

                Page last updated: 24 October 2023

                " +footer: "

                View issues related to this example

                Page last updated: 30 November 2023

                " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -102,10 +102,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); This pattern has been deprecated, and will be removed in a future version of the ARIA Authoring Practices. The select-only combobox should be used as an alternative to this pattern.

                - + +

                The following example implementation of the Listbox Pattern demonstrates a collapsible single-select listbox widget that is functionally similar to an HTML select input with the attribute size="1". The widget consists of a button that triggers the display of a listbox. diff --git a/ARIA/apg/patterns/listbox/examples/listbox-grouped.md b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md index ec3ece502..8242b5049 100644 --- a/ARIA/apg/patterns/listbox/examples/listbox-grouped.md +++ b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-grouped/ sidebar: true -footer: "

                View issues related to this example

                Page last updated: 24 October 2023

                " +footer: "

                View issues related to this example

                Page last updated: 30 November 2023

                " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -95,10 +95,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                -

                About This Example

                +

                About This Example

                +

                The following example implementation of the Listbox Pattern demonstrates a single-select listbox widget with grouped options. This widget is functionally similar to an HTML select element with size greater than 1 and options grouped into categories with labeled optgroup elements. diff --git a/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md b/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md index 22d5bd302..da7ffc13a 100644 --- a/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md +++ b/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-rearrangeable/ sidebar: true -footer: "

                View issues related to this example

                Page last updated: 24 October 2023

                " +footer: "

                View issues related to this example

                Page last updated: 30 November 2023

                " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -96,10 +96,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                -

                About This Example

                +

                About This Example

                +

                The following two example implementations of the Listbox Pattern demonstrate differences between single-select and multi-select functionality. In both examples, users can use action buttons to move options from one list to another. diff --git a/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md b/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md index 16b27f65b..12e434ec6 100644 --- a/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md +++ b/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-scrollable/ sidebar: true -footer: "

                View issues related to this example

                Page last updated: 24 October 2023

                " +footer: "

                View issues related to this example

                Page last updated: 30 November 2023

                " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -95,10 +95,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                -

                About This Example

                +

                About This Example

                +

                The following example implementation of the Listbox Pattern demonstrates a scrollable single-select listbox widget. This widget is functionally similar to an HTML select input where the size attribute has a value greater than one. diff --git a/ARIA/apg/patterns/listbox/listbox-pattern.md b/ARIA/apg/patterns/listbox/listbox-pattern.md index c08d2224c..466f6887c 100644 --- a/ARIA/apg/patterns/listbox/listbox-pattern.md +++ b/ARIA/apg/patterns/listbox/listbox-pattern.md @@ -90,9 +90,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

                -
                +
                +

                Examples

                • Scrollable Listbox Example: Single-select listbox that scrolls to reveal more options, similar to HTML select with size attribute greater than one.
                  • diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md b/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md index 360765957..f0a612f3c 100644 --- a/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md +++ b/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-de sidebar: true -footer: "

                  View issues related to this example

                  Page last updated: 24 October 2023

                  " +footer: "

                  View issues related to this example

                  Page last updated: 30 November 2023

                  " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                  -

                  About This Example

                  +

                  About This Example

                  +

                  This example demonstrates how the Menu Button Pattern can be used to create a button that opens an actions menu. In this example, choosing an action from the menu will cause the chosen action to be displayed in the Last Action edit box. diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md b/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md index 00ae63ae4..1b61d52ad 100644 --- a/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md +++ b/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-actions/ sidebar: true -footer: "

                  View issues related to this example

                  Page last updated: 24 October 2023

                  " +footer: "

                  View issues related to this example

                  Page last updated: 30 November 2023

                  " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                  -

                  About This Example

                  +

                  About This Example

                  +

                  This example demonstrates how the Menu Button Pattern can be used to create a button that opens an actions menu. In this example, choosing an action from the menu will cause the chosen action to be displayed in the Last Action edit box. diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-links.md b/ARIA/apg/patterns/menu-button/examples/menu-button-links.md index cd96d981e..7c7a83813 100644 --- a/ARIA/apg/patterns/menu-button/examples/menu-button-links.md +++ b/ARIA/apg/patterns/menu-button/examples/menu-button-links.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-links/ sidebar: true -footer: "

                  View issues related to this example

                  Page last updated: 24 October 2023

                  " +footer: "

                  View issues related to this example

                  Page last updated: 30 November 2023

                  " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                  -

                  About This Example

                  +

                  About This Example

                  +

                  This example demonstrates the Menu Button Pattern for a button that displays a menu of link targets. The menu items are made from HTML links, so they maintain their HTML link behaviors. diff --git a/ARIA/apg/patterns/menu-button/menu-button-pattern.md b/ARIA/apg/patterns/menu-button/menu-button-pattern.md index 4dc578da5..6d829c59d 100644 --- a/ARIA/apg/patterns/menu-button/menu-button-pattern.md +++ b/ARIA/apg/patterns/menu-button/menu-button-pattern.md @@ -68,9 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

                  -
                  +
                  +

                  Examples

                  • Action Menu Button Example Using aria-activedescendant: A button that opens a menu of actions or commands where focus in the menu is managed using aria-activedescendant.
                    • diff --git a/ARIA/apg/patterns/menubar/examples/menubar-editor.md b/ARIA/apg/patterns/menubar/examples/menubar-editor.md index e1fdaf8c3..c7527c152 100644 --- a/ARIA/apg/patterns/menubar/examples/menubar-editor.md +++ b/ARIA/apg/patterns/menubar/examples/menubar-editor.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menubar/examples/menubar-editor/ sidebar: true -footer: "

                    View issues related to this example

                    Page last updated: 24 October 2023

                    " +footer: "

                    View issues related to this example

                    Page last updated: 30 November 2023

                    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -95,10 +95,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                    -

                    About This Example

                    +

                    About This Example

                    +

                    The following example demonstrates using the Menubar Pattern to provide access to editing actions for a text area. Each item in the menubar identifies a category of text formatting actions that can be executed from its submenu. diff --git a/ARIA/apg/patterns/menubar/examples/menubar-navigation.md b/ARIA/apg/patterns/menubar/examples/menubar-navigation.md index c35b73256..3f5e65435 100644 --- a/ARIA/apg/patterns/menubar/examples/menubar-navigation.md +++ b/ARIA/apg/patterns/menubar/examples/menubar-navigation.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menubar/examples/menubar-navigation/ sidebar: true -footer: "

                    View issues related to this example

                    Page last updated: 24 October 2023

                    " +footer: "

                    View issues related to this example

                    Page last updated: 30 November 2023

                    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -105,10 +105,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); For an example, see Example Disclosure Navigation Menu.
                  - + +

                  The following implementation of the Menubar Pattern demonstrates how a menubar can provide navigation menus. The parent menu items in the menubar represent a section of a mythical university web site and open a submenu containing menu items that link to pages within that section. diff --git a/ARIA/apg/patterns/menubar/menu-and-menubar-pattern.md b/ARIA/apg/patterns/menubar/menu-and-menubar-pattern.md index e122c3a81..a779de41a 100644 --- a/ARIA/apg/patterns/menubar/menu-and-menubar-pattern.md +++ b/ARIA/apg/patterns/menubar/menu-and-menubar-pattern.md @@ -77,9 +77,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

                  A common convention for indicating that a menu item launches a dialog box is to append "…" (ellipsis) to the menu item label, e.g., "Save as …".

                  -
                  +
                  +

                  Examples

                  • Editor Menubar Example: Demonstrates menu radios and menu checkboxes in submenus of a menubar that provides text formatting commands for a text field.
                    • diff --git a/ARIA/apg/patterns/meter/examples/meter.md b/ARIA/apg/patterns/meter/examples/meter.md index 84755cb5d..b6b239df8 100644 --- a/ARIA/apg/patterns/meter/examples/meter.md +++ b/ARIA/apg/patterns/meter/examples/meter.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/meter/examples/meter/ sidebar: true -footer: "

                    View issues related to this example

                    Page last updated: 24 October 2023

                    " +footer: "

                    View issues related to this example

                    Page last updated: 30 November 2023

                    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -100,10 +100,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                    -

                    About This Example

                    +

                    About This Example

                    +

                    The following example of a CPU meter demonstrates the Meter Pattern.

                    diff --git a/ARIA/apg/patterns/meter/meter-pattern.md b/ARIA/apg/patterns/meter/meter-pattern.md index 6ce8e7a7d..8beee95c4 100644 --- a/ARIA/apg/patterns/meter/meter-pattern.md +++ b/ARIA/apg/patterns/meter/meter-pattern.md @@ -78,9 +78,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                  -
                  +
                  +

                  Example

                  Meter Example

                  diff --git a/ARIA/apg/patterns/patterns.md b/ARIA/apg/patterns/patterns.md index 016248f72..d01717963 100644 --- a/ARIA/apg/patterns/patterns.md +++ b/ARIA/apg/patterns/patterns.md @@ -19,6 +19,14 @@ type_of_guidance: APG lang: en --- + + + +Patterns + + + +
                  - {% include read-this-first.html %} + +
                  +
                  + Illustration of a brown-skinned woman with a slight smile gesturing towards the right with her hand +

                  Read This First

                  +

                  + No ARIA is better than Bad ARIA. Before using any ARIA, read this to understand why. +

                  +
                  +
                  + + +
                    - -
                  • - -

                    - - 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.
                    -
                    • - +
                  • + +

                    + + 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. +
                    +
                  +
                  + +
                  - {% include read-this-first.html %} + +
                  +
                  + Illustration of a brown-skinned woman with a slight smile gesturing towards the right with her hand +

                  Read This First

                  +

                  + No ARIA is better than Bad ARIA. Before using any ARIA, read this to understand why. +

                  +
                  +
                  + + +
                    - -
                  • - -

                    - Landmark Regions -

                    -                     -
                    - ARIA landmark roles provide a powerful way to identify the organization and structure of a web page.
                    -
                    • - -
                  • - -

                    - Providing Accessible Names and Descriptions -

                    -                     -
                    - Providing elements with accessible names, and where appropriate, accessible descriptions, is one of the most important responsibilities authors have when developing accessible web experiences.
                    -
                    • - -
                  • - -

                    - Developing a Keyboard Interface -

                    -                     -
                    - Unlike native HTML form elements, browsers do not provide keyboard support for graphical user interface (GUI) components that are made accessible with ARIA; authors have to provide the keyboard support in their code.
                    -
                    • - -
                  • - -

                    - Grid and Table Properties -

                    -                     -
                    - To fully present and describe a grid or table, in addition to parsing the headers, rows, and cells using the roles described in the grid pattern or table pattern, assistive technologies need to be able to determine other structural and presentation characteristics, such as the number and visibility of rows and columns.
                    -
                    • - -
                  • - -

                    - Communicating Value and Limits for Range Widgets -

                    -                     -
                    ARIA defines the following roles as range widgets, which means they communicate a value that is typically numeric and constrained to defined limits.
                    -
                    • - -
                  • - -

                    - Structural Roles -

                    -                     -
                    - ARIA provides a set of roles that convey the accessibility semantics of structures on a page.
                    -
                    • - -
                  • - -

                    - Hiding Semantics with the presentation Role -

                    -                     -
                    - While ARIA is primarily used to express semantics, there are some situations where hiding an element’s semantics from assistive technologies is helpful.
                    -
                    • - +
                  • + +

                    + Landmark Regions +

                    +                     +
                    + ARIA landmark roles provide a powerful way to identify the organization and structure of a web page. +
                    +
                    • + +
                  • + +

                    + Providing Accessible Names and Descriptions +

                    +                     +
                    + Providing elements with accessible names, and where appropriate, accessible descriptions, is one of the most important responsibilities authors have when developing accessible web experiences. +
                    +
                    • + +
                  • + +

                    + Developing a Keyboard Interface +

                    +                     +
                    + Unlike native HTML form elements, browsers do not provide keyboard support for graphical user interface (GUI) components that are made accessible with ARIA; authors have to provide the keyboard support in their code. +
                    +
                    • + +
                  • + +

                    + Grid and Table Properties +

                    +                     +
                    + To fully present and describe a grid or table, in addition to parsing the headers, rows, and cells using the roles described in the grid pattern or table pattern, assistive technologies need to be able to determine other structural and presentation characteristics, such as the number and visibility of rows and columns. +
                    +
                    • + +
                  • + +

                    + Communicating Value and Limits for Range Widgets +

                    +                     +
                    + ARIA defines the following roles as range widgets, which means they communicate a value that is typically numeric and constrained to defined limits. +
                    +
                    • + +
                  • + +

                    + Structural Roles +

                    +                     +
                    + ARIA provides a set of roles that convey the accessibility semantics of structures on a page. +
                    +
                    • + +
                  • + +

                    + Hiding Semantics with the presentation Role +

                    +                     +
                    + While ARIA is primarily used to express semantics, there are some situations where hiding an element’s semantics from assistive technologies is helpful. +
                    +
                  +