diff --git a/README.md b/README.md index a886fdf..79e17a0 100644 --- a/README.md +++ b/README.md @@ -49,10 +49,10 @@ If you wish to open one specific tab when the script starts, just add the `data- ### CSS -At least a CSS selector for panels to be hidden when not selected: +At least a CSS selector for panels to be hidden when not selected for [legacy browsers](https://caniuse.com/#feat=hidden) compatibility (Internet Explorer < 11>): ```css -[role=tabpanel][aria-hidden=true] { +[role=tabpanel][hidden] { display: none; } ``` @@ -92,7 +92,7 @@ Now to kick off the script: var list = document.querySelector( '[role="tablist"]' ); // create the tablist instance -var tablist = new window.Tablist( list ); +var tablist = new Tablist( list ); // optionnaly add callbacks to on show and hide a tab tablist.on( 'show', function( tab, tabPanel ){ @@ -119,7 +119,7 @@ As the script takes only one `tablist` element as parameter you have to loop ove var lists = document.querySelectorAll( '[role="tablist"]' ); Array.prototype.forEach.call( lists, function( list ) { - new window.Tablist( list ).mount(); + new Tablist( list ).mount(); }); ``` @@ -134,7 +134,7 @@ The `Tablist` constructor returns 4 methods: ## Properties -To know which `tab` and `tabPanel` is open use `tablist.current`. It will return an array containing `tab` and `tabPanel` +To know which `tab` and `tabPanel` is open use `tablist.current`. It will return an object containing `tab` and `tabPanel` ```js // ES6 destructuring array diff --git a/dist/tablist.js b/dist/tablist.js index 5e4da2d..261bbb7 100644 --- a/dist/tablist.js +++ b/dist/tablist.js @@ -1,6 +1,6 @@ /** * @accede-web/tablist - WAI-ARIA tablist plugin based on AcceDe Web accessibility guidelines - * @version v2.0.2 + * @version v2.1.0 * @link http://a11y.switch.paris/ * @license ISC **/ @@ -262,7 +262,7 @@ } /** - * Toggle the `aria-hidden` attribute on the tabpanel based on the passed tab + * Toggle the `hidden` attribute on the tabpanel based on the passed tab * @param {integer} index - index of the tab * @param {boolean} show - whether or not display the panel */ @@ -279,9 +279,8 @@ this._toggleDisplay(this._tablist.openedIndex, false); } - tabPanel.setAttribute('aria-hidden', !show); - if (show) { + tabPanel.removeAttribute('hidden'); this._tablist.openedIndex = index; if (this._tablist.openedIndex !== undefined) { @@ -289,6 +288,8 @@ } } else if (this._tablist.openedIndex !== undefined) { this._trigger('hide', [tab, tabPanel]); + + tabPanel.setAttribute('hidden', 'hidden'); } } @@ -354,7 +355,10 @@ // set the attributes according the the openedTab status tab.setAttribute('tabindex', -1); - tabPanel.setAttribute('aria-hidden', !openedTab); + + if (!openedTab) { + tabPanel.setAttribute('hidden', 'hidden'); + } // subscribe internal events for tab and tap panel tab.addEventListener('click', this._handleDisplay); @@ -438,7 +442,7 @@ tabPanel.removeEventListener('focus', this._handlePanelFocus, true); tabPanel.removeEventListener('keydown', this._handlePanel); - tabPanel.setAttribute('aria-hidden', 'false'); + tabPanel.removeAttribute('hidden'); }); this._tablist = {}; diff --git a/dist/tablist.min.js b/dist/tablist.min.js index f4d70e4..15fc69a 100644 --- a/dist/tablist.min.js +++ b/dist/tablist.min.js @@ -1,7 +1,7 @@ /** * @accede-web/tablist - WAI-ARIA tablist plugin based on AcceDe Web accessibility guidelines - * @version v2.0.2 + * @version v2.1.0 * @link http://a11y.switch.paris/ * @license ISC **/ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Tablist=e()}(this,function(){"use strict";const t=["hide","show"];return class{constructor(t){if(!t||!t.nodeName)throw new Error("No DOM node provided. Abort.");this.el=t,this._tablist={},this._callbacks={},this._handleDisplay=this._handleDisplay.bind(this),this._handleFocus=this._handleFocus.bind(this),this._handleTab=this._handleTab.bind(this),this._handlePanelFocus=this._handlePanelFocus.bind(this),this._handlePanel=this._handlePanel.bind(this)}_firstActiveTab(){let t;for(let e=0;e=0&&(t.target.doubleFocus=!0)}_handleTab(t){switch(void 0===this._tablist.currentTabIndex&&this._handleFocus(t),t.keyCode){case 32:case 13:this._handleDisplay(t);break;case 35:t.preventDefault(),this._switchTab(this._tablist.tabs.length-1);break;case 36:t.preventDefault(),this._switchTab(this._firstActiveTab());break;case 37:case 38:t.preventDefault(),this._switchTab(this._tablist.currentTabIndex-1);break;case 39:case 40:t.preventDefault(),this._switchTab(this._tablist.currentTabIndex+1)}}_noop(){}_select(t){this._tablist.tabs.forEach((e,s)=>{const i=t===e;e.setAttribute("aria-selected",i),e.setAttribute("tabindex",i?0:-1),i&&this._toggleDisplay(s)})}_switchTab(t){if(this._tablist.tabs[t]&&this._tablist.tabs[t].disabled){const e=t>this._tablist.currentTabIndex?t+1:t-1;this._switchTab(e)}else this._tablist.currentTabIndex=t,this._tablist.currentTabIndex=this._tablist.tabsLength&&(this._tablist.currentTabIndex=this._firstActiveTab()),this._tablist.tabs[this._tablist.currentTabIndex].focus()}_toggleDisplay(t,e=!0){if(e&&t===this._tablist.openedIndex)return;const s=this._tablist.tabs[t],i=this._tablist.tabPanels[t];e&&void 0!==this._tablist.openedIndex&&this._toggleDisplay(this._tablist.openedIndex,!1),i.setAttribute("aria-hidden",!e),e?(this._tablist.openedIndex=t,void 0!==this._tablist.openedIndex&&this._trigger("show",[s,i])):void 0!==this._tablist.openedIndex&&this._trigger("hide",[s,i])}_trigger(t,e){this._callbacks[t]&&this._callbacks[t].forEach(t=>{t.apply(this,e)})}mount(){let t;this._tablist.tabs=[],this._tablist.tabPanels=[],Array.prototype.slice.call(this.el.querySelectorAll("[role=tab]")).forEach((e,s)=>{const i=e.getAttribute("aria-controls");let a,n=!1;if(i?a=document.getElementById(i):e.nextElementSibling&&e.nextElementSibling.getAttribute("aria-labelledby")===e.id&&(a=e.nextElementSibling),!a)throw new Error(`Could not find associated tabpanel for tab ${e.id}. Use [aria-controls="tabpanelId"] on the [role="tab"] element to link them together`);this._tablist.tabs.push(e),this._tablist.tabPanels.push(a),e.disabled=e.hasAttribute("disabled")||"true"===e.getAttribute("aria-disabled"),"true"!==e.getAttribute("data-open")||e.disabled||void 0===this._tablist.openedIndex&&(this._toggleDisplay(s,!0),n=!0),e.removeAttribute("data-open"),void 0!==t||e.disabled||(t=s),e.setAttribute("tabindex",-1),a.setAttribute("aria-hidden",!n),e.addEventListener("click",this._handleDisplay),e.addEventListener("focus",this._handleFocus),e.addEventListener("keydown",this._handleTab),a.addEventListener("focus",this._handlePanelFocus,!0),a.addEventListener("keydown",this._handlePanel)}),this._tablist.tabsLength=this._tablist.tabs.length,this._tablist.tabPanelsLength=this._tablist.tabPanels.length,void 0!==this._tablist.openedIndex?(this._tablist.tabs[this._tablist.openedIndex].setAttribute("tabindex",0),this._tablist.tabs[this._tablist.openedIndex].setAttribute("aria-selected","true")):(this._toggleDisplay(t,!0),this._tablist.tabs[t].setAttribute("tabindex",0),this._tablist.tabs[t].setAttribute("aria-selected","true"))}off(t,e){if(!this._callbacks[t])return;const s=this._callbacks[t].indexOf(e);s<0||this._callbacks[t].splice(s,1)}on(e,s){t.indexOf(e)<0||(this._callbacks[e]||(this._callbacks[e]=[]),this._callbacks[e].push(s))}get current(){return{tab:this._tablist.tabs[this._tablist.openedIndex],tabPanel:this._tablist.tabPanels[this._tablist.openedIndex]}}unmount(){this._tablist.tabs.forEach((t,e)=>{const s=this._tablist.tabPanels[e];t.removeEventListener("click",this._handleDisplay),t.removeEventListener("focus",this._handleFocus),t.removeEventListener("keydown",this._handleTab),t.removeAttribute("tabindex"),t.removeAttribute("aria-selected"),s.removeEventListener("focus",this._handlePanelFocus,!0),s.removeEventListener("keydown",this._handlePanel),s.setAttribute("aria-hidden","false")}),this._tablist={}}}}); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Tablist=e()}(this,function(){"use strict";const t=["hide","show"];return class{constructor(t){if(!t||!t.nodeName)throw new Error("No DOM node provided. Abort.");this.el=t,this._tablist={},this._callbacks={},this._handleDisplay=this._handleDisplay.bind(this),this._handleFocus=this._handleFocus.bind(this),this._handleTab=this._handleTab.bind(this),this._handlePanelFocus=this._handlePanelFocus.bind(this),this._handlePanel=this._handlePanel.bind(this)}_firstActiveTab(){let t;for(let e=0;e=0&&(t.target.doubleFocus=!0)}_handleTab(t){switch(void 0===this._tablist.currentTabIndex&&this._handleFocus(t),t.keyCode){case 32:case 13:this._handleDisplay(t);break;case 35:t.preventDefault(),this._switchTab(this._tablist.tabs.length-1);break;case 36:t.preventDefault(),this._switchTab(this._firstActiveTab());break;case 37:case 38:t.preventDefault(),this._switchTab(this._tablist.currentTabIndex-1);break;case 39:case 40:t.preventDefault(),this._switchTab(this._tablist.currentTabIndex+1)}}_noop(){}_select(t){this._tablist.tabs.forEach((e,s)=>{const i=t===e;e.setAttribute("aria-selected",i),e.setAttribute("tabindex",i?0:-1),i&&this._toggleDisplay(s)})}_switchTab(t){if(this._tablist.tabs[t]&&this._tablist.tabs[t].disabled){const e=t>this._tablist.currentTabIndex?t+1:t-1;this._switchTab(e)}else this._tablist.currentTabIndex=t,this._tablist.currentTabIndex=this._tablist.tabsLength&&(this._tablist.currentTabIndex=this._firstActiveTab()),this._tablist.tabs[this._tablist.currentTabIndex].focus()}_toggleDisplay(t,e=!0){if(e&&t===this._tablist.openedIndex)return;const s=this._tablist.tabs[t],i=this._tablist.tabPanels[t];e&&void 0!==this._tablist.openedIndex&&this._toggleDisplay(this._tablist.openedIndex,!1),e?(i.removeAttribute("hidden"),this._tablist.openedIndex=t,void 0!==this._tablist.openedIndex&&this._trigger("show",[s,i])):void 0!==this._tablist.openedIndex&&(this._trigger("hide",[s,i]),i.setAttribute("hidden","hidden"))}_trigger(t,e){this._callbacks[t]&&this._callbacks[t].forEach(t=>{t.apply(this,e)})}mount(){let t;this._tablist.tabs=[],this._tablist.tabPanels=[],Array.prototype.slice.call(this.el.querySelectorAll("[role=tab]")).forEach((e,s)=>{const i=e.getAttribute("aria-controls");let a,n=!1;if(i?a=document.getElementById(i):e.nextElementSibling&&e.nextElementSibling.getAttribute("aria-labelledby")===e.id&&(a=e.nextElementSibling),!a)throw new Error(`Could not find associated tabpanel for tab ${e.id}. Use [aria-controls="tabpanelId"] on the [role="tab"] element to link them together`);this._tablist.tabs.push(e),this._tablist.tabPanels.push(a),e.disabled=e.hasAttribute("disabled")||"true"===e.getAttribute("aria-disabled"),"true"!==e.getAttribute("data-open")||e.disabled||void 0===this._tablist.openedIndex&&(this._toggleDisplay(s,!0),n=!0),e.removeAttribute("data-open"),void 0!==t||e.disabled||(t=s),e.setAttribute("tabindex",-1),n||a.setAttribute("hidden","hidden"),e.addEventListener("click",this._handleDisplay),e.addEventListener("focus",this._handleFocus),e.addEventListener("keydown",this._handleTab),a.addEventListener("focus",this._handlePanelFocus,!0),a.addEventListener("keydown",this._handlePanel)}),this._tablist.tabsLength=this._tablist.tabs.length,this._tablist.tabPanelsLength=this._tablist.tabPanels.length,void 0!==this._tablist.openedIndex?(this._tablist.tabs[this._tablist.openedIndex].setAttribute("tabindex",0),this._tablist.tabs[this._tablist.openedIndex].setAttribute("aria-selected","true")):(this._toggleDisplay(t,!0),this._tablist.tabs[t].setAttribute("tabindex",0),this._tablist.tabs[t].setAttribute("aria-selected","true"))}off(t,e){if(!this._callbacks[t])return;const s=this._callbacks[t].indexOf(e);s<0||this._callbacks[t].splice(s,1)}on(e,s){t.indexOf(e)<0||(this._callbacks[e]||(this._callbacks[e]=[]),this._callbacks[e].push(s))}get current(){return{tab:this._tablist.tabs[this._tablist.openedIndex],tabPanel:this._tablist.tabPanels[this._tablist.openedIndex]}}unmount(){this._tablist.tabs.forEach((t,e)=>{const s=this._tablist.tabPanels[e];t.removeEventListener("click",this._handleDisplay),t.removeEventListener("focus",this._handleFocus),t.removeEventListener("keydown",this._handleTab),t.removeAttribute("tabindex"),t.removeAttribute("aria-selected"),s.removeEventListener("focus",this._handlePanelFocus,!0),s.removeEventListener("keydown",this._handlePanel),s.removeAttribute("hidden")}),this._tablist={}}}}); diff --git a/lib/index.js b/lib/index.js index 5a68a7d..8d4aa96 100644 --- a/lib/index.js +++ b/lib/index.js @@ -255,7 +255,7 @@ class Tablist{ /** - * Toggle the `aria-hidden` attribute on the tabpanel based on the passed tab + * Toggle the `hidden` attribute on the tabpanel based on the passed tab * @param {integer} index - index of the tab * @param {boolean} show - whether or not display the panel */ @@ -272,9 +272,8 @@ class Tablist{ this._toggleDisplay( this._tablist.openedIndex, false ); } - tabPanel.setAttribute( 'aria-hidden', !show ); - if( show ){ + tabPanel.removeAttribute( 'hidden' ); this._tablist.openedIndex = index; if( this._tablist.openedIndex !== undefined ){ @@ -283,6 +282,8 @@ class Tablist{ } else if( this._tablist.openedIndex !== undefined ){ this._trigger( 'hide', [ tab, tabPanel ]); + + tabPanel.setAttribute( 'hidden', 'hidden' ); } } @@ -349,7 +350,10 @@ class Tablist{ // set the attributes according the the openedTab status tab.setAttribute( 'tabindex', -1 ); - tabPanel.setAttribute( 'aria-hidden', !openedTab ); + + if( !openedTab ){ + tabPanel.setAttribute( 'hidden', 'hidden' ); + } // subscribe internal events for tab and tap panel tab.addEventListener( 'click', this._handleDisplay ); @@ -433,7 +437,7 @@ class Tablist{ tabPanel.removeEventListener( 'focus', this._handlePanelFocus, true ); tabPanel.removeEventListener( 'keydown', this._handlePanel ); - tabPanel.setAttribute( 'aria-hidden', 'false' ); + tabPanel.removeAttribute( 'hidden' ); }); diff --git a/package.json b/package.json index f227dd9..d5e534a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "title": "AcceDe Web - tablist", "name": "@accede-web/tablist", - "version": "2.0.2", + "version": "2.1.0", "description": "WAI-ARIA tablist plugin based on AcceDe Web accessibility guidelines", "main": "dist/tablist.js", "module": "lib/index.js", diff --git a/test/css/styles.css b/test/css/styles.css index ef09316..bffbf5c 100644 --- a/test/css/styles.css +++ b/test/css/styles.css @@ -484,7 +484,7 @@ vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid) overflow: hidden; transition: height 0.4s; } -.accordion [role=tabpanel][aria-hidden="true"] { +.accordion [role=tabpanel][hidden] { display: none } .accordion [role=tabpanel] p { @@ -693,7 +693,7 @@ vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid) margin: 0 auto; max-width: 56.25rem; } -.tab [role=tabpanel][aria-hidden="true"] { +.tab [role=tabpanel][hidden] { display: none; } .tab [role=tabpanel] p { diff --git a/test/tab-opened.html b/test/tab-opened.html index be63dfe..8933300 100644 --- a/test/tab-opened.html +++ b/test/tab-opened.html @@ -74,16 +74,16 @@

-
+

Le saviez-vous ? Le motif de conception « onglet » est très similaire à celui des « accordéons ». Ils partagent en effet les mêmes rôles ARIA : tablist, tab et tabpanel. Ils se démarquent principalement par les raccourcis clavier utilisables. N’hésitez pas à aller voir la notice d’accessibilité des accordéons ainsi que la page de démonstration du composant « accordéons ».

-
+

Lorem ipsum tab 2 link

-
+

Lorem ipsum tab 3 link

-
+

Lorem ipsum tab 4 link

diff --git a/test/tab.html b/test/tab.html index 4b57153..c1f1ee2 100644 --- a/test/tab.html +++ b/test/tab.html @@ -74,16 +74,16 @@

-
+

Le saviez-vous ? Le motif de conception « onglet » est très similaire à celui des « accordéons ». Ils partagent en effet les mêmes rôles ARIA : tablist, tab et tabpanel. Ils se démarquent principalement par les raccourcis clavier utilisables. N’hésitez pas à aller voir la notice d’accessibilité des accordéons ainsi que la page de démonstration du composant « accordéons ».

-
+

Lorem ipsum tab 2 link

-
+

Lorem ipsum tab 3 link

-
+

Lorem ipsum tab 4 link

diff --git a/test/tab.js b/test/tab.js index dcd89ec..2bf94e8 100644 --- a/test/tab.js +++ b/test/tab.js @@ -27,7 +27,7 @@ test( 'Mount', async t => { }); const hidden = Array.from( document.querySelectorAll( '[role="tabpanel"]' )).map( tabpanel => { - return tabpanel.getAttribute( 'aria-hidden' ); + return tabpanel.hasAttribute( 'hidden' ); }); return [ @@ -41,8 +41,8 @@ test( 'Mount', async t => { t.true( firstSelected, 'Le premier élément « tab » a « [aria-selected="true"] ».' ); t.same( indexes.join(), '-1,-1,-1', 'Les autres élémnents « tab » ont « [tabindex="-1"] ».' ); - t.same( firstPanel, 'false', 'Le premier élémnent « tabpanel » a « [aria-hidden="false"] ».' ); - t.same( panels.join(), 'true,true,true', 'Les autres élémnents « tabpanel » ont « [aria-hidden="true"] ».' ); + t.false( firstPanel, 'Le premier élémnent « tabpanel » n’a pas l’attribut « hidden ».' ); + t.same( panels.join(), 'true,true,true', 'Les autres élémnents « tabpanel » ont l’attribut « hidden ».' ); await browser.close(); @@ -60,7 +60,7 @@ test( 'Second tab opened by default', async t => { }); const hidden = Array.from( document.querySelectorAll( '[role="tabpanel"]' )).map( tabpanel => { - return tabpanel.getAttribute( 'aria-hidden' ); + return tabpanel.hasAttribute( 'hidden' ); }); return [ @@ -74,8 +74,8 @@ test( 'Second tab opened by default', async t => { t.true( secondSelected, 'Le deuxième élément « tab » a « [aria-selected="true"] ».' ); t.same( indexes.join(), '-1,0,-1,-1', 'Les autres éléments « tab » ont « [tabindex="-1"] ».' ); - t.same( panels[ 1 ], 'false', 'Le deuxième élément « tabpanel » a « [aria-hidden="false"] ».' ); - t.same( panels.join(), 'true,false,true,true', 'Les autres éléments « tabpanel » ont « [aria-hidden="true"] ».' ); + t.false( panels[ 1 ], 'Le deuxième élément « tabpanel » a n’a pas l’attribut « hidden ».' ); + t.same( panels.join(), 'true,false,true,true', 'Les autres éléments « tabpanel » ont l’attribut « hidden ».' ); await browser.close(); @@ -94,8 +94,8 @@ test( 'Focus', async t => { document.activeElement.tabIndex, document.querySelectorAll( '[role="tab"][tabindex="0"]' ).length, document.querySelectorAll( '[aria-selected="true"]' ).length, - document.getElementById( document.activeElement.getAttribute( 'aria-controls' )).getAttribute( 'aria-hidden' ), - document.querySelectorAll( '[role="tabpanel"][aria-hidden="false"]' ).length, + document.getElementById( document.activeElement.getAttribute( 'aria-controls' )).hasAttribute( 'hidden' ), + document.querySelectorAll( '[role="tabpanel"]:not([hidden])' ).length, ]; }); @@ -103,8 +103,8 @@ test( 'Focus', async t => { t.same( selectedIndex, 0, 'L’onglet focus a « [tabindex="0"] »' ); t.same( uniqueIndex, 1, 'Seul l’onglet focus a « [tabindex="0"] »' ); t.same( selectedCount, 1, 'Seul l’onglet focus a « [aria-selected] »' ); - t.same( hiddenPanel, 'false', 'Le panneau associé à l’onglet focus a « [aria-hidden="false"] »' ); - t.same( hiddenCount, 1, 'Seul le panneau associé à l’onglet focus a « [aria-hidden="false"] »' ); + t.false( hiddenPanel, 'Le panneau associé à l’onglet focus n’a pas l’attribut « hidden »' ); + t.same( hiddenCount, 1, 'Seul le panneau associé à l’onglet focus n’a pas l’attribut « hidden »' ); await browser.close(); @@ -123,8 +123,8 @@ test( 'Click', async t => { document.activeElement.tabIndex, document.querySelectorAll( '[role="tab"][tabindex="0"]' ).length, document.querySelectorAll( '[aria-selected="true"]' ).length, - document.getElementById( document.activeElement.getAttribute( 'aria-controls' )).getAttribute( 'aria-hidden' ), - document.querySelectorAll( '[role="tabpanel"][aria-hidden="false"]' ).length, + document.getElementById( document.activeElement.getAttribute( 'aria-controls' )).hasAttribute( 'hidden' ), + document.querySelectorAll( '[role="tabpanel"]:not([hidden])' ).length, ]; }); @@ -132,8 +132,8 @@ test( 'Click', async t => { t.same( selectedIndex, 0, 'L’onglet cliqué a « [tabindex="0"] »' ); t.same( uniqueIndex, 1, 'Seul l’onglet cliqué a « [tabindex="0"] »' ); t.same( selectedCount, 1, 'Seul l’onglet cliqué a « [aria-selected] »' ); - t.same( hiddenPanel, 'false', 'Le panneau associé à l’onglet cliqué a « [aria-hidden="false"] »' ); - t.same( hiddenCount, 1, 'Seul le panneau associé à l’onglet cliqué a « [aria-hidden="false"] »' ); + t.false( hiddenPanel, 'Le panneau associé à l’onglet cliqué n’a pas l’attribut « hidden »' ); + t.same( hiddenCount, 1, 'Seul le panneau associé à l’onglet cliqué n’a pas l’attribut « hidden »' ); await browser.close(); @@ -238,7 +238,7 @@ test( 'Panel navigation', async t => { const [ browser, page ] = await createBrowser(); await page.focus( '[role="tab"]:nth-child(2)' ); - await page.focus( '[aria-hidden="false"] a' ); + await page.focus( '[role="tabpanel"]:not([hidden]) a' ); await page.keyboard.down( 'Control' ); await page.keyboard.press( 'ArrowUp' ); @@ -250,7 +250,7 @@ test( 'Panel navigation', async t => { t.true( crtlUp, 'La combinaison « Ctrl + Flèche haut » focus l’onglet lié au panneau' ); - await page.focus( '[aria-hidden="false"] a' ); + await page.focus( '[role="tabpanel"]:not([hidden]) a' ); await page.keyboard.down( 'Control' ); await page.keyboard.press( 'PageUp' ); @@ -263,7 +263,7 @@ test( 'Panel navigation', async t => { t.true( pageUp, 'La combinaison « Ctrl + Page précédente » focus l’onglet précédent' ); await page.focus( '[role="tab"]:nth-child(2)' ); - await page.focus( '[aria-hidden="false"] a' ); + await page.focus( '[role="tabpanel"]:not([hidden]) a' ); await page.keyboard.down( 'Control' ); await page.keyboard.press( 'PageDown' ); @@ -276,7 +276,7 @@ test( 'Panel navigation', async t => { t.true( pageDown, 'La combinaison « Ctrl + Page suivante » focus l’onglet suivant' ); await page.focus( '[role="tab"]' ); - await page.focus( '[aria-hidden="false"] a' ); + await page.focus( '[role="tabpanel"]:not([hidden]) a' ); await page.keyboard.down( 'Control' ); await page.keyboard.press( 'PageUp' ); @@ -288,7 +288,7 @@ test( 'Panel navigation', async t => { t.true( pageUpFirst, 'La combinaison « Ctrl + Page précédente » focus le dernier onglet depuis le premier panneau' ); - await page.focus( '[aria-hidden="false"] a' ); + await page.focus( '[role="tabpanel"]:not([hidden]) a' ); await page.keyboard.down( 'Control' ); await page.keyboard.press( 'PageDown' );