mirror of
https://github.com/jdan/98.css.git
synced 2025-03-14 15:49:57 +01:00
Added aria-label to class selectors
This commit is contained in:
parent
46f66b6be7
commit
fa4d29523c
@ -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><button></code>. Input elements require labels. Icon buttons rely on
|
||||
<code>aria-label</code> (or corresponding styling classes). This page will guide you through that process, but accessibility is a primary
|
||||
<code>aria-label</code>. This page will guide you through that process, but accessibility is a primary
|
||||
goal of this project.
|
||||
</p>
|
||||
|
||||
@ -623,9 +623,9 @@
|
||||
<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>
|
||||
<button aria-label="Any Text" class="minimize"></button>
|
||||
<button aria-label="Any Text" class="maximize"></button>
|
||||
<button aria-label="Any Text" class="close"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -634,9 +634,9 @@
|
||||
<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>
|
||||
<button aria-label="Any Text" class="minimize"></button>
|
||||
<button aria-label="Any Text" class="restore"></button>
|
||||
<button aria-label="Any Text" class="close"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -645,8 +645,8 @@
|
||||
<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>
|
||||
<button aria-label="Any Text" class="help"></button>
|
||||
<button aria-label="Any Text" class="close"></button>
|
||||
</div>
|
||||
</div>
|
||||
`) %>
|
||||
|
10
style.css
10
style.css
@ -255,35 +255,35 @@ input[type="reset"]:disabled,
|
||||
}
|
||||
|
||||
.title-bar-controls button[aria-label="Minimize"],
|
||||
.title-bar-controls button.minimize {
|
||||
.title-bar-controls button[aria-label].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.maximize {
|
||||
.title-bar-controls button[aria-label].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.restore {
|
||||
.title-bar-controls button[aria-label].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.help {
|
||||
.title-bar-controls button[aria-label].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.close {
|
||||
.title-bar-controls button[aria-label].close {
|
||||
margin-left: 2px;
|
||||
background-image: svg-load("./icon/close.svg");
|
||||
background-repeat: no-repeat;
|
||||
|
Loading…
x
Reference in New Issue
Block a user