From 46f66b6be758acef29be0ec5a06f1948531e35f0 Mon Sep 17 00:00:00 2001 From: Vincent Langlois Date: Sun, 21 Jan 2024 11:16:50 -0500 Subject: [PATCH 1/2] Add `class` alts for `aria-labels` Fixes #91 --- docs/index.html.ejs | 39 ++++++++++++++++++++++++++++++++++++++- style.css | 15 ++++++++++----- 2 files changed, 48 insertions(+), 6 deletions(-) diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 253ba57..32f2c3c 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -94,7 +94,7 @@

This library relies on the usage of semantic HTML. To make a button, you'll need to use a <button>. Input elements require labels. Icon buttons rely on - aria-label. This page will guide you through that process, but accessibility is a primary + aria-label (or corresponding styling classes). This page will guide you through that process, but accessibility is a primary goal of this project.

@@ -613,6 +613,43 @@ `) %> + +

+ Each aria-label also has a corresponding styling class to render the title bar buttons, + to let the aria-label text be in other languages without causing rendering, accessibility, or localization issues. +

+ + <%- example(` +
+
A Title Bar using Button Styling Classes
+
+ + + +
+
+ +
+ +
+
A Maximized Title Bar using Button Styling Classes
+
+ + + +
+
+ +
+ +
+
A Helpful Bar using Button Styling Classes
+
+ + +
+
+ `) %>

You can make a title bar "inactive" by adding inactive class, useful when making more than one window. diff --git a/style.css b/style.css index 9d50c03..bf8f8f1 100644 --- a/style.css +++ b/style.css @@ -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; From fa4d29523cd4019a785c4b1a03b626c47543e7cb Mon Sep 17 00:00:00 2001 From: Vincent Langlois Date: Sat, 27 Jan 2024 12:36:10 -0500 Subject: [PATCH 2/2] Added aria-label to class selectors --- docs/index.html.ejs | 18 +++++++++--------- style.css | 10 +++++----- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 32f2c3c..705ec4a 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -94,7 +94,7 @@

This library relies on the usage of semantic HTML. To make a button, you'll need to use a <button>. Input elements require labels. Icon buttons rely on - aria-label (or corresponding styling classes). This page will guide you through that process, but accessibility is a primary + aria-label. This page will guide you through that process, but accessibility is a primary goal of this project.

@@ -623,9 +623,9 @@
A Title Bar using Button Styling Classes
- - - + + +
@@ -634,9 +634,9 @@
A Maximized Title Bar using Button Styling Classes
- - - + + +
@@ -645,8 +645,8 @@
A Helpful Bar using Button Styling Classes
- - + +
`) %> diff --git a/style.css b/style.css index bf8f8f1..274ef95 100644 --- a/style.css +++ b/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;