Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

♿️ aria(side-navigation): new markup for side navigation. #479

Open
wants to merge 18 commits into
base: development
Choose a base branch
from
Open

♿️ aria(side-navigation): new markup for side navigation. #479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
d925a89
made changes in side navigation revamp
creador-dev Mar 11, 2022
c566755
made changes in side navigation revamp
creador-dev Mar 11, 2022
17d7a2f
made changes in side navigation revamp
creador-dev Mar 11, 2022
7417cb0
made changes in side navigation revamp
creador-dev Mar 11, 2022
47c645f
fix css of tags
creador-dev Mar 15, 2022
ccfe10c
cleaning up
creador-dev Mar 15, 2022
ccb1dcf
changes in markup
creador-dev Mar 16, 2022
abe82bd
updated html markup of side navigation
creador-dev Mar 16, 2022
85d991b
made changes in markup
creador-dev Mar 16, 2022
0e954d2
made changes in markup
creador-dev Mar 16, 2022
1a17dd2
made changes in css
creador-dev Mar 16, 2022
af80830
cleaning up
creador-dev Mar 22, 2022
9887286
Merge branch 'development' of https://github.com/wpmudev/shared-ui in…
creador-dev Mar 22, 2022
afd8b8a
made changes in documentation
creador-dev Mar 22, 2022
235049e
updated markup
creador-dev Mar 22, 2022
09e4171
removed unused aria attribute
creador-dev Mar 22, 2022
ae00cb1
updated documentation
creador-dev Mar 22, 2022
baeb946
Merge branch 'development' of https://github.com/wpmudev/shared-ui in…
creador-dev Mar 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 25 additions & 9 deletions assets/scss/shared-ui/_sidenav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,10 @@
line-height: 1.5em;
list-style: none;

&.current {
&.active {
background-color: $sidenav-tab-active-bg-color;
border-radius: 20px;

a {
color: $sidenav-tab-active-color;
}
color: $sidenav-tab-active-color;
}

.sui-tag,
Expand All @@ -54,10 +51,20 @@
}
}

a {
button {
font-family: $font;
font-size: 15px;
line-height: 1.5em;
font-weight: 500;
text-align: left;
width: 100%;
cursor: pointer;
border: 0;
padding: 0;
background: 0 0;
outline: 0;
display: block;
color: $sidenav-tab-color;
font-weight: 500;
transition: 0.3s ease;

&:hover,
Expand All @@ -74,12 +81,12 @@
background-color: transparent;
line-height: auto;

a {
button {
padding: 5px 15px;
border-radius: 20px;
background-color: transparent;

&.current {
&.active {
background-color: $sidenav-tab-active-bg-color;
color: $sidenav-tab-active-color;
}
Expand Down Expand Up @@ -164,6 +171,15 @@
}
}

// sui tab content css
[role="tabpanel"] {
display: none;

&.active {
display: block;
}
}

.sui-sidenav-sticky {

@include media(min-width, lg) {
Expand Down
234 changes: 169 additions & 65 deletions page-sidenav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,11 @@

<!-- Navigation -->
<div class="sui-sidenav" role="navigation">

<ul class="sui-vertical-tabs sui-sidenav-hide-md">

<li class="sui-vertical-tab current">
<a href="#" role="button" data-tab="section-1">Section 1</a>
</li>

<li class="sui-vertical-tab">
<a href="#" role="button" data-tab="section-2">Section 2</a>
<span class="sui-tag sui-tag-warning">4</span>
</li>

<li class="sui-vertical-tab">
<a href="#" role="button" data-tab="section-3">Section 3</a>
<span class="sui-icon-check-tick" aria-hidden="true"></span>
</li>

</ul>
<div class="sui-vertical-tabs sui-sidenav-hide-md" role="tablist">
<button id="section-1" class="sui-vertical-tab active" role="tab" aria-selected="true" aria-controls="section-1-content">Section 1</button>
<button id="section-2" class="sui-vertical-tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="section-2-content">Section 2 <span class="sui-tag sui-tag-warning">4</span></button>
<button id="section-3" class="sui-vertical-tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="section-3-content">Section 3 <span class="sui-icon-check-tick" aria-hidden="true"></span></button>
</div>

<div class="sui-sidenav-settings">

Expand All @@ -41,9 +28,9 @@
<label class="sui-label">Navigate</label>

<select class="sui-select">
<option value="#section-1">Section 1</option>
<option value="#section-2">Section 2</option>
<option value="#section-3">Section 3</option>
<option value="section-1">Section 1</option>
<option value="section-2">Section 2</option>
<option value="section-3">Section 3</option>
</select>

</div>
Expand All @@ -52,78 +39,116 @@

</div>

<!-- SECTION: 1 -->
<div class="sui-box" data-tab="section-1">
<div class="sui-tabs-content">
<!-- SECTION: 1 -->
<div id="section-1-content" class="sui-box active" role="tabpanel" tabindex="0" aria-labelledby="section-1" aria-describedby="section-1-description">

<div class="sui-box-header">
<h1 class="sui-box-title">Section 1</h1>
</div>
<div class="sui-box-header">
<h1 class="sui-box-title">Section 1</h1>
</div>

<div class="sui-box-body">
<div class="sui-box-body" id="section-1-description">

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>

</div>

</div>

</div>
<!-- SECTION: 2 -->
<div id="section-2-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-2" aria-describedby="section-2-description" hidden>

<!-- SECTION: 2 -->
<div class="sui-box" data-tab="section-2" style="display: none;">
<div class="sui-box-header">
<h1 class="sui-box-title">Section 2</h1>
</div>

<div class="sui-box-header">
<h1 class="sui-box-title">Section 2</h1>
</div>
<div class="sui-box-body" id="section-2-description">

<div class="sui-box-body">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
</div>

</div>

</div>
<!-- SECTION: 3 -->
<div id="section-3-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-3" aria-describedby="section-3-description" hidden>

<!-- SECTION: 3 -->
<div class="sui-box" data-tab="section-3" style="display: none;">
<div class="sui-box-header">
<h1 class="sui-box-title">Section 3</h1>
</div>

<div class="sui-box-header">
<h1 class="sui-box-title">Section 3</h1>
</div>
<div class="sui-box-body" id="section-3-description">

<div class="sui-box-body">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
</div>

</div>

</div>

</div>

<div class="demo-code-block">
<div class="sui-box">

<div class="sui-box-header">
<h3 class="sui-box-title">Documentation</h3>
</div>

<div class="sui-box-body">

<div class="sui-box-settings-row">

<div class="sui-box-settings-col-1">
<span class="sui-settings-label">Base Structure</span>
</div>

<div class="sui-box-settings-col-2">

<div class="demo-code-block">

<pre class="sui-code-snippet html">
&lt;section class=&quot;sui-row-with-sidenav&quot;&gt;

&lt;!-- Navigation --&gt;
&lt;div role=&quot;navigation&quot; class=&quot;sui-sidenav&quot;&gt;

&lt;ul class=&quot;sui-vertical-tabs sui-sidenav-hide-md&quot;&gt;

&lt;li class=&quot;sui-vertical-tab current&quot;&gt;
&lt;a href=&quot;#&quot; role=&quot;button&quot;&gt;Tab 1&lt;/a&gt;
&lt;/li&gt;

&lt;li class=&quot;sui-vertical-tab&quot;&gt;
&lt;a href=&quot;#&quot; role=&quot;button&quot;&gt;Tab 2&lt;/a&gt;
&lt;span class=&quot;sui-tag sui-tag-warning&quot;&gt;4&lt;/span&gt;
&lt;/li&gt;

&lt;li class=&quot;sui-vertical-tab&quot;&gt;
&lt;a href=&quot;#&quot; role=&quot;button&quot;&gt;Tab 3&lt;/a&gt;
&lt;span class=&quot;sui-icon-check-tick&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/li&gt;
&lt;div class=&quot;sui-vertical-tabs sui-sidenav-hide-md&quot; role=&quot;tablist&quot;&gt;

&lt;button
id=&quot;tab-1&quot;
class=&quot;sui-vertical-tab active&quot;
role=&quot;tab&quot;
aria-selected=&quot;true&quot;
aria-controls=&quot;tab-1-controls&quot;
&gt;
Section 1
&lt;/button&gt;

&lt;button
id=&quot;tab-2&quot;
class=&quot;sui-vertical-tab&quot;
role=&quot;tab&quot;
aria-selected=&quot;false&quot;
tabindex=&quot;-1&quot;
aria-controls=&quot;tab-2-controls&quot;
&gt;
Section 2
&lt;span class=&quot;sui-tag sui-tag-warning&quot;&gt;4&lt;/span&gt;
&lt;/button&gt;

&lt;button
id=&quot;tab-3&quot;
class=&quot;sui-vertical-tab&quot;
role=&quot;tab&quot;
aria-selected=&quot;false&quot;
tabindex=&quot;-1&quot;
aria-controls=&quot;tab-3-controls&quot;
&gt;
Section 3
&lt;span class=&quot;sui-icon-check-tick&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/button&gt;

&lt;/ul&gt;
&lt;/div&gt;

&lt;div class=&quot;sui-sidenav-hide-lg&quot;&gt;

Expand All @@ -138,17 +163,96 @@ <h1 class="sui-box-title">Section 3</h1>
&lt;/div&gt;

&lt;!-- SECTION: Tab 1 (Current) --&gt;
&lt;div class=&quot;sui-box&quot;&gt;...&lt;/div&gt;
&lt;div
id=&quot;tab-1-controls&quot;
class=&quot;sui-box active&quot;
role=&quot;tabpanel&quot;
tabindex=&quot;0&quot;
aria-labelledby=&quot;tab-1&quot;
&gt;
...
&lt;/div&gt;

&lt;!-- SECTION: Tab 2 --&gt;
&lt;div class=&quot;sui-box&quot; style=&quot;display: none;&quot;&gt;...&lt;/div&gt;
&lt;div
id=&quot;tab-2-controls&quot;
class=&quot;sui-box&quot;
role=&quot;tabpanel&quot;
tabindex=&quot;0&quot;
aria-labelledby=&quot;tab-2&quot;
&gt;
...
&lt;/div&gt;

&lt;!-- SECTION: Tab 3 --&gt;
&lt;div class=&quot;sui-box&quot; style=&quot;display: none;&quot;&gt;...&lt;/div&gt;
&lt;div
id=&quot;tab-3-controls&quot;
class=&quot;sui-box&quot;
role=&quot;tabpanel&quot;
tabindex=&quot;0&quot;
aria-labelledby=&quot;tab-3&quot;
&gt;
...
&lt;/div&gt;

&lt;/section&gt;
</pre>

</div>

</div>

</div>

<!-- ROW: Advanced Usage -->
<div class="sui-box-settings-row">

<div class="sui-box-settings-col-1">
<span class="sui-settings-label">Advanced Usage</span>
</div>

<div class="sui-box-settings-col-2">

<div class="demo-code-block">

<pre class="sui-code-snippet js">
SUI.tabs({
callback: function( tab, panel ) {
console.log( tab );
console.log( panel );
}
});
</pre>

</div>

<p><code>callback</code></p>

<p>It's an anonymous function that will run when you click a tab. You will have access to the clicked <code>tab</code> and the respective <code>panel (tab content)</code>.</p>

<p>To get all tabs within the group you can do this inside the anonymous function:</p>

<div class="demo-code-block">

<pre class="sui-code-snippet js">
var wrapper = tab.closest( '.sui-row-with-sidenav' ),
tablist = tab.closest( '[role=&quot;tablist&quot;]' ),
tabs = tablist.find( '> .sui-tab-item' ),
panels = wrapper.find( '> .sui-tabs-content > [role=&quot;tabpanel&quot;]' )
;

console.log( tabs );
console.log( panels );
</pre>

</div>

</div>

</div>

</div>

</div>

</section>