TPAC: Slightly more accessible user-visible account notes display

Rather than a table layout that resembles an unordered list, use a real
table with table header so that screen readers will know what to
associate each column with.

Also, move the table display into its own class so that we don't pick up
the uppercase transform, and move it out of the div box so that we can
use whatever screen real estate is given to us, rather than forcing
notes into the hard-coded 662px box.

Signed-off-by: Dan Scott <dscott@laurentian.ca>
Signed-off-by: Bill Erickson <berick@esilibrary.com>

diff --git a/Open-ILS/src/templates/opac/parts/myopac/main_base.tt2 b/Open-ILS/src/templates/opac/parts/myopac/main_base.tt2
index 922b783..02c1509 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/myopac/main_base.tt2
+++ b/Open-ILS/src/templates/opac/parts/myopac/main_base.tt2
@@ -82,18 +82,21 @@
                 </table>
             </div>
 
-            [% IF ctx.user.notes.0 %]
-            <div class="acct_sum_row">
-                <table>
-                [% FOR note IN ctx.user.notes %]
-                    <tr><td class='public-note-title'>[% l('* [_1]: ', note.title) | html %]</td><td>[% note.value | html %]</td></tr>
-                [% END %]
-                </table>
-            </div>
-            [% END %]
         </div>
     </div>
     <div class="clear-both"></div>
+
+    [% IF ctx.user.notes.0 %]
+    <table class="acct_notes">
+        <thead><th>[% l('Note title') %]</th><th>[% l('Content') %]</th></thead>
+        <tbody>
+        [% FOR note IN ctx.user.notes %]
+            <tr><td class='public-note-title'>[% note.title | html %]</td><td>[% note.value | html %]</td></tr>
+        [% END %]
+        </tbody>
+    </table>
+    [% END %]
+
     <div id='fines_payments_wrapper'>
         <div id='acct_fines_tabs'>
             [% IF myopac_main_page == 'main' %]

diff --git a/Open-ILS/web/css/skin/default/opac/style.css b/Open-ILS/web/css/skin/default/opac/style.css
index b9faf63..f68a101 100644 (file)
--- a/Open-ILS/web/css/skin/default/opac/style.css
+++ b/Open-ILS/web/css/skin/default/opac/style.css
@@ -878,6 +878,20 @@ div.result_place_hold {
        font-size:12px;
 }
 
+table.acct_notes {
+    border-collapse: collapse;
+    margin: -1em 0 0.5em 0;
+}
+
+table.acct_notes * {
+    border: solid thin;
+    padding: 0.5em; 
+}
+
+table.acct_notes th {
+    font-weight: bold;
+}
+
 #myopac_sum_fines {
        float:right;
        padding: 15px 0px 0px 23px;