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

Jump to bottom

Tablist Examples: Improve support for magnification #2625

Merged
merged 5 commits into from
Apr 10, 2023
Merged

Tablist Examples: Improve support for magnification #2625

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dc08861
changes CSS to use percentage of screen width for defining tab width …
jongund Feb 23, 2023
08dbc38
updated CSS
jongund Mar 2, 2023
f405a72
Merge branch 'main' into bugfix/issue-2284
jongund Mar 2, 2023
3a13253
Merge remote-tracking branch 'origin/main' into bugfix/issue-2284
mcking65 Mar 7, 2023
e2d369d
Apply suggestions from Andrea's code review
mcking65 Apr 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 7 additions & 3 deletions content/patterns/tabs/examples/css/tabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@
}

[role="tablist"] {
min-width: 550px;
min-width: 100%;
}

[role="tab"],
[role="tab"]:focus,
[role="tab"]:hover {
display: inline-block;
position: relative;
z-index: 2;
top: 2px;
Expand All @@ -18,10 +19,13 @@
border: 1px solid hsl(219deg 1% 72%);
border-bottom: 2px solid hsl(219deg 1% 72%);
border-radius: 5px 5px 0 0;
overflow: visible;
background: hsl(220deg 20% 94%);
outline: none;
font-weight: bold;
max-width: 22%;
overflow: hidden;
text-align: left;
cursor: pointer;
}

[role="tab"][aria-selected="true"] {
Expand Down Expand Up @@ -58,7 +62,7 @@
border-radius: 0 5px 5px;
background: hsl(220deg 43% 99%);
min-height: 10em;
min-width: 550px;
width: 100%;
overflow: auto;
}

Expand Down
5 changes: 4 additions & 1 deletion content/patterns/tabs/examples/tabs-automatic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ <h3 id="tablist-1">Danish Composers</h3>
<span class="focus">Ida da Fonseca</span>
</button>
<button id="tab-4" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-4" tabindex="-1">
<span class="focus">Peter Lange-Müller</span>
<span class="focus">Peter Müller</span>
</button>
</div>

Expand Down Expand Up @@ -123,6 +123,9 @@ <h2>Accessibility Features</h2>
</li>
</ul>
</li>
<li>
To ensure the tab content remains visible when the screen is magnified, the width of the tabs and tab panels are defined using a percentage of the screen width. As the page is magnified the height of the tab increases and the tab content re-flows to the new dimensions of the tab.
</li>
</ul>
</section>

Expand Down
8 changes: 6 additions & 2 deletions content/patterns/tabs/examples/tabs-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ <h3 id="tablist-1">Danish Composers</h3>
<span class="focus">Ida da Fonseca</span>
</button>
<button id="tab-4" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-4" tabindex="-1">
<span class="focus">Peter Lange-Müller</span>
<span class="focus">Peter Müller</span>
</button>
</div>

Expand Down Expand Up @@ -127,7 +127,11 @@ <h2>Accessibility Features</h2>
</li>
<li>
Note that since the first element in every <code>tabpanel</code> is a focusable element (i.e., a link), the <code>tabpanel</code> is <strong>not</strong> included in the page <kbd>Tab</kbd> sequence.
To make it easy for screen reader users to navigate from a tab to the beginning of content in the active <code>tabpanel</code>, it is recommended that all <code>tabpanel</code> elements in a tab set are focusable if there are any panels in the set that contain content where the first element in the panel is not focusable.</li>
To make it easy for screen reader users to navigate from a tab to the beginning of content in the active <code>tabpanel</code>, it is recommended that all <code>tabpanel</code> elements in a tab set are focusable if there are any panels in the set that contain content where the first element in the panel is not focusable.
</li>
<li>
To ensure the tab content remains visible when the screen is magnified, the width of the tabs and tab panels are defined using a percentage of the screen width. As the page is magnified the height of the tab increases and the tab content re-flows to the new dimensions of the tab.
</li>
</ul>
</section>

Expand Down