Bug 12863 - News in OPAC: HTML broken with nested p tags and multiple thead in same...

This patch fixes broken HTML in OPAC news by replacing table display
with divs.

To test:

Create multiple news for OPAC
Validate with HTML validator or check source code
Result:
Error with nested p tags
Table header thead is repeated for every news (not allowed)
Bonus testing: Let a screen reader like NVDA read the news and try to
understand it with closed eyes.

Apply patch
Result:
No more HTML errors in news
Screen reader reads news properly

To style you can use classes newscontainer, newsitem, newsheader,
newsbody and newsfooter.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <Katrin.Fischer.83@web.de>
Works as described, passes tests and QA script.

Signed-off-by: Tomas Cohen Arazi <tomascohen@gmail.com>

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-main.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-main.tt
index 450506e..83835c7 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-main.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-main.tt
@@ -38,14 +38,14 @@
     [% END %]
 
         [% IF ( koha_news_count ) %]
-            <div id="news">
-                <table class="table table-bordered">
-                    [% FOREACH koha_new IN koha_news %]
-                        <thead><tr><th>[% koha_new.title %]</th></tr></thead>
-                        <tbody><tr><td><p>[% koha_new.new %]</p>
-                        <p class="newsfooter"><i>(published on [% koha_new.newdate %])</i></p></td></tr></tbody>
-                    [% END %]
-                </table>
+            <div id="news" class="newscontainer">
+                [% FOREACH koha_new IN koha_news %]
+                    <div class="newsitem">
+                        <h4 class="newsheader">[% koha_new.title %]</h4>
+                        <div class="newsbody">[% koha_new.new %]</div>
+                        <div class="newsfooter">(published on [% koha_new.newdate %])</div>
+                    </div>
+                [% END %]
             </div>
         [% END %]