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

Use aria-label for close/resize buttons

Browse Source 
add it where the buttons are currently unlabelled, remove the hidden `<span>` for those that have that - `aria-label` is more solid/consistent choice
This commit is contained in:
Patrick H. Lauke
2022-08-12 10:19:23 +01:00
parent 84e4993ed3
commit e12c8b0593
2 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/index.html.ejs
View File

@@ -17,9 +17,9 @@
<aside>
<div class="window">
<div class="title-bar">
<button class="close"><span class="hidden">Close</span></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">Docs</h1>
<button class="resize"><span class="hidden">Resize</span></button>
<button aria-label="Resize" class="resize"></button>
</div>
<div class="separator"></div>
<div class="window-pane">
@@ -331,9 +331,9 @@
<div class="window">
<div class="title-bar">
<button class="close"></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">A Title Bar</h1>
<button class="hidden"></button>
<button aria-label="Resize" disabled class="hidden"></button>
</div>
</div>
@@ -345,9 +345,9 @@
<div class="window">
<div class="title-bar">
<button class="close"></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">Also a Title Bar</h1>
<button class="resize"></button>
<button aria-label="Resize" class="resize"></button>
</div>
</div>
@@ -393,9 +393,9 @@
<div class="window">
<div class="title-bar">
<button class="close"></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">Window Without Stuff</h1>
<button class="resize"></button>
<button aria-label="Resize" class="resize"></button>
</div>
</div>
@@ -408,9 +408,9 @@
<div class="window">
<div class="title-bar">
<button class="close"></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">Window With Stuff</h1>
<button class="resize"></button>
<button aria-label="Resize" class="resize"></button>
</div>
<div class="separator"></div>
@@ -429,9 +429,9 @@
<div class="window">
<div class="title-bar">
<button class="close"></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">Window With Details</h1>
<button class="resize"></button>
<button aria-label="Resize" class="resize"></button>
</div>
<div class="details-bar">
<span>some</span>
@@ -500,9 +500,9 @@
<%- example(`
<div class="window" style="width:30rem;">
<div class="title-bar">
<button class="close"></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">Modeless Dialog</h1>
<button class="hidden"></button>
<button aria-label="Resize" disabled class="hidden"></button>
</div>
<div class="separator"></div>