From 1912c24feb2855af70f8e0ba9bd63838f3c56ad8 Mon Sep 17 00:00:00 2001 From: Umair Khan Date: Wed, 2 Jul 2025 12:34:24 +0530 Subject: [PATCH 1/3] Rename Javascript to JavaScript --- .../about/change-history/change-history.html | 2 +- .../coverage-and-quality-report.html | 4 +- content/patterns/alert/examples/alert.html | 2 +- .../alertdialog/examples/alertdialog.html | 4 +- content/patterns/button/examples/button.html | 2 +- .../patterns/button/examples/button_idl.html | 2 +- .../examples/carousel-1-prev-next.html | 2 +- .../carousel/examples/carousel-2-tablist.html | 2 +- .../checkbox/examples/checkbox-mixed.html | 2 +- .../patterns/checkbox/examples/checkbox.html | 2 +- .../examples/combobox-autocomplete-both.html | 2 +- .../examples/combobox-autocomplete-list.html | 2 +- .../examples/combobox-autocomplete-none.html | 2 +- .../examples/combobox-datepicker.html | 2 +- .../examples/combobox-select-only.html | 2 +- .../combobox/examples/grid-combo.html | 2 +- .../examples/datepicker-dialog.html | 2 +- .../dialog-modal/examples/dialog.html | 2 +- .../disclosure/examples/disclosure-faq.html | 2 +- .../disclosure-image-description.html | 2 +- .../disclosure-navigation-hybrid.html | 2 +- .../examples/disclosure-navigation.html | 2 +- content/patterns/feed/examples/feed.html | 4 +- .../grid/examples/advanced-data-grid.html | 2 +- content/patterns/link/examples/link.html | 2 +- .../listbox/examples/listbox-collapsible.html | 2 +- .../listbox/examples/listbox-grouped.html | 2 +- .../examples/listbox-rearrangeable.html | 2 +- .../listbox/examples/listbox-scrollable.html | 2 +- ...menu-button-actions-active-descendant.html | 2 +- .../examples/menu-button-actions.html | 2 +- .../examples/menu-button-links.html | 2 +- .../menubar/examples/menubar-editor.html | 4 +- .../menubar/examples/menubar-navigation.html | 2 +- content/patterns/meter/examples/meter.html | 2 +- .../examples/radio-activedescendant.html | 2 +- .../patterns/radio/examples/radio-rating.html | 2 +- content/patterns/radio/examples/radio.html | 2 +- .../examples/slider-multithumb.html | 2 +- .../slider/examples/slider-color-viewer.html | 8 +- .../slider/examples/slider-rating.html | 4 +- .../patterns/slider/examples/slider-seek.html | 4 +- .../slider/examples/slider-temperature.html | 2 +- .../examples/datepicker-spinbuttons.html | 2 +- .../switch/examples/switch-button.html | 2 +- .../switch/examples/switch-checkbox.html | 2 +- content/patterns/switch/examples/switch.html | 2 +- .../table/examples/sortable-table.html | 2 +- content/patterns/table/examples/table.html | 2 +- .../patterns/tabs/examples/tabs-actions.html | 4 +- .../tabs/examples/tabs-automatic.html | 2 +- .../patterns/tabs/examples/tabs-manual.html | 2 +- .../patterns/toolbar/examples/toolbar.html | 12 +- .../treegrid/examples/treegrid-1.html | 2 +- .../treeview/examples/treeview-1a.html | 6 +- .../treeview/examples/treeview-1b.html | 6 +- .../examples/treeview-navigation.html | 2 +- content/shared/js/skipto.js | 1124 ++++++++--------- 58 files changed, 638 insertions(+), 638 deletions(-) diff --git a/content/about/change-history/change-history.html b/content/about/change-history/change-history.html index ede41e2e75..de1e24b836 100644 --- a/content/about/change-history/change-history.html +++ b/content/about/change-history/change-history.html @@ -43,7 +43,7 @@

Change History

  • Improved support for high contrast settings and added detailed documentation of high contrast support in many examples.
  • Improved support for touch-based screen readers in several examples, most notably in sliders.
  • Due to change in ARIA 1.2, removed Math role from list of roles that have presentational children.
    • -
  • Developed a comprehensive set of coding standards for HTML, CSS, and Javascript for the APG and updated a significant portion of content to conform with the standards.
    • +
  • Developed a comprehensive set of coding standards for HTML, CSS, and JavaScript for the APG and updated a significant portion of content to conform with the standards.
  • In response to feedback, fixed many documentation errors and functional bugs in examples.

    • Comprehensive lists of closed issues included in APG 1.2 release 1 are tracked in the following GitHub milestones.

    diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index 95f9be2669..aca3b72519 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -1339,9 +1339,9 @@

    Coding Practices

    Uses event.which High Contrast Documentation Example Code ID - Roles in Javascript and HTML + Roles in JavaScript and HTML Roles in Documentation - aria-* Attributes in Javascript and HTML + aria-* Attributes in JavaScript and HTML aria-* Attributes in Documentation Differences between the documentation and the source code. diff --git a/content/patterns/alert/examples/alert.html b/content/patterns/alert/examples/alert.html index cc7c059d74..07dedadf19 100644 --- a/content/patterns/alert/examples/alert.html +++ b/content/patterns/alert/examples/alert.html @@ -140,7 +140,7 @@

    JavaScript and CSS Source Code

    alert.css
  • - Javascript: + JavaScript: alert.js
    • diff --git a/content/patterns/alertdialog/examples/alertdialog.html b/content/patterns/alertdialog/examples/alertdialog.html index 4474dcf5a9..890df9c4b8 100644 --- a/content/patterns/alertdialog/examples/alertdialog.html +++ b/content/patterns/alertdialog/examples/alertdialog.html @@ -226,10 +226,10 @@

    Notes on aria-modal and aria-hidden

    -

    Javascript and CSS Source Code

    +

    JavaScript and CSS Source Code

    diff --git a/content/patterns/button/examples/button.html b/content/patterns/button/examples/button.html index 9ce12a5039..3f91d738eb 100644 --- a/content/patterns/button/examples/button.html +++ b/content/patterns/button/examples/button.html @@ -202,7 +202,7 @@

    JavaScript and CSS Source Code

    button.css
  • - Javascript: + JavaScript: button.js
    • diff --git a/content/patterns/button/examples/button_idl.html b/content/patterns/button/examples/button_idl.html index 89f1a93a35..8b7ab3047e 100644 --- a/content/patterns/button/examples/button_idl.html +++ b/content/patterns/button/examples/button_idl.html @@ -193,7 +193,7 @@

    JavaScript and CSS Source Code

    button.css
  • - Javascript: + JavaScript: button_idl.js
    • diff --git a/content/patterns/carousel/examples/carousel-1-prev-next.html b/content/patterns/carousel/examples/carousel-1-prev-next.html index fbb9d9653e..43f0fadbdb 100644 --- a/content/patterns/carousel/examples/carousel-1-prev-next.html +++ b/content/patterns/carousel/examples/carousel-1-prev-next.html @@ -520,7 +520,7 @@

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    diff --git a/content/patterns/carousel/examples/carousel-2-tablist.html b/content/patterns/carousel/examples/carousel-2-tablist.html index 117f4c4760..cb460494bb 100644 --- a/content/patterns/carousel/examples/carousel-2-tablist.html +++ b/content/patterns/carousel/examples/carousel-2-tablist.html @@ -706,7 +706,7 @@

    Tabs

    JavaScript and CSS Source Code

    diff --git a/content/patterns/checkbox/examples/checkbox-mixed.html b/content/patterns/checkbox/examples/checkbox-mixed.html index 5741e4f2b2..33483ec32f 100644 --- a/content/patterns/checkbox/examples/checkbox-mixed.html +++ b/content/patterns/checkbox/examples/checkbox-mixed.html @@ -204,7 +204,7 @@

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    diff --git a/content/patterns/checkbox/examples/checkbox.html b/content/patterns/checkbox/examples/checkbox.html index 1564db1908..5b5bb2ce05 100644 --- a/content/patterns/checkbox/examples/checkbox.html +++ b/content/patterns/checkbox/examples/checkbox.html @@ -191,7 +191,7 @@

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    diff --git a/content/patterns/combobox/examples/combobox-autocomplete-both.html b/content/patterns/combobox/examples/combobox-autocomplete-both.html index 96d3bad026..e926a673b6 100644 --- a/content/patterns/combobox/examples/combobox-autocomplete-both.html +++ b/content/patterns/combobox/examples/combobox-autocomplete-both.html @@ -525,7 +525,7 @@

    JavaScript and CSS Source Code

    combobox-autocomplete.css
  • - Javascript: + JavaScript: combobox-autocomplete.js
    • diff --git a/content/patterns/combobox/examples/combobox-autocomplete-list.html b/content/patterns/combobox/examples/combobox-autocomplete-list.html index b6e2130cf3..d7b9619c08 100644 --- a/content/patterns/combobox/examples/combobox-autocomplete-list.html +++ b/content/patterns/combobox/examples/combobox-autocomplete-list.html @@ -519,7 +519,7 @@

    JavaScript and CSS Source Code

    combobox-autocomplete.css
  • - Javascript: + JavaScript: combobox-autocomplete.js
    • diff --git a/content/patterns/combobox/examples/combobox-autocomplete-none.html b/content/patterns/combobox/examples/combobox-autocomplete-none.html index 9907588703..2887be5919 100644 --- a/content/patterns/combobox/examples/combobox-autocomplete-none.html +++ b/content/patterns/combobox/examples/combobox-autocomplete-none.html @@ -461,7 +461,7 @@

    JavaScript and CSS Source Code

    combobox-autocomplete.css
  • - Javascript: + JavaScript: combobox-autocomplete.js
    • diff --git a/content/patterns/combobox/examples/combobox-datepicker.html b/content/patterns/combobox/examples/combobox-datepicker.html index b19eb92ad2..67d59c0826 100644 --- a/content/patterns/combobox/examples/combobox-datepicker.html +++ b/content/patterns/combobox/examples/combobox-datepicker.html @@ -704,7 +704,7 @@

    JavaScript and CSS Source Code

    combobox-datepicker.css
  • - Javascript: + JavaScript: combobox-datepicker.js
    • diff --git a/content/patterns/combobox/examples/combobox-select-only.html b/content/patterns/combobox/examples/combobox-select-only.html index 621977e281..ec324ba5d1 100644 --- a/content/patterns/combobox/examples/combobox-select-only.html +++ b/content/patterns/combobox/examples/combobox-select-only.html @@ -401,7 +401,7 @@

    JavaScript and CSS Source Code

    select-only.css
  • - Javascript: + JavaScript: select-only.js
    • diff --git a/content/patterns/combobox/examples/grid-combo.html b/content/patterns/combobox/examples/grid-combo.html index 03ceb7ec2a..7e41c7d3a8 100644 --- a/content/patterns/combobox/examples/grid-combo.html +++ b/content/patterns/combobox/examples/grid-combo.html @@ -382,7 +382,7 @@

    Grid Popup

    JavaScript and CSS Source Code

    diff --git a/content/patterns/dialog-modal/examples/datepicker-dialog.html b/content/patterns/dialog-modal/examples/datepicker-dialog.html index c57361d29c..f0d3f3b8a9 100644 --- a/content/patterns/dialog-modal/examples/datepicker-dialog.html +++ b/content/patterns/dialog-modal/examples/datepicker-dialog.html @@ -638,7 +638,7 @@

    JavaScript and CSS Source Code

    datepicker-dialog.css
  • - Javascript: + JavaScript: datepicker-dialog.js
    • diff --git a/content/patterns/dialog-modal/examples/dialog.html b/content/patterns/dialog-modal/examples/dialog.html index 8d2327f88d..2aed30ca17 100644 --- a/content/patterns/dialog-modal/examples/dialog.html +++ b/content/patterns/dialog-modal/examples/dialog.html @@ -349,7 +349,7 @@

    JavaScript and CSS Source Code

    dialog.css
  • - Javascript: + JavaScript: dialog.js, utils.js
    • diff --git a/content/patterns/disclosure/examples/disclosure-faq.html b/content/patterns/disclosure/examples/disclosure-faq.html index 6f482efd12..63a2f89275 100644 --- a/content/patterns/disclosure/examples/disclosure-faq.html +++ b/content/patterns/disclosure/examples/disclosure-faq.html @@ -208,7 +208,7 @@

    JavaScript and CSS Source Code

    disclosure-faq.css
  • - Javascript: + JavaScript: disclosureButton.js
    • diff --git a/content/patterns/disclosure/examples/disclosure-image-description.html b/content/patterns/disclosure/examples/disclosure-image-description.html index 05403b9fb1..ca50832c67 100644 --- a/content/patterns/disclosure/examples/disclosure-image-description.html +++ b/content/patterns/disclosure/examples/disclosure-image-description.html @@ -360,7 +360,7 @@

    JavaScript and CSS Source Code

    disclosure-img-long-description.css
  • - Javascript: + JavaScript: disclosureButton.js
    • diff --git a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html index c81306ac3b..2079593210 100644 --- a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html +++ b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html @@ -360,7 +360,7 @@

    JavaScript and CSS Source Code

    disclosure-navigation.css
  • - Javascript: + JavaScript: disclosureMenu.js
    • diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html index ba579db817..e85f3fb964 100644 --- a/content/patterns/disclosure/examples/disclosure-navigation.html +++ b/content/patterns/disclosure/examples/disclosure-navigation.html @@ -355,7 +355,7 @@

    JavaScript and CSS Source Code

    disclosure-navigation.css
  • - Javascript: + JavaScript: disclosureMenu.js
    • diff --git a/content/patterns/feed/examples/feed.html b/content/patterns/feed/examples/feed.html index 8a1c4f813c..e22f0b1cba 100644 --- a/content/patterns/feed/examples/feed.html +++ b/content/patterns/feed/examples/feed.html @@ -204,10 +204,10 @@

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    -

    The following Javascript and CSS is used by the feed-display.html page:

    +

    The following JavaScript and CSS is used by the feed-display.html page:

    diff --git a/content/patterns/grid/examples/advanced-data-grid.html b/content/patterns/grid/examples/advanced-data-grid.html index 4e318b7dd1..dc2d45b742 100644 --- a/content/patterns/grid/examples/advanced-data-grid.html +++ b/content/patterns/grid/examples/advanced-data-grid.html @@ -135,7 +135,7 @@

    JavaScript and CSS Source Code

  • - Javascript: + JavaScript:
    • diff --git a/content/patterns/link/examples/link.html b/content/patterns/link/examples/link.html index df5e387314..3f4e40bc91 100644 --- a/content/patterns/link/examples/link.html +++ b/content/patterns/link/examples/link.html @@ -167,7 +167,7 @@

    JavaScript and CSS Source Code

    link.css
  • - Javascript: + JavaScript: link.js
    • diff --git a/content/patterns/listbox/examples/listbox-collapsible.html b/content/patterns/listbox/examples/listbox-collapsible.html index e7015ff1cf..8a611e99b2 100644 --- a/content/patterns/listbox/examples/listbox-collapsible.html +++ b/content/patterns/listbox/examples/listbox-collapsible.html @@ -313,7 +313,7 @@

    JavaScript and CSS Source Code

    listbox.css
  • - Javascript: + JavaScript: listbox.js, listbox-collapsible.js
    • diff --git a/content/patterns/listbox/examples/listbox-grouped.html b/content/patterns/listbox/examples/listbox-grouped.html index d2f4b759c8..0fb040b0c2 100644 --- a/content/patterns/listbox/examples/listbox-grouped.html +++ b/content/patterns/listbox/examples/listbox-grouped.html @@ -286,7 +286,7 @@

    JavaScript and CSS Source Code

    listbox.css
  • - Javascript: + JavaScript: listbox.js, listbox-scrollable.js
    • diff --git a/content/patterns/listbox/examples/listbox-rearrangeable.html b/content/patterns/listbox/examples/listbox-rearrangeable.html index 792e3873a4..f138b61e59 100644 --- a/content/patterns/listbox/examples/listbox-rearrangeable.html +++ b/content/patterns/listbox/examples/listbox-rearrangeable.html @@ -519,7 +519,7 @@

    JavaScript and CSS Source Code

    listbox.css
  • - Javascript: + JavaScript: listbox.js, toolbar.js, listbox-rearrangeable.js
    • diff --git a/content/patterns/listbox/examples/listbox-scrollable.html b/content/patterns/listbox/examples/listbox-scrollable.html index 2e689c4af4..fa0edd2747 100644 --- a/content/patterns/listbox/examples/listbox-scrollable.html +++ b/content/patterns/listbox/examples/listbox-scrollable.html @@ -326,7 +326,7 @@

    JavaScript and CSS Source Code

    listbox.css
  • - Javascript: + JavaScript: listbox.js, listbox-scrollable.js
    • diff --git a/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html b/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html index 5d7fa3113a..d2f15b1c88 100644 --- a/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html +++ b/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html @@ -334,7 +334,7 @@

    JavaScript and CSS Source Code

    diff --git a/content/patterns/menu-button/examples/menu-button-actions.html b/content/patterns/menu-button/examples/menu-button-actions.html index 1d3dab983d..373607c225 100644 --- a/content/patterns/menu-button/examples/menu-button-actions.html +++ b/content/patterns/menu-button/examples/menu-button-actions.html @@ -313,7 +313,7 @@

    JavaScript and CSS Source Code

    diff --git a/content/patterns/menu-button/examples/menu-button-links.html b/content/patterns/menu-button/examples/menu-button-links.html index 4794318df0..0d905e3a4f 100644 --- a/content/patterns/menu-button/examples/menu-button-links.html +++ b/content/patterns/menu-button/examples/menu-button-links.html @@ -349,7 +349,7 @@

    JavaScript and CSS Source Code

    diff --git a/content/patterns/menubar/examples/menubar-editor.html b/content/patterns/menubar/examples/menubar-editor.html index c26ca7b8fa..7bd2869abc 100644 --- a/content/patterns/menubar/examples/menubar-editor.html +++ b/content/patterns/menubar/examples/menubar-editor.html @@ -775,8 +775,8 @@

    JavaScript and CSS Source Code

    CSS: menubar-editor.css -
  • Javascript: menubar-editor.js
    • -
  • Javascript: style-manager.js
    • +
  • JavaScript: menubar-editor.js
    • +
  • JavaScript: style-manager.js
    • diff --git a/content/patterns/menubar/examples/menubar-navigation.html b/content/patterns/menubar/examples/menubar-navigation.html index b71442d8ab..a55d44b743 100644 --- a/content/patterns/menubar/examples/menubar-navigation.html +++ b/content/patterns/menubar/examples/menubar-navigation.html @@ -810,7 +810,7 @@

    Submenu

    JavaScript and CSS Source Code

    diff --git a/content/patterns/meter/examples/meter.html b/content/patterns/meter/examples/meter.html index f63d4b1b2a..bbda4aaec7 100644 --- a/content/patterns/meter/examples/meter.html +++ b/content/patterns/meter/examples/meter.html @@ -124,7 +124,7 @@

    JavaScript and CSS Source Code

    meter.css
  • - Javascript: + JavaScript: meter.js
    • diff --git a/content/patterns/radio/examples/radio-activedescendant.html b/content/patterns/radio/examples/radio-activedescendant.html index e8d6e984d3..056dd94507 100644 --- a/content/patterns/radio/examples/radio-activedescendant.html +++ b/content/patterns/radio/examples/radio-activedescendant.html @@ -261,7 +261,7 @@

    Assistive Technology Support

    JavaScript and CSS Source Code

    diff --git a/content/patterns/radio/examples/radio-rating.html b/content/patterns/radio/examples/radio-rating.html index 562594757e..97f559e1b8 100644 --- a/content/patterns/radio/examples/radio-rating.html +++ b/content/patterns/radio/examples/radio-rating.html @@ -279,7 +279,7 @@

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    diff --git a/content/patterns/radio/examples/radio.html b/content/patterns/radio/examples/radio.html index 342c37f131..773e1e843d 100644 --- a/content/patterns/radio/examples/radio.html +++ b/content/patterns/radio/examples/radio.html @@ -250,7 +250,7 @@

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    diff --git a/content/patterns/slider-multithumb/examples/slider-multithumb.html b/content/patterns/slider-multithumb/examples/slider-multithumb.html index 42c4d42c8a..cfac17e5f0 100644 --- a/content/patterns/slider-multithumb/examples/slider-multithumb.html +++ b/content/patterns/slider-multithumb/examples/slider-multithumb.html @@ -256,7 +256,7 @@

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    diff --git a/content/patterns/slider/examples/slider-color-viewer.html b/content/patterns/slider/examples/slider-color-viewer.html index 89e4fc72fe..a01ebb2dff 100644 --- a/content/patterns/slider/examples/slider-color-viewer.html +++ b/content/patterns/slider/examples/slider-color-viewer.html @@ -64,7 +64,7 @@

    Color Viewer

    Red
    - +

    Color Viewer

    Green
    - +

    Color Viewer

    Blue
    - +

    Assistive Technology Support

    JavaScript and CSS Source Code

    diff --git a/content/patterns/slider/examples/slider-rating.html b/content/patterns/slider/examples/slider-rating.html index 727b338cba..e55ce55a65 100644 --- a/content/patterns/slider/examples/slider-rating.html +++ b/content/patterns/slider/examples/slider-rating.html @@ -78,7 +78,7 @@

    Example

    aria-valuemax="10" aria-valuetext="Choose a rating from 1 to 10 where 10 is extremely satisfied" aria-labelledby="id-rating-label"> - +

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    diff --git a/content/patterns/slider/examples/slider-seek.html b/content/patterns/slider/examples/slider-seek.html index fce9fa6d42..79d6c563f2 100644 --- a/content/patterns/slider/examples/slider-seek.html +++ b/content/patterns/slider/examples/slider-seek.html @@ -71,7 +71,7 @@

    Example

    - + 0:00 @@ -302,7 +302,7 @@

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    diff --git a/content/patterns/slider/examples/slider-temperature.html b/content/patterns/slider/examples/slider-temperature.html index 3b6a6175e7..533c32f5ce 100644 --- a/content/patterns/slider/examples/slider-temperature.html +++ b/content/patterns/slider/examples/slider-temperature.html @@ -283,7 +283,7 @@

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    diff --git a/content/patterns/spinbutton/examples/datepicker-spinbuttons.html b/content/patterns/spinbutton/examples/datepicker-spinbuttons.html index 906b15aed4..f8609d3e89 100644 --- a/content/patterns/spinbutton/examples/datepicker-spinbuttons.html +++ b/content/patterns/spinbutton/examples/datepicker-spinbuttons.html @@ -314,7 +314,7 @@

    JavaScript and CSS Source Code

    datepicker-spinbuttons.css
  • - Javascript: + JavaScript:
    • datepicker-spinbuttons.js
    • spinbutton-date.js
      • diff --git a/content/patterns/switch/examples/switch-button.html b/content/patterns/switch/examples/switch-button.html index 98f1125b60..cad50a2866 100644 --- a/content/patterns/switch/examples/switch-button.html +++ b/content/patterns/switch/examples/switch-button.html @@ -220,7 +220,7 @@

      JavaScript and CSS Source Code

      switch-button.css
    • - Javascript: + JavaScript: switch-button.js
    diff --git a/content/patterns/switch/examples/switch-checkbox.html b/content/patterns/switch/examples/switch-checkbox.html index cf14bfa3a9..3aeb8f317c 100644 --- a/content/patterns/switch/examples/switch-checkbox.html +++ b/content/patterns/switch/examples/switch-checkbox.html @@ -178,7 +178,7 @@

    JavaScript and CSS Source Code

    switch-checkbox.css
  • - Javascript: + JavaScript: switch-checkbox.js
    • diff --git a/content/patterns/switch/examples/switch.html b/content/patterns/switch/examples/switch.html index 14a4b5df52..7960f7320e 100644 --- a/content/patterns/switch/examples/switch.html +++ b/content/patterns/switch/examples/switch.html @@ -186,7 +186,7 @@

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    diff --git a/content/patterns/table/examples/sortable-table.html b/content/patterns/table/examples/sortable-table.html index 462244fe31..7693433ea2 100644 --- a/content/patterns/table/examples/sortable-table.html +++ b/content/patterns/table/examples/sortable-table.html @@ -201,7 +201,7 @@

    JavaScript and CSS Source Code

    sortable-table.css
  • - Javascript: + JavaScript: sortable-table.js
    • diff --git a/content/patterns/table/examples/table.html b/content/patterns/table/examples/table.html index ddbb43a566..365e660abd 100644 --- a/content/patterns/table/examples/table.html +++ b/content/patterns/table/examples/table.html @@ -167,7 +167,7 @@

    JavaScript and CSS Source Code

    CSS: table.css -
  • Javascript: Not applicable.
    • +
  • JavaScript: Not applicable.
    • diff --git a/content/patterns/tabs/examples/tabs-actions.html b/content/patterns/tabs/examples/tabs-actions.html index 9a0982bc23..3a3780efbd 100644 --- a/content/patterns/tabs/examples/tabs-actions.html +++ b/content/patterns/tabs/examples/tabs-actions.html @@ -491,8 +491,8 @@

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    diff --git a/content/patterns/tabs/examples/tabs-automatic.html b/content/patterns/tabs/examples/tabs-automatic.html index 68df84cb20..21afc1aa62 100644 --- a/content/patterns/tabs/examples/tabs-automatic.html +++ b/content/patterns/tabs/examples/tabs-automatic.html @@ -343,7 +343,7 @@

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    diff --git a/content/patterns/tabs/examples/tabs-manual.html b/content/patterns/tabs/examples/tabs-manual.html index 9a4db8600f..57e69a95db 100644 --- a/content/patterns/tabs/examples/tabs-manual.html +++ b/content/patterns/tabs/examples/tabs-manual.html @@ -337,7 +337,7 @@

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    diff --git a/content/patterns/toolbar/examples/toolbar.html b/content/patterns/toolbar/examples/toolbar.html index 25d176d71c..a076530beb 100644 --- a/content/patterns/toolbar/examples/toolbar.html +++ b/content/patterns/toolbar/examples/toolbar.html @@ -942,12 +942,12 @@

    JavaScript and CSS Source Code

    diff --git a/content/patterns/treegrid/examples/treegrid-1.html b/content/patterns/treegrid/examples/treegrid-1.html index 0732a94b6d..aeb5a9cef6 100644 --- a/content/patterns/treegrid/examples/treegrid-1.html +++ b/content/patterns/treegrid/examples/treegrid-1.html @@ -449,7 +449,7 @@

    JavaScript and CSS Source Code

    treegrid-1.css
  • - Javascript: + JavaScript: treegrid-1.js
    • diff --git a/content/patterns/treeview/examples/treeview-1a.html b/content/patterns/treeview/examples/treeview-1a.html index 4d49615cf2..3daeb653c4 100644 --- a/content/patterns/treeview/examples/treeview-1a.html +++ b/content/patterns/treeview/examples/treeview-1a.html @@ -403,15 +403,15 @@

    JavaScript and CSS Source Code

    tree.css
  • - Javascript: + JavaScript: tree.js
  • - Javascript: + JavaScript: treeitem.js
  • - Javascript: + JavaScript: treeitemClick.js
    • diff --git a/content/patterns/treeview/examples/treeview-1b.html b/content/patterns/treeview/examples/treeview-1b.html index e64a8e974b..860422c129 100644 --- a/content/patterns/treeview/examples/treeview-1b.html +++ b/content/patterns/treeview/examples/treeview-1b.html @@ -429,15 +429,15 @@

    JavaScript and CSS Source Code

    tree.css
  • - Javascript: + JavaScript: tree.js
  • - Javascript: + JavaScript: treeitem.js
  • - Javascript: + JavaScript: treeitemClick.js
    • diff --git a/content/patterns/treeview/examples/treeview-navigation.html b/content/patterns/treeview/examples/treeview-navigation.html index 3f6c8539c9..d35ca9a332 100644 --- a/content/patterns/treeview/examples/treeview-navigation.html +++ b/content/patterns/treeview/examples/treeview-navigation.html @@ -682,7 +682,7 @@

    JavaScript and CSS Source Code

    treeview-navigation.css
  • - Javascript: + JavaScript: treeview-navigation.js
    • diff --git a/content/shared/js/skipto.js b/content/shared/js/skipto.js index d65ab3c766..bb54dd02e5 100644 --- a/content/shared/js/skipto.js +++ b/content/shared/js/skipto.js @@ -1,113 +1,113 @@ -/* ======================================================================== - * Version: 5.3.2 - * Copyright (c) 2022, 2023, 2024 Jon Gunderson; Licensed BSD - * Copyright (c) 2021 PayPal Accessibility Team and University of Illinois; Licensed BSD - * All rights reserved. - * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: - * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. - * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. - * Neither the name of PayPal or any of its subsidiaries or affiliates, nor the name of the University of Illinois, nor the names of any other contributors contributors may be used to endorse or promote products derived from this software without specific prior written permission. - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * CDN: https://skipto-landmarks-headings.github.io/page-script-5/dist/skipto.min.js - * Documentation: https://skipto-landmarks-headings.github.io/page-script-5 - * Code: https://github.com/skipto-landmarks-headings/page-script-5 - * Report Issues: https://github.com/skipto-landmarks-headings/page-script-5/issues - * ======================================================================== */ - -(function () { - 'use strict'; - - /* - * debug.js - * - * Usage - * import DebugLogging from './debug.js'; - * const debug = new DebugLogging('myLabel', true); // e.g. 'myModule' - * ... - * if (debug.flag) debug.log('myMessage'); - * - * Notes - * new DebugLogging() - calling the constructor with no arguments results - * in debug.flag set to false and debug.label set to 'debug'; - * constructor accepts 0, 1 or 2 arguments in any order - * @param flag [optional] {boolean} - sets debug.flag - * @param label [optional] {string} - sets debug.label - * Properties - * debug.flag {boolean} allows you to switch debug logging on or off; - * default value is false - * debug.label {string} rendered as a prefix to each log message; - * default value is 'debug' - * Methods - * debug.log calls console.log with label prefix and message - * @param message {object} - console.log calls toString() - * @param spaceAbove [optional] {boolean} - * - * debug.tag outputs tagName and textContent of DOM element - * @param node {DOM node reference} - usually an HTMLElement - * @param spaceAbove [optional] {boolean} - * - * debug.separator outputs only debug.label and a series of hyphens - * @param spaceAbove [optional] {boolean} - */ - - class DebugLogging { - constructor (...args) { - // Default values for cases where fewer than two arguments are provided - this._flag = false; - this._label = 'debug'; - - // The constructor may be called with zero, one or two arguments. If two - // arguments, they can be in any order: one is assumed to be the boolean - // value for '_flag' and the other one the string value for '_label'. - for (const [index, arg] of args.entries()) { - if (index < 2) { - switch (typeof arg) { - case 'boolean': - this._flag = arg; - break; - case 'string': - this._label = arg; - break; - } - } - } - } - - get flag () { return this._flag; } - - set flag (value) { - if (typeof value === 'boolean') { - this._flag = value; - } - } - - get label () { return this._label; } - - set label (value) { - if (typeof value === 'string') { - this._label = value; - } - } - - log (message, spaceAbove) { - const newline = spaceAbove ? '\n' : ''; - console.log(`${newline}[${this._label}] ${message}`); - } - - tag (node, spaceAbove) { - if (node && node.tagName) { - const text = node.textContent.trim().replace(/\s+/g, ' '); - this.log(`[${node.tagName}]: ${text.substring(0, 40)}`, spaceAbove); - } - } - - separator (spaceAbove) { - this.log('-----------------------------', spaceAbove); - } - - } - +/* ======================================================================== + * Version: 5.3.2 + * Copyright (c) 2022, 2023, 2024 Jon Gunderson; Licensed BSD + * Copyright (c) 2021 PayPal Accessibility Team and University of Illinois; Licensed BSD + * All rights reserved. + * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: + * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. + * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. + * Neither the name of PayPal or any of its subsidiaries or affiliates, nor the name of the University of Illinois, nor the names of any other contributors contributors may be used to endorse or promote products derived from this software without specific prior written permission. + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + * + * CDN: https://skipto-landmarks-headings.github.io/page-script-5/dist/skipto.min.js + * Documentation: https://skipto-landmarks-headings.github.io/page-script-5 + * Code: https://github.com/skipto-landmarks-headings/page-script-5 + * Report Issues: https://github.com/skipto-landmarks-headings/page-script-5/issues + * ======================================================================== */ + +(function () { + 'use strict'; + + /* + * debug.js + * + * Usage + * import DebugLogging from './debug.js'; + * const debug = new DebugLogging('myLabel', true); // e.g. 'myModule' + * ... + * if (debug.flag) debug.log('myMessage'); + * + * Notes + * new DebugLogging() - calling the constructor with no arguments results + * in debug.flag set to false and debug.label set to 'debug'; + * constructor accepts 0, 1 or 2 arguments in any order + * @param flag [optional] {boolean} - sets debug.flag + * @param label [optional] {string} - sets debug.label + * Properties + * debug.flag {boolean} allows you to switch debug logging on or off; + * default value is false + * debug.label {string} rendered as a prefix to each log message; + * default value is 'debug' + * Methods + * debug.log calls console.log with label prefix and message + * @param message {object} - console.log calls toString() + * @param spaceAbove [optional] {boolean} + * + * debug.tag outputs tagName and textContent of DOM element + * @param node {DOM node reference} - usually an HTMLElement + * @param spaceAbove [optional] {boolean} + * + * debug.separator outputs only debug.label and a series of hyphens + * @param spaceAbove [optional] {boolean} + */ + + class DebugLogging { + constructor (...args) { + // Default values for cases where fewer than two arguments are provided + this._flag = false; + this._label = 'debug'; + + // The constructor may be called with zero, one or two arguments. If two + // arguments, they can be in any order: one is assumed to be the boolean + // value for '_flag' and the other one the string value for '_label'. + for (const [index, arg] of args.entries()) { + if (index < 2) { + switch (typeof arg) { + case 'boolean': + this._flag = arg; + break; + case 'string': + this._label = arg; + break; + } + } + } + } + + get flag () { return this._flag; } + + set flag (value) { + if (typeof value === 'boolean') { + this._flag = value; + } + } + + get label () { return this._label; } + + set label (value) { + if (typeof value === 'string') { + this._label = value; + } + } + + log (message, spaceAbove) { + const newline = spaceAbove ? '\n' : ''; + console.log(`${newline}[${this._label}] ${message}`); + } + + tag (node, spaceAbove) { + if (node && node.tagName) { + const text = node.textContent.trim().replace(/\s+/g, ' '); + this.log(`[${node.tagName}]: ${text.substring(0, 40)}`, spaceAbove); + } + } + + separator (spaceAbove) { + this.log('-----------------------------', spaceAbove); + } + + } + /* style.js */ /* Constants */ @@ -405,7 +405,7 @@ $skipToId [role="menuitem"].hover .label { * * @desc Returns * - * @param {Object} colorThemes - Javascript object with keyed color themes + * @param {Object} colorThemes - JavaScript object with keyed color themes * @param {String} colorTheme - A string identifying a color theme * * @returns {Object} see @desc @@ -567,447 +567,447 @@ $skipToId [role="menuitem"].hover .label { styleNode.id = `${skipToId}-style`; const headNode = document.getElementsByTagName('head')[0]; headNode.appendChild(styleNode); - } - - /* utils.js */ - - /* Constants */ - const debug$5 = new DebugLogging('Utils', false); - debug$5.flag = false; - - - /* - * @function getAttributeValue - * - * @desc Return attribute value if present on element, - * otherwise return empty string. - * - * @returns {String} see @desc - */ - function getAttributeValue (element, attribute) { - let value = element.getAttribute(attribute); - return (value === null) ? '' : normalize(value); - } - - /* - * @function normalize - * - * @desc Trim leading and trailing whitespace and condense all - * internal sequences of whitespace to a single space. Adapted from - * Mozilla documentation on String.prototype.trim polyfill. Handles - * BOM and NBSP characters. - * - * @return {String} see @desc - */ - function normalize (s) { - let rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g; - return s.replace(rtrim, '').replace(/\s+/g, ' '); - } - - /** - * @fuction isNotEmptyString - * - * @desc Returns true if the string has content, otherwise false - * - * @param {Boolean} see @desc - */ - function isNotEmptyString (str) { - return (typeof str === 'string') && str.length && str.trim() && str !== " "; - } - - /** - * @fuction isVisible - * - * @desc Returns true if the element is visible in the graphical rendering - * - * @param {node} elem - DOM element node of a labelable element - */ - function isVisible (element) { - - function isDisplayNone(el) { - if (!el || (el.nodeType !== Node.ELEMENT_NODE)) { - return false; - } - - if (el.hasAttribute('hidden')) { - return true; - } - - const style = window.getComputedStyle(el, null); - const display = style.getPropertyValue("display"); - if (display === 'none') { - return true; - } - - // check ancestors for display none - if (el.parentNode) { - return isDisplayNone(el.parentNode); - } - - return false; - } - - const computedStyle = window.getComputedStyle(element); - let visibility = computedStyle.getPropertyValue('visibility'); - if ((visibility === 'hidden') || (visibility === 'collapse')) { - return false; - } - - return !isDisplayNone(element); - } - - /* - * namefrom.js - */ - - /* constants */ - - const debug$4 = new DebugLogging('nameFrom', false); - debug$4.flag = false; - - // - // LOW-LEVEL HELPER FUNCTIONS (NOT EXPORTED) - - /* - * @function isDisplayNone - * - * @desc Returns true if the element or parent element has set the CSS - * display property to none or has the hidden attribute, - * otherwise false - * - * @param {Object} node - a DOM node - * - * @returns {Boolean} see @desc - */ - - function isDisplayNone (node) { - - if (!node) { - return false; - } - - if (node.nodeType === Node.TEXT_NODE) { - node = node.parentNode; - } - - if (node.nodeType === Node.ELEMENT_NODE) { - - if (node.hasAttribute('hidden')) { - return true; - } - - // aria-hidden attribute with the value "true" is an same as - // setting the hidden attribute for name calcuation - if (node.hasAttribute('aria-hidden')) { - if (node.getAttribute('aria-hidden').toLowerCase() === 'true') { - return true; - } - } - - const style = window.getComputedStyle(node, null); - - const display = style.getPropertyValue("display"); - - if (display) { - return display === 'none'; - } - } - return false; - } - - /* - * @function isVisibilityHidden - * - * @desc Returns true if the node (or it's parrent) has the CSS visibility - * property set to "hidden" or "collapse", otherwise false - * - * @param {Object} node - DOM node - * - * @return see @desc - */ - - function isVisibilityHidden(node) { - - if (!node) { - return false; - } - - if (node.nodeType === Node.TEXT_NODE) { - node = node.parentNode; - } - - if (node.nodeType === Node.ELEMENT_NODE) { - const style = window.getComputedStyle(node, null); - - const visibility = style.getPropertyValue("visibility"); - if (visibility) { - return (visibility === 'hidden') || (visibility === 'collapse'); - } - } - return false; - } - - /* - * @function isAriaHiddenFalse - * - * @desc Returns true if the node has the aria-hidden property set to - * "false", otherwise false. - * NOTE: This function is important in the accessible namce - * calculation, since content hidden with a CSS technique - * can be included in the accessible name calculation when - * aria-hidden is set to false - * - * @param {Object} node - DOM node - * - * @return see @desc - */ - - function isAriaHIddenFalse(node) { - - if (!node) { - return false; - } - - if (node.nodeType === Node.TEXT_NODE) { - node = node.parentNode; - } - - if (node.nodeType === Node.ELEMENT_NODE) { - return (node.hasAttribute('aria-hidden') && - (node.getAttribute('aria-hidden').toLowerCase() === 'false')); - } - - return false; - } - - /* - * @function includeContentInName - * - * @desc Checks the CSS display and hidden properties, and - * the aria-hidden property to see if the content - * should be included in the accessible name - * calculation. Returns true if it should be - * included, otherwise false - * - * @param {Object} node - DOM node - * - * @return see @desc - */ - - function includeContentInName(node) { - const flag = isAriaHIddenFalse(node) || - (!isVisibilityHidden(node) && - !isDisplayNone(node)); - return flag; - } - - /* - * @function getNodeContents - * - * @desc Recursively process element and text nodes by aggregating - * their text values for an ARIA accessible name or description - * calculation. - * - * NOTE: This includes special handling of elements with 'alt' - * text and embedded controls. - * - * @param {Object} node - A DOM node - * - * @return {String} The text content for an accessible name or description - */ - function getNodeContents (node) { - let contents = ''; - let nc; - let arr = []; - - switch (node.nodeType) { - case Node.ELEMENT_NODE: - // If aria-label is present, node recursion stops and - // aria-label value is returned - if (node.hasAttribute('aria-label')) { - if (includeContentInName(node)) { - contents = node.getAttribute('aria-label'); - } - } - else { - if (node instanceof HTMLSlotElement) { - // if no slotted elements, check for default slotted content - const assignedNodes = node.assignedNodes().length ? node.assignedNodes() : node.assignedNodes({ flatten: true }); - assignedNodes.forEach( assignedNode => { - nc = getNodeContents(assignedNode); - if (nc.length) arr.push(nc); - }); - contents = (arr.length) ? arr.join(' ') : ''; - } else { - if (couldHaveAltText(node) && includeContentInName(node)) { - contents = getAttributeValue(node, 'alt'); - } - else { - if (node.hasChildNodes()) { - let children = Array.from(node.childNodes); - children.forEach( child => { - nc = getNodeContents(child); - if (nc.length) arr.push(nc); - }); - contents = (arr.length) ? arr.join(' ') : ''; - } - } - // For all branches of the ELEMENT_NODE case... - } - } - contents = addCssGeneratedContent(node, contents); - break; - - case Node.TEXT_NODE: - if (includeContentInName(node)) { - contents = normalize(node.textContent); - } - break; - } - - return contents; - } - - /* - * @function couldHaveAltText - * - * @desc Based on HTML5 specification, returns true if - * the element could have an 'alt' attribute, - * otherwise false. - * - * @param {Object} element - DOM eleemnt node - * - * @return {Boolean} see @desc - */ - function couldHaveAltText (element) { - let tagName = element.tagName.toLowerCase(); - - switch (tagName) { - case 'img': - case 'area': - return true; - case 'input': - return (element.type && element.type === 'image'); - } - - return false; - } - - /* - * @function addCssGeneratedContent - * - * @desc Adds CSS-generated content for pseudo-elements - * :before and :after. According to the CSS spec, test that content - * value is other than the default computed value of 'none'. - * - * Note: Even if an author specifies content: 'none', because browsers - * add the double-quote character to the beginning and end of - * computed string values, the result cannot and will not be - * equal to 'none'. - * - * - * @param {Object} element - DOM node element - * @param {String} contents - Text content for DOM node - * - * @returns {String} see @desc - * - */ - function addCssGeneratedContent (element, contents) { - - let result = contents, - prefix = getComputedStyle(element, ':before').content, - suffix = getComputedStyle(element, ':after').content; - - if ((prefix[0] === '"') && !prefix.toLowerCase().includes('moz-')) { - result = prefix.substring(1, (prefix.length-1)) + result; - } - - if ((suffix[0] === '"') && !suffix.toLowerCase().includes('moz-')) { - result = result + suffix.substring(1, (suffix.length-1)) ; - } - - return result; - } - - /* accName.js */ - - /* Constants */ - const debug$3 = new DebugLogging('accName', false); - debug$3.flag = false; - - /** - * @fuction getAccessibleName - * - * @desc Returns the accessible name for an heading or landamrk - * - * @paramn {Object} dom - Document of the current element - * @param {node} element - DOM element node for either a heading or - * landmark - * @param {Boolean} fromContent - if true will compute name from content - * - * @return {String} The accessible name for the landmark or heading element - */ - - function getAccessibleName (doc, element, fromContent=false) { - let accName = ''; - - accName = nameFromAttributeIdRefs(doc, element, 'aria-labelledby'); - - if (accName === '' && element.hasAttribute('aria-label')) { - accName = element.getAttribute('aria-label').trim(); - } - - if (accName === '' && fromContent) { - accName = getNodeContents(element); - } - - if (accName === '' && element.title.trim() !== '') { - accName = element.title.trim(); - } - - return accName; - } - - /* - * @function nameFromAttributeIdRefs - * - * @desc Get the value of attrName on element (a space- - * separated list of IDREFs), visit each referenced element in the order it - * appears in the list and obtain its accessible name (skipping recursive - * aria-labelledby or aria-describedby calculations), and return an object - * with name property set to a string that is a space-separated concatena- - * tion of those results if any, otherwise return empty string. - * - * @param {Object} doc - Browser document object - * @param {Object} element - DOM element node - * @param {String} attribute - Attribute name (e.g. "aria-labelledby", "aria-describedby", - * or "aria-errormessage") - * - * @returns {String} see @desc - */ - function nameFromAttributeIdRefs (doc, element, attribute) { - const value = getAttributeValue(element, attribute); - const arr = []; - - if (value.length) { - const idRefs = value.split(' '); - - for (let i = 0; i < idRefs.length; i++) { - const refElement = doc.getElementById(idRefs[i]); - if (refElement) { - const accName = getNodeContents(refElement); - if (accName && accName.length) arr.push(accName); - } - } - } - - if (arr.length) { - return arr.join(' '); - } - - return ''; - } - + } + + /* utils.js */ + + /* Constants */ + const debug$5 = new DebugLogging('Utils', false); + debug$5.flag = false; + + + /* + * @function getAttributeValue + * + * @desc Return attribute value if present on element, + * otherwise return empty string. + * + * @returns {String} see @desc + */ + function getAttributeValue (element, attribute) { + let value = element.getAttribute(attribute); + return (value === null) ? '' : normalize(value); + } + + /* + * @function normalize + * + * @desc Trim leading and trailing whitespace and condense all + * internal sequences of whitespace to a single space. Adapted from + * Mozilla documentation on String.prototype.trim polyfill. Handles + * BOM and NBSP characters. + * + * @return {String} see @desc + */ + function normalize (s) { + let rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g; + return s.replace(rtrim, '').replace(/\s+/g, ' '); + } + + /** + * @fuction isNotEmptyString + * + * @desc Returns true if the string has content, otherwise false + * + * @param {Boolean} see @desc + */ + function isNotEmptyString (str) { + return (typeof str === 'string') && str.length && str.trim() && str !== " "; + } + + /** + * @fuction isVisible + * + * @desc Returns true if the element is visible in the graphical rendering + * + * @param {node} elem - DOM element node of a labelable element + */ + function isVisible (element) { + + function isDisplayNone(el) { + if (!el || (el.nodeType !== Node.ELEMENT_NODE)) { + return false; + } + + if (el.hasAttribute('hidden')) { + return true; + } + + const style = window.getComputedStyle(el, null); + const display = style.getPropertyValue("display"); + if (display === 'none') { + return true; + } + + // check ancestors for display none + if (el.parentNode) { + return isDisplayNone(el.parentNode); + } + + return false; + } + + const computedStyle = window.getComputedStyle(element); + let visibility = computedStyle.getPropertyValue('visibility'); + if ((visibility === 'hidden') || (visibility === 'collapse')) { + return false; + } + + return !isDisplayNone(element); + } + + /* + * namefrom.js + */ + + /* constants */ + + const debug$4 = new DebugLogging('nameFrom', false); + debug$4.flag = false; + + // + // LOW-LEVEL HELPER FUNCTIONS (NOT EXPORTED) + + /* + * @function isDisplayNone + * + * @desc Returns true if the element or parent element has set the CSS + * display property to none or has the hidden attribute, + * otherwise false + * + * @param {Object} node - a DOM node + * + * @returns {Boolean} see @desc + */ + + function isDisplayNone (node) { + + if (!node) { + return false; + } + + if (node.nodeType === Node.TEXT_NODE) { + node = node.parentNode; + } + + if (node.nodeType === Node.ELEMENT_NODE) { + + if (node.hasAttribute('hidden')) { + return true; + } + + // aria-hidden attribute with the value "true" is an same as + // setting the hidden attribute for name calcuation + if (node.hasAttribute('aria-hidden')) { + if (node.getAttribute('aria-hidden').toLowerCase() === 'true') { + return true; + } + } + + const style = window.getComputedStyle(node, null); + + const display = style.getPropertyValue("display"); + + if (display) { + return display === 'none'; + } + } + return false; + } + + /* + * @function isVisibilityHidden + * + * @desc Returns true if the node (or it's parrent) has the CSS visibility + * property set to "hidden" or "collapse", otherwise false + * + * @param {Object} node - DOM node + * + * @return see @desc + */ + + function isVisibilityHidden(node) { + + if (!node) { + return false; + } + + if (node.nodeType === Node.TEXT_NODE) { + node = node.parentNode; + } + + if (node.nodeType === Node.ELEMENT_NODE) { + const style = window.getComputedStyle(node, null); + + const visibility = style.getPropertyValue("visibility"); + if (visibility) { + return (visibility === 'hidden') || (visibility === 'collapse'); + } + } + return false; + } + + /* + * @function isAriaHiddenFalse + * + * @desc Returns true if the node has the aria-hidden property set to + * "false", otherwise false. + * NOTE: This function is important in the accessible namce + * calculation, since content hidden with a CSS technique + * can be included in the accessible name calculation when + * aria-hidden is set to false + * + * @param {Object} node - DOM node + * + * @return see @desc + */ + + function isAriaHIddenFalse(node) { + + if (!node) { + return false; + } + + if (node.nodeType === Node.TEXT_NODE) { + node = node.parentNode; + } + + if (node.nodeType === Node.ELEMENT_NODE) { + return (node.hasAttribute('aria-hidden') && + (node.getAttribute('aria-hidden').toLowerCase() === 'false')); + } + + return false; + } + + /* + * @function includeContentInName + * + * @desc Checks the CSS display and hidden properties, and + * the aria-hidden property to see if the content + * should be included in the accessible name + * calculation. Returns true if it should be + * included, otherwise false + * + * @param {Object} node - DOM node + * + * @return see @desc + */ + + function includeContentInName(node) { + const flag = isAriaHIddenFalse(node) || + (!isVisibilityHidden(node) && + !isDisplayNone(node)); + return flag; + } + + /* + * @function getNodeContents + * + * @desc Recursively process element and text nodes by aggregating + * their text values for an ARIA accessible name or description + * calculation. + * + * NOTE: This includes special handling of elements with 'alt' + * text and embedded controls. + * + * @param {Object} node - A DOM node + * + * @return {String} The text content for an accessible name or description + */ + function getNodeContents (node) { + let contents = ''; + let nc; + let arr = []; + + switch (node.nodeType) { + case Node.ELEMENT_NODE: + // If aria-label is present, node recursion stops and + // aria-label value is returned + if (node.hasAttribute('aria-label')) { + if (includeContentInName(node)) { + contents = node.getAttribute('aria-label'); + } + } + else { + if (node instanceof HTMLSlotElement) { + // if no slotted elements, check for default slotted content + const assignedNodes = node.assignedNodes().length ? node.assignedNodes() : node.assignedNodes({ flatten: true }); + assignedNodes.forEach( assignedNode => { + nc = getNodeContents(assignedNode); + if (nc.length) arr.push(nc); + }); + contents = (arr.length) ? arr.join(' ') : ''; + } else { + if (couldHaveAltText(node) && includeContentInName(node)) { + contents = getAttributeValue(node, 'alt'); + } + else { + if (node.hasChildNodes()) { + let children = Array.from(node.childNodes); + children.forEach( child => { + nc = getNodeContents(child); + if (nc.length) arr.push(nc); + }); + contents = (arr.length) ? arr.join(' ') : ''; + } + } + // For all branches of the ELEMENT_NODE case... + } + } + contents = addCssGeneratedContent(node, contents); + break; + + case Node.TEXT_NODE: + if (includeContentInName(node)) { + contents = normalize(node.textContent); + } + break; + } + + return contents; + } + + /* + * @function couldHaveAltText + * + * @desc Based on HTML5 specification, returns true if + * the element could have an 'alt' attribute, + * otherwise false. + * + * @param {Object} element - DOM eleemnt node + * + * @return {Boolean} see @desc + */ + function couldHaveAltText (element) { + let tagName = element.tagName.toLowerCase(); + + switch (tagName) { + case 'img': + case 'area': + return true; + case 'input': + return (element.type && element.type === 'image'); + } + + return false; + } + + /* + * @function addCssGeneratedContent + * + * @desc Adds CSS-generated content for pseudo-elements + * :before and :after. According to the CSS spec, test that content + * value is other than the default computed value of 'none'. + * + * Note: Even if an author specifies content: 'none', because browsers + * add the double-quote character to the beginning and end of + * computed string values, the result cannot and will not be + * equal to 'none'. + * + * + * @param {Object} element - DOM node element + * @param {String} contents - Text content for DOM node + * + * @returns {String} see @desc + * + */ + function addCssGeneratedContent (element, contents) { + + let result = contents, + prefix = getComputedStyle(element, ':before').content, + suffix = getComputedStyle(element, ':after').content; + + if ((prefix[0] === '"') && !prefix.toLowerCase().includes('moz-')) { + result = prefix.substring(1, (prefix.length-1)) + result; + } + + if ((suffix[0] === '"') && !suffix.toLowerCase().includes('moz-')) { + result = result + suffix.substring(1, (suffix.length-1)) ; + } + + return result; + } + + /* accName.js */ + + /* Constants */ + const debug$3 = new DebugLogging('accName', false); + debug$3.flag = false; + + /** + * @fuction getAccessibleName + * + * @desc Returns the accessible name for an heading or landamrk + * + * @paramn {Object} dom - Document of the current element + * @param {node} element - DOM element node for either a heading or + * landmark + * @param {Boolean} fromContent - if true will compute name from content + * + * @return {String} The accessible name for the landmark or heading element + */ + + function getAccessibleName (doc, element, fromContent=false) { + let accName = ''; + + accName = nameFromAttributeIdRefs(doc, element, 'aria-labelledby'); + + if (accName === '' && element.hasAttribute('aria-label')) { + accName = element.getAttribute('aria-label').trim(); + } + + if (accName === '' && fromContent) { + accName = getNodeContents(element); + } + + if (accName === '' && element.title.trim() !== '') { + accName = element.title.trim(); + } + + return accName; + } + + /* + * @function nameFromAttributeIdRefs + * + * @desc Get the value of attrName on element (a space- + * separated list of IDREFs), visit each referenced element in the order it + * appears in the list and obtain its accessible name (skipping recursive + * aria-labelledby or aria-describedby calculations), and return an object + * with name property set to a string that is a space-separated concatena- + * tion of those results if any, otherwise return empty string. + * + * @param {Object} doc - Browser document object + * @param {Object} element - DOM element node + * @param {String} attribute - Attribute name (e.g. "aria-labelledby", "aria-describedby", + * or "aria-errormessage") + * + * @returns {String} see @desc + */ + function nameFromAttributeIdRefs (doc, element, attribute) { + const value = getAttributeValue(element, attribute); + const arr = []; + + if (value.length) { + const idRefs = value.split(' '); + + for (let i = 0; i < idRefs.length; i++) { + const refElement = doc.getElementById(idRefs[i]); + if (refElement) { + const accName = getNodeContents(refElement); + if (accName && accName.length) arr.push(accName); + } + } + } + + if (arr.length) { + return arr.join(' '); + } + + return ''; + } + /* landmarksHeadings.js */ /* Constants */ @@ -1824,8 +1824,8 @@ $skipToId [role="menuitem"].hover .label { } } return [].concat(mainElements, searchElements, navElements, asideElements, regionElements, footerElements, otherElements); - } - + } + /* skiptoMenuButton.js */ /* Constants */ @@ -2609,8 +2609,8 @@ $skipToId [role="menuitem"].hover .label { } } } - } - + } + /* constants */ const debug = new DebugLogging('skipto', false); debug.flag = true; @@ -2828,8 +2828,8 @@ $skipToId [role="menuitem"].hover .label { * @desc Get configuration information from author configuration to change * default settings * - * @param {object} config - Javascript object with default configuration information - * @param {object} globalConfig - Javascript object with configuration information oin a global variable + * @param {object} config - JavaScript object with default configuration information + * @param {object} globalConfig - JavaScript object with configuration information oin a global variable */ setupConfigFromGlobal: function(config, globalConfig) { let authorConfig = {}; @@ -2869,7 +2869,7 @@ $skipToId [role="menuitem"].hover .label { * @desc Get configuration information from author configuration to change * default settings * - * @param {object} config - Javascript object with default configuration information + * @param {object} config - JavaScript object with default configuration information */ setupConfigFromDataAttribute: function(config) { let dataConfig = {}; @@ -2916,6 +2916,6 @@ $skipToId [role="menuitem"].hover .label { window.addEventListener('load', function() { SkipTo.init(window.SkipToConfig); }); - })(); - -})(); + })(); + +})(); From f59f8d95baa873fa382a93c9eab1471d0f1a770d Mon Sep 17 00:00:00 2001 From: Umair Khan Date: Wed, 23 Jul 2025 15:27:01 +0530 Subject: [PATCH 2/3] Standardize 'JavaScript' casing across content and templates --- ...ultipleImplementationExample-Template.html | 4 +- content-templates/Example-Template.html | 6 +- .../about/change-history/change-history.html | 2 +- .../coverage-and-quality-report.html | 4 +- content/patterns/alert/examples/alert.html | 2 +- .../alertdialog/examples/alertdialog.html | 4 +- content/patterns/button/examples/button.html | 2 +- .../patterns/button/examples/button_idl.html | 2 +- .../examples/carousel-1-prev-next.html | 2 +- .../carousel/examples/carousel-2-tablist.html | 2 +- .../checkbox/examples/checkbox-mixed.html | 2 +- .../patterns/checkbox/examples/checkbox.html | 2 +- .../examples/combobox-autocomplete-both.html | 2 +- .../examples/combobox-autocomplete-list.html | 2 +- .../examples/combobox-autocomplete-none.html | 2 +- .../examples/combobox-datepicker.html | 2 +- .../examples/combobox-select-only.html | 2 +- .../combobox/examples/grid-combo.html | 2 +- .../examples/datepicker-dialog.html | 2 +- .../dialog-modal/examples/dialog.html | 2 +- .../disclosure/examples/disclosure-faq.html | 2 +- .../disclosure-image-description.html | 2 +- .../disclosure-navigation-hybrid.html | 2 +- .../examples/disclosure-navigation.html | 2 +- content/patterns/feed/examples/feed.html | 4 +- .../grid/examples/advanced-data-grid.html | 2 +- content/patterns/link/examples/link.html | 2 +- .../listbox/examples/listbox-collapsible.html | 2 +- .../listbox/examples/listbox-grouped.html | 2 +- .../examples/listbox-rearrangeable.html | 2 +- .../listbox/examples/listbox-scrollable.html | 2 +- ...menu-button-actions-active-descendant.html | 2 +- .../examples/menu-button-actions.html | 2 +- .../examples/menu-button-links.html | 2 +- .../menubar/examples/menubar-editor.html | 4 +- .../menubar/examples/menubar-navigation.html | 2 +- content/patterns/meter/examples/meter.html | 2 +- .../examples/radio-activedescendant.html | 2 +- .../patterns/radio/examples/radio-rating.html | 2 +- content/patterns/radio/examples/radio.html | 2 +- .../examples/slider-multithumb.html | 2 +- .../slider/examples/slider-color-viewer.html | 8 +- .../slider/examples/slider-rating.html | 4 +- .../patterns/slider/examples/slider-seek.html | 4 +- .../slider/examples/slider-temperature.html | 2 +- .../examples/datepicker-spinbuttons.html | 2 +- .../switch/examples/switch-button.html | 2 +- .../switch/examples/switch-checkbox.html | 2 +- content/patterns/switch/examples/switch.html | 2 +- .../table/examples/sortable-table.html | 2 +- content/patterns/table/examples/table.html | 2 +- .../patterns/tabs/examples/tabs-actions.html | 4 +- .../tabs/examples/tabs-automatic.html | 2 +- .../patterns/tabs/examples/tabs-manual.html | 2 +- .../patterns/toolbar/examples/toolbar.html | 12 +- .../treegrid/examples/treegrid-1.html | 2 +- .../treeview/examples/treeview-1a.html | 6 +- .../treeview/examples/treeview-1b.html | 6 +- .../examples/treeview-navigation.html | 2 +- content/shared/js/skipto.js | 1124 ++++++++--------- scripts/coverage-report.js | 2 +- scripts/coverage-report.template | 4 +- 62 files changed, 646 insertions(+), 646 deletions(-) diff --git a/content-templates/Depricated-MultipleImplementationExample-Template.html b/content-templates/Depricated-MultipleImplementationExample-Template.html index 86b7704d90..ebeacf7309 100644 --- a/content-templates/Depricated-MultipleImplementationExample-Template.html +++ b/content-templates/Depricated-MultipleImplementationExample-Template.html @@ -243,7 +243,7 @@

    Role, Property, State, and Tabindex Attributes

    -

    Javascript and CSS Source Code

    +

    JavaScript and CSS Source Code

    diff --git a/content-templates/Example-Template.html b/content-templates/Example-Template.html index b68aa9bc54..f2914bfd25 100644 --- a/content-templates/Example-Template.html +++ b/content-templates/Example-Template.html @@ -86,7 +86,7 @@

    Example