Skip to content

Commit

Permalink
remove unnecessary presentation role and tab set examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@adampage
adampage committed Sep 2, 2024
1 parent e91396d commit 5dcbf98
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 158 deletions.
4 changes: 2 additions & 2 deletions content/about/coverage-and-quality/coverage-and-quality-report.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2030,11 +2030,11 @@ <h3 id="example_coding_practices">Coding Practices</h3>
<td></td>
<td>Yes</td>
<td>ex1</td>
<td>6</td>
<td>5</td>
<td>3</td>
<td>7</td>
<td>3</td>
<td>menu,menuitem,presentation,aria-expanded,aria-haspopup,aria-hidden,aria-label</td>
<td>menu,menuitem,aria-expanded,aria-haspopup,aria-hidden,aria-label</td>
</tr>
<tr>
<td><a href="../../../content/patterns/tabs/examples/tabs-automatic.html">Tabs with Automatic Activation</a></td>
Expand Down
10 changes: 4 additions & 6 deletions content/patterns/tabs/examples/css/tabs-actions.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
);
}

[role="tablist"] > [role="presentation"] {
[role="tablist"] > .tab-wrapper {
display: flex;
}

Expand Down Expand Up @@ -129,23 +129,21 @@
}

[role="tab"][aria-selected="true"],
[role="presentation"]:has([role="tab"][aria-selected="true"]) {
.tab-wrapper:has([role="tab"][aria-selected="true"]) {
color: hsl(var(--color-1-hue) var(--color-1-sat) var(--light-min));
background-color: hsl(var(--color-1-hue) var(--color-1-sat) var(--light-max));
}

[role="tablist"] > [role="tab"][aria-selected="true"],
[role="tablist"]
> [role="presentation"]:has([role="tab"][aria-selected="true"]) {
[role="tablist"] > .tab-wrapper:has([role="tab"][aria-selected="true"]) {
border-radius: 0;
border-block-end-color: hsl(
var(--color-1-hue) var(--color-1-sat) var(--light-max)
);
}

[role="tablist"] > [role="tab"][aria-selected="true"]::after,
[role="tablist"]
> [role="presentation"]:has([role="tab"][aria-selected="true"])::after {
[role="tablist"] > .tab-wrapper:has([role="tab"][aria-selected="true"])::after {
content: "";
position: absolute;
inset-block-start: calc(-1 * var(--selected-tab-accent-block-size));
Expand Down
2 changes: 1 addition & 1 deletion content/patterns/tabs/examples/js/tabs-actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ class TabsManual {
}

getClosestTabWrapper(el) {
return el ? el.closest('[role="presentation"]') : null;
return el ? el.closest('.tab-wrapper') : null;
}

getTabpanelAssociatedWithTab(tab) {
Expand Down
153 changes: 4 additions & 149 deletions content/patterns/tabs/examples/tabs-actions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ <h2 id="ex_label">Experimental Example</h2>
<div class="tabs">
<h3 id="tablist-1">Interesting Sharks</h3>
<div role="tablist" aria-labelledby="tablist-1" class="manual">
<div role="presentation">
<div class="tab-wrapper">
<button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1" aria-actions="tab-1-action">
<span class="focus">Nurse shark</span>
</button>
Expand All @@ -86,7 +86,7 @@ <h3 id="tablist-1">Interesting Sharks</h3>
</ul>
</div>
</div>
<div role="presentation">
<div class="tab-wrapper">
<button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1" aria-actions="tab-2-action">
<span class="focus">Basking shark</span>
</button>
Expand All @@ -106,7 +106,7 @@ <h3 id="tablist-1">Interesting Sharks</h3>
</ul>
</div>
</div>
<div role="presentation">
<div class="tab-wrapper">
<button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1" aria-actions="tab-3-action">
<span class="focus">Whale shark</span>
</button>
Expand All @@ -126,7 +126,7 @@ <h3 id="tablist-1">Interesting Sharks</h3>
</ul>
</div>
</div>
<div role="presentation">
<div class="tab-wrapper">
<button id="tab-4" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-4" tabindex="-1" aria-actions="tab-4-action">
<span class="focus">Goblin shark</span>
</button>
Expand Down Expand Up @@ -219,151 +219,6 @@ <h3 id="tablist-1">Interesting Sharks</h3>
</div>
<output for="tablist-1" class="action"></output>
</div>

<div class="tabs">
<h3 id="tablist-3">Tropical Fruit</h3>
<div role="tablist" aria-labelledby="tablist-3" class="manual">
<div role="presentation">
<button id="tab-9" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-9" aria-actions="tab-9-action-clipboard-copy tab-9-action-close">
<span class="focus">Mangosteen</span>
</button>
<button type="button" id="tab-9-action-clipboard-copy" tabindex="-1" data-operation="clipboard-copy" aria-label="Copy Mangosteen tab content to clipboard">
📋
</button>
<button type="button" id="tab-9-action-close" tabindex="-1" data-operation="close" aria-label="Close Mangosteen tab">
❌
</button>
</div>
<div role="presentation">
<button id="tab-10" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-10" tabindex="-1" aria-actions="tab-10-action-clipboard-copy tab-10-action-close">
<span class="focus">Durian</span>
</button>
<button type="button" id="tab-10-action-clipboard-copy" tabindex="-1" data-operation="clipboard-copy" aria-label="Copy Durian tab content to clipboard">
📋
</button>
<button type="button" id="tab-10-action-close" tabindex="-1" data-operation="close" aria-label="Close Durian tab">
❌
</button>
</div>
<div role="presentation">
<button id="tab-11" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-11" tabindex="-1" aria-actions="tab-11-action-clipboard-copy tab-11-action-close">
<span class="focus">Guava</span>
</button>
<button type="button" id="tab-11-action-clipboard-copy" tabindex="-1" data-operation="clipboard-copy" aria-label="Copy Guava tab content to clipboard">
📋
</button>
<button type="button" id="tab-11-action-close" tabindex="-1" data-operation="close" aria-label="Close Guava tab">
❌
</button>
</div>
<div role="presentation">
<button id="tab-12" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-12" tabindex="-1" aria-actions="tab-12-action-clipboard-copy tab-12-action-close">
<span class="focus">Lychee</span>
</button>
<button type="button" id="tab-12-action-clipboard-copy" tabindex="-1" data-operation="clipboard-copy" aria-label="Copy Lychee tab content to clipboard">
📋
</button>
<button type="button" id="tab-12-action-close" tabindex="-1" data-operation="close" aria-label="Close Lychee tab">
❌
</button>
</div>
</div>
<div id="tabpanel-9" role="tabpanel" aria-labelledby="tab-9">
<p>
<a
href="https://en.wikipedia.org/wiki/Mangosteen">Mangosteen</a>,
also known as the purple mangosteen, is a tropical evergreen
tree with edible fruit native to Island Southeast Asia, from the
Malay Peninsula to Borneo. It has been cultivated extensively in
tropical Asia since ancient times.
</p>
</div>
<div id="tabpanel-10" role="tabpanel" aria-labelledby="tab-10" class="is-hidden">
<p>
The <a href="https://en.wikipedia.org/wiki/Durian">durian</a> is
the edible fruit of several tree species belonging to the genus
<span lang="la">Durio</span>. There are 30 recognized <span
lang="la">Durio</span> species, at least nine of which produce
edible fruit. <span lang="la">Durio zibethinus</span>, native to
Borneo and Sumatra, is the only species available on the
international market.
</p>
</div>
<div id="tabpanel-11" role="tabpanel" aria-labelledby="tab-11" class="is-hidden">
<p>
<a href="https://en.wikipedia.org/wiki/Guava">Guava</a> is a
common tropical fruit cultivated in many tropical and
subtropical regions. The common guava <span lang="la">Psidium
guajava</span> is a small tree in the myrtle family, native to
Mexico, Central America, the Caribbean and northern South
America.
</p>
</div>
<div id="tabpanel-12" role="tabpanel" aria-labelledby="tab-12" class="is-hidden">
<p>
<a href="https://en.wikipedia.org/wiki/Lychee">Lychee</a> is a
monotypic taxon and the sole member in the genus <span
lang="la">Litchi</span> in the soapberry family, <span
lang="la">Sapindaceae</span>. There are three distinct
subspecies of lychee. The most common is the Indochinese lychee
found in South China, Malaysia, and northern Vietnam.
</p>
</div>

<output for="tablist-3" class="action"></output>
</div>


<div class="tabs">
<h3 id="tablist-2">Danish Composers</h3>
<div role="tablist" aria-labelledby="tablist-2" class="manual">
<button id="tab-5" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-5">
<span class="focus">Maria Ahlefeldt</span>
</button>
<button id="tab-6" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-6" tabindex="-1">
<span class="focus">Carl Andersen</span>
</button>
<button id="tab-7" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-7" tabindex="-1">
<span class="focus">Ida da Fonseca</span>
</button>
<button id="tab-8" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-8" tabindex="-1">
<span class="focus">Peter Müller</span>
</button>
</div>
<div id="tabpanel-5" role="tabpanel" aria-labelledby="tab-5">
<p>
<a href="https://en.wikipedia.org/wiki/Maria_Theresia_Ahlefeldt">Maria Theresia Ahlefeldt</a>
(16 January 1755 – 20 December 1810) was a Danish, (originally German), composer.
She is known as the first female composer in Denmark.
Maria Theresia composed music for several ballets, operas, and plays of the royal theatre.
She was given good critic as a composer and described as a “<span lang="da">virkelig Tonekunstnerinde</span>” ('a True Artist of Music').
</p>
</div>
<div id="tabpanel-6" role="tabpanel" aria-labelledby="tab-6" class="is-hidden">
<p>
<a href="https://en.wikipedia.org/wiki/Joachim_Andersen_(composer)">Carl Joachim Andersen</a>
(29 April 1847 – 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen.
Both as a virtuoso and as composer of flute music, he is considered one of the best of his time.
He was considered to be a tough leader and teacher and demanded as such a lot from his orchestras but through that style he reached a high level.
</p>
</div>
<div id="tabpanel-7" role="tabpanel" aria-labelledby="tab-7" class="is-hidden">
<p>
<a href="https://en.wikipedia.org/wiki/Ida_Henriette_da_Fonseca">Ida Henriette da Fonseca</a>
(July 27, 1802 – July 6, 1858) was a Danish opera singer and composer.
Ida Henriette da Fonseca was the daughter of Abraham da Fonseca (1776–1849) and Marie Sofie Kiærskou (1784–1863).
She and her sister Emilie da Fonseca were students of Giuseppe Siboni, choir master of the Opera in Copenhagen.
She was given a place at the royal Opera alongside her sister the same year she debuted in 1827.
</p>
</div>
<div id="tabpanel-8" role="tabpanel" aria-labelledby="tab-8" class="is-hidden">
<p>
<a href="https://en.wikipedia.org/wiki/Peter_Lange-M%C3%BCller">Peter Erasmus Lange-Müller</a>
(1 December 1850 – 26 February 1926) was a Danish composer and pianist.
His compositional style was influenced by Danish folk music and by the work of Robert Schumann; Johannes Brahms; and his Danish countrymen, including J.P.E. Hartmann.
</p>
</div>
</div>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>
Expand Down

0 comments on commit 5dcbf98

Please sign in to comment.