Merge pull request #1 from SalazarJosh/accessibility-updates

Accessibility updates
mlibrary · Jan 2, 2025 · 6a1644a · 6a1644a
2 parents b310f4d + 47149b3
commit 6a1644a
Show file tree

Hide file tree

Showing 14 changed files with 191 additions and 142 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,2 @@
 /vendor/
-/.env
+/.env
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ docker-compose up -d
 docker-compose run --rm --user "$(id -u):$(id -g)" web bash -c 'cd /var/www && composer install'
 
 # Optional:  Load data
-docker-compose exec -T db bash -c 'mysql -u "$MARIADB_USER" -p"$MARIADB_PASSWORD" "$MARIADB_DATABASE"' < data.sql
+docker-compose exec -T db bash -c 'mariadb -u"$MARIADB_USER" -p"$MARIADB_PASSWORD" "$MARIADB_DATABASE"' < data.sql
 
 
 ```
diff --git a/example.env b/example.env
@@ -15,4 +15,4 @@ MARIADB_PASSWORD=callnumber
 MARIADB_DATABASE=callnumber
 MARIADB_ROOT_PASSWORD=root
 # Uncomment to allow twig to cache templates
-#TWIG_CACHE=/var/cache/apache2/twig
+#TWIG_CACHE=/var/cache/apache2/twig
diff --git a/html/admin/hlb.css b/html/admin/hlb.css
@@ -31,14 +31,27 @@ div.lastcolumn {
 }
 
 span.navigation {
-    padding-left: 1em;
-    padding-right: 1em;
+    padding: .5rem 1rem;
     margin-left: 1em;
     margin-right: 1em;
+    display: inline-block;
 }
 
-span.active {
-    background-color: #aaa;
+.navigation{
+    border-bottom: 3px solid rgba(0,0,0,0);
+}
+
+.navigation > a{
+    text-decoration: none;
+    color: #000;
+}
+
+.active{
+    border-color: #1d7491;
+}
+
+.navigation:hover{
+    border-color: #1d7491;
 }
 
 span.browse_list {
@@ -146,7 +159,7 @@ img.mtag {
 }
 
 div.image {
-    padding-top: ;0px
+    padding-top: 0px;
     padding-bottom: 0px;
     margin-top: -20;
     margin-bottom: 0px;
@@ -196,14 +209,21 @@ table.assignments td, table.assignments th {
     width: 7em;
 }
 table.assignments td.light,table.assignments th.light {
-    background-color: #bbb;
+    background-color: #ddd;
 }
 table.assignments td.dark,table.assignments th.dark {
-    background-color: #777;
+    background-color: #bbb;
 }
 
 table.assignments td.wide, table.assignments th.wide {
     width: 15em;
-    background-color: #bbb;
+    background-color: #ddd;
+}
+
+td > a{
+    color: #106684;
 }
 
+.marginLeftHalf{
+    margin-left: .5rem;
+}
diff --git a/src/Hlb.php b/src/Hlb.php
@@ -91,7 +91,7 @@ private function subtree($id, $list) {
     foreach ($results as $r) {
       $str .= '<li>' ;
       $str .=  '<a href="index.php?narrow=' . htmlentities($r['id']) . '">' . htmlentities($r['name']) . '</a>'; 
-      $str .= '<form style="display: inline;" action="removeassociation.php" method="post"><input type="hidden" value="'.htmlentities($id).'" name="parent"><input type="hidden" value="'.htmlentities($r['id']).'" name="child"><input type="submit" value="Remove this association"></form>';
+      $str .= '<form style="display: inline;" action="removeassociation.php" method="post"><input type="hidden" value="'.htmlentities($id).'" name="parent"><input type="hidden" value="'.htmlentities($r['id']).'" name="child"><input type="submit" class="marginLeftHalf" value="Remove this association"></form>';
       if (array_search($r['id'],$list) === FALSE) {
         $str .= $this->subtree($r['id'], array_merge($list, array($r['id'])));
       } else {

diff --git a/templates/associate.twig b/templates/associate.twig
@@ -7,19 +7,19 @@
   <div>
     <form action="associate.php">
       <div>
-        <div class="widecolumn"> Child Topic:</div>
+        <div class="widecolumn"><label for="childTopic">Child Topic:</label></div>
         <div class="lastcolumn">
-          <select name="child">
+          <select name="child" id="childTopic">
             {% for topic in topics %}
               <option value="{{topic.id|e('html')}}">{{topic.name|e('html')}}</option>
             {% endfor %}
           </select>
         </div>
       </div>
       <div>
-        <div class="widecolumn">Associate With Parent:</div>
+        <div class="widecolumn"><label for="associateWithParent">Associate With Parent:</label></div>
         <div class="lastcolumn">
-          <select name="parent">
+          <select name="parent" id="associateWithParent">
             {% for topic in topics %}
               <option value="{{topic.id|e('html')}}">{{topic.name|e('html')}}</option>
             {% endfor %}

diff --git a/templates/category-search.twig b/templates/category-search.twig
@@ -5,8 +5,8 @@
   </div>
   <form action="modify.php">
     <div>
-      <div class="column">Topic:</div>
-      <div class="column"> <input type="text" name="search" value="{{ search|e('html') }}" /> </div>
+      <div class="column"><label for="searchForTopic">Topic:</label></div>
+      <div class="column"> <input type="text" name="search" value="{{ search|e('html') }}" id="searchForTopic"/> </div>
     </div>
     <div class="lastcolumn">
       <input type="submit" value="Search">

diff --git a/templates/create.twig b/templates/create.twig
@@ -5,13 +5,13 @@
   <div>
     <form action="newtopic.php">
       <div>
-        <div class="widecolumn">New Topic:</div>
-        <div class="lastcolumn"> <input type="text" name="name" /> </div>
+        <div class="widecolumn"><label for="newTopic">New Topic:</label></div>
+        <div class="lastcolumn"> <input type="text" name="name" id="newTopic" /> </div>
       </div>
       <div>
-        <div class="widecolumn">Associate With Existing Parent:</div>
+        <div class="widecolumn"><label for="associateWithExistingParent">Associate With Existing Parent:</label></div>
         <div class="lastcolumn">
-          <select name="parent">
+          <select name="parent" id="associateWithExistingParent">
             {% for topic in topics %}
               <option value="{{ topic.id|e('html') }}">{{ topic.name|e('html') }}</option>
             {% endfor %}

diff --git a/templates/dewey-search-form.twig b/templates/dewey-search-form.twig
@@ -2,15 +2,15 @@
   <h2>Look for Dewey Call Numbers with</h2>
   <form method="post" action="deweysearch.php">
     <div class="clear">
-      <div class="column"> +Number: </div>
+      <div class="column"> <label for="DeweyNumber">+Number:</label> </div>
       <div class="column">
         <select name="num_op">
           {% for option in options %}
             <option {% if option == num_op %} selected="selected"{% endif %}>{{ option|e('html') }}</option>
           {% endfor %}
         </select>
       </div>
-      <div class="column"> <input type="text" name="num" size="5" value="{{ num|e('html') }}"> </div>
+      <div class="column"> <input type="text" name="num" size="5" value="{{ num|e('html') }}" id="DeweyNumber"> </div>
       <div class="lastcolumn"> Required. (<strong>e.g., >= 800</strong>) </div>
     </div>
     <br />

diff --git a/templates/lc-search-form.twig b/templates/lc-search-form.twig
@@ -2,33 +2,33 @@
   <h2>Look for Library of Congress Call Numbers with</h2>
   <form method="post" action="lcsearch.php">
     <div class="clear">
-      <div class="column"> Alpha: </div>
+      <div class="column"> <label for="LCAlpha">Alpha:</label> </div>
       <div class="column"> &nbsp;</div>
-      <div class="column"> <input type="text" name="alpha" size="5" value="{{ alpha|e('html') }}"> </div>
+      <div class="column"> <input type="text" name="alpha" size="5" value="{{ alpha|e('html') }}" id="LCAlpha"> </div>
       <div class="lastcolumn"> <em>Required.</em> Use between one and three characters (<strong>e.g., "RC"</strong>) </div>
     </div>
     <div class="clear">
-      <div class="column"> +Number: </div>
+      <div class="column"> <label for="LCNumber">+Number:</label> </div>
       <div class="column">
-        <select name="num_op">
+        <select name="num_op" aria-label="comparison operator">
           {% for option in options %}
             <option{% if option == num_op %} selected="selected"{% endif %}>{{ option|e('html') }}</option>
           {% endfor %}
         </select>
       </div>
-      <div class="column"> <input type="text" name="num" size="5" value="{{ num|e('html') }}"> </div>
+      <div class="column"> <input type="text" name="num" size="5" value="{{ num|e('html') }}" id="LCNumber"> </div>
       <div class="lastcolumn"> Optional. (<strong>e.g., >= 350</strong>) </div>
     </div>
     <div class="clear">
-      <div class="column"> +Cut: </div>
+      <div class="column"> <label for="LCCut">+Cut:</label> </div>
       <div class="column">
-        <select name="cut_op">
+        <select name="cut_op" aria-label="comparison operator">
           {% for option in options %}
             <option{% if option == cut_op %} selected="selected"{% endif %}>{{ option|e('html') }}</option>
           {% endfor %}
         </select>
       </div>
-      <div class="column"> <input type="text" name="cut" size="5" value="{{ cut }}"> </div>
+      <div class="column"> <input type="text" name="cut" size="5" value="{{ cut }}" id="LCCut"> </div>
       <div class="lastcolumn"> Optional. One alpha followed by one or more numerals (<strong>e.g., >= N35</strong>) </div>
     </div>