From 39a79fcaac46a9135146fdc09b059e298360a4d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zo=C3=AB=20Bijl?= <5457769+ZoeBijl@users.noreply.github.com> Date: Mon, 7 Oct 2019 23:36:39 +0200 Subject: [PATCH 1/3] Tabs Example: use display: none; to hide panels (pull #1198) --- examples/tabs/css/tabs.css | 4 ++++ examples/tabs/tabs-1/js/tabs.js | 6 +++--- examples/tabs/tabs-1/tabs.html | 6 +++--- examples/tabs/tabs-2/js/tabs.js | 6 +++--- examples/tabs/tabs-2/tabs.html | 4 ++-- 5 files changed, 15 insertions(+), 11 deletions(-) diff --git a/examples/tabs/css/tabs.css b/examples/tabs/css/tabs.css index cf830832fe..286427fed1 100644 --- a/examples/tabs/css/tabs.css +++ b/examples/tabs/css/tabs.css @@ -78,6 +78,10 @@ background: hsl(220, 43%, 99%); } +[role="tabpanel"].is-hidden { + display: none; +} + [role="tabpanel"]:focus { border-color: hsl(20, 96%, 48%); box-shadow: 0 0 0.2em hsl(20, 96%, 48%); diff --git a/examples/tabs/tabs-1/js/tabs.js b/examples/tabs/tabs-1/js/tabs.js index 224d4ba2da..7966b70035 100644 --- a/examples/tabs/tabs-1/js/tabs.js +++ b/examples/tabs/tabs-1/js/tabs.js @@ -159,8 +159,8 @@ // Get the value of aria-controls (which is an ID) var controls = tab.getAttribute('aria-controls'); - // Remove hidden attribute from tab panel to make it visible - document.getElementById(controls).removeAttribute('hidden'); + // Remove is-hidden class from tab panel to make it visible + document.getElementById(controls).classList.remove('is-hidden'); // Set focus when required if (setFocus) { @@ -177,7 +177,7 @@ }; for (p = 0; p < panels.length; p++) { - panels[p].setAttribute('hidden', 'hidden'); + panels[p].classList.add('is-hidden'); }; }; diff --git a/examples/tabs/tabs-1/tabs.html b/examples/tabs/tabs-1/tabs.html index 7ac922f445..7cabc2eefd 100644 --- a/examples/tabs/tabs-1/tabs.html +++ b/examples/tabs/tabs-1/tabs.html @@ -22,7 +22,7 @@
  • Related Issues
  • Design Pattern
    • - +

    Example of Tabs with Automatic Activation

    @@ -51,11 +51,11 @@

    Example

    Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.

    - @@ -351,7 +351,7 @@

    Address Added

    your profile.

    - +
    @@ -364,7 +364,7 @@

    End of the Road!

    The link or button is present for demonstration purposes only.

    - +
    diff --git a/examples/dialog-modal/js/datepicker.js b/examples/dialog-modal/js/datepicker.js index 60cdc37ab6..6d330c78aa 100644 --- a/examples/dialog-modal/js/datepicker.js +++ b/examples/dialog-modal/js/datepicker.js @@ -97,6 +97,7 @@ DatePicker.prototype.init = function () { cell.classList.add('dateCell'); var cellButton = document.createElement('button'); cellButton.classList.add('dateButton'); + cellButton.setAttribute('type', 'button'); cell.appendChild(cellButton); row.appendChild(cell); var dpDay = new DatePickerDay(cellButton, this, index, i, j); diff --git a/examples/disclosure/disclosure-faq.html b/examples/disclosure/disclosure-faq.html index 8dbe2ebc1f..c3dca3e038 100644 --- a/examples/disclosure/disclosure-faq.html +++ b/examples/disclosure/disclosure-faq.html @@ -48,7 +48,7 @@

    Example

    - +

    @@ -58,7 +58,7 @@

    Example

    - +

    You should come to the Parking office and report the @@ -68,7 +68,7 @@

    Example

    - +

    @@ -79,7 +79,7 @@

    Example

    - +

    diff --git a/examples/disclosure/disclosure-img-long-description.html b/examples/disclosure/disclosure-img-long-description.html index 52b3315a18..29941c563e 100644 --- a/examples/disclosure/disclosure-img-long-description.html +++ b/examples/disclosure/disclosure-img-long-description.html @@ -65,7 +65,7 @@

    Example

    In order to facilitate the judgement of the eye regarding the diminution of the army, I supposed that the troops under Prince Jèrôme and under Marshal Davoust, who were sent to Minsk and Mobilow and who rejoined near Orscha and Witebsk, had always marched with the army.

    Note: A French translation from Wikipedia.

    - +

    Data for Charles Minard's Chart of Napoleon's Invasion of Russia

    diff --git a/examples/disclosure/disclosure-navigation.html b/examples/disclosure/disclosure-navigation.html index f448879af1..385ef77bac 100644 --- a/examples/disclosure/disclosure-navigation.html +++ b/examples/disclosure/disclosure-navigation.html @@ -58,7 +58,7 @@

    Example

    - + - - - + - - + -