davejansen/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2026-05-05 06:01:22 +09:00
Code Issues Activity

Add class alts for aria-labels

Browse Source 
Fixes #91
This commit is contained in:
Vincent Langlois
2024-01-21 11:16:50 -05:00
parent 09f403c086
commit 46f66b6be7
2 changed files with 48 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/index.html.ejs
View File

@@ -94,7 +94,7 @@
<p>
This library relies on the usage of <strong>semantic HTML</strong>. To make a button, you'll need
to use a <code>&lt;button&gt;</code>. Input elements require labels. Icon buttons rely on
<code>aria-label</code>. This page will guide you through that process, but accessibility is a primary
<code>aria-label</code> (or corresponding styling classes). This page will guide you through that process, but accessibility is a primary
goal of this project.
</p>
@@ -613,6 +613,43 @@
</div>
</div>
`) %>
<p>
Each <code>aria-label</code> also has a corresponding styling class to render the title bar buttons,
to let the <code>aria-label</code> text be in other languages without causing rendering, accessibility, or localization issues.
</p>
<%- example(`
<div class="title-bar">
<div class="title-bar-text">A Title Bar using Button Styling Classes</div>
<div class="title-bar-controls">
<button class="minimize"></button>
<button class="maximize"></button>
<button class="close"></button>
</div>
</div>
<br />
<div class="title-bar">
<div class="title-bar-text">A Maximized Title Bar using Button Styling Classes</div>
<div class="title-bar-controls">
<button class="minimize"></button>
<button class="restore"></button>
<button class="close"></button>
</div>
</div>
<br />
<div class="title-bar">
<div class="title-bar-text">A Helpful Bar using Button Styling Classes</div>
<div class="title-bar-controls">
<button class="help"></button>
<button class="close"></button>
</div>
</div>
`) %>
<p>
You can make a title bar "inactive" by adding <code>inactive</code> class,
useful when making more than one window.

15
style.css
View File

@@ -254,31 +254,36 @@ input[type="reset"]:disabled,
outline: none;
}
.title-bar-controls button[aria-label="Minimize"] {
.title-bar-controls button[aria-label="Minimize"],
.title-bar-controls button.minimize {
background-image: svg-load("./icon/minimize.svg");
background-repeat: no-repeat;
background-position: bottom 3px left 4px;
}
.title-bar-controls button[aria-label="Maximize"] {
.title-bar-controls button[aria-label="Maximize"],
.title-bar-controls button.maximize {
background-image: svg-load("./icon/maximize.svg");
background-repeat: no-repeat;
background-position: top 2px left 3px;
}
.title-bar-controls button[aria-label="Restore"] {
.title-bar-controls button[aria-label="Restore"],
.title-bar-controls button.restore {
background-image: svg-load("./icon/restore.svg");
background-repeat: no-repeat;
background-position: top 2px left 3px;
}
.title-bar-controls button[aria-label="Help"] {
.title-bar-controls button[aria-label="Help"],
.title-bar-controls button.help {
background-image: svg-load("./icon/help.svg");
background-repeat: no-repeat;
background-position: top 2px left 5px;
}
.title-bar-controls button[aria-label="Close"] {
.title-bar-controls button[aria-label="Close"],
.title-bar-controls button.close {
margin-left: 2px;
background-image: svg-load("./icon/close.svg");
background-repeat: no-repeat;