errilaz/98se.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added aria-label to class selectors

Browse source
This commit is contained in:
Vincent Langlois 2024-01-27 12:36:10 -05:00
parent 46f66b6be7
commit fa4d29523c
2 changed files with 14 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

18
docs/index.html.ejs
View file

@ -94,7 +94,7 @@
<p> <p>
This library relies on the usage of <strong>semantic HTML</strong>. To make a button, you'll need 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 to use a <code>&lt;button&gt;</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. goal of this project.
</p> </p>
@ -623,9 +623,9 @@
<div class="title-bar"> <div class="title-bar">
<div class="title-bar-text">A Title Bar using Button Styling Classes</div> <div class="title-bar-text">A Title Bar using Button Styling Classes</div>
<div class="title-bar-controls"> <div class="title-bar-controls">
<button class="minimize"></button> <button aria-label="Any Text" class="minimize"></button>
<button class="maximize"></button> <button aria-label="Any Text" class="maximize"></button>
<button class="close"></button> <button aria-label="Any Text" class="close"></button>
</div> </div>
</div> </div>
@ -634,9 +634,9 @@
<div class="title-bar"> <div class="title-bar">
<div class="title-bar-text">A Maximized Title Bar using Button Styling Classes</div> <div class="title-bar-text">A Maximized Title Bar using Button Styling Classes</div>
<div class="title-bar-controls"> <div class="title-bar-controls">
<button class="minimize"></button> <button aria-label="Any Text" class="minimize"></button>
<button class="restore"></button> <button aria-label="Any Text" class="restore"></button>
<button class="close"></button> <button aria-label="Any Text" class="close"></button>
</div> </div>
</div> </div>
@ -645,8 +645,8 @@
<div class="title-bar"> <div class="title-bar">
<div class="title-bar-text">A Helpful Bar using Button Styling Classes</div> <div class="title-bar-text">A Helpful Bar using Button Styling Classes</div>
<div class="title-bar-controls"> <div class="title-bar-controls">
<button class="help"></button> <button aria-label="Any Text" class="help"></button>
<button class="close"></button> <button aria-label="Any Text" class="close"></button>
</div> </div>
</div> </div>
`) %> `) %>

10
style.css
View file

@ -255,35 +255,35 @@ input[type="reset"]:disabled,
} }
.title-bar-controls button[aria-label="Minimize"], .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-image: svg-load("./icon/minimize.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom 3px left 4px; 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 { .title-bar-controls button[aria-label].maximize {
background-image: svg-load("./icon/maximize.svg"); background-image: svg-load("./icon/maximize.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top 2px left 3px; 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 { .title-bar-controls button[aria-label].restore {
background-image: svg-load("./icon/restore.svg"); background-image: svg-load("./icon/restore.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top 2px left 3px; 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 { .title-bar-controls button[aria-label].help {
background-image: svg-load("./icon/help.svg"); background-image: svg-load("./icon/help.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top 2px left 5px; 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 { .title-bar-controls button[aria-label].close {
margin-left: 2px; margin-left: 2px;
background-image: svg-load("./icon/close.svg"); background-image: svg-load("./icon/close.svg");
background-repeat: no-repeat; background-repeat: no-repeat;