kareila: (Default)
kareila ([personal profile] kareila) wrote in [site community profile] changelog2010-06-28 07:44 pm
  • Add Memory
  • Share This Entry

[dw-free] Additional elements should be wrapped in a heading tag

[commit: http://hg.dwscoalition.org/dw-free/rev/f0bd271ee863]

http://bugs.dwscoalition.org/show_bug.cgi?id=989

Make comment subjects more accessible for screenreaders, by wrapping them
in h4 tags, using title attributes, and printing invisible default subject
text where needed.

Patch by [personal profile] deborah.

Files modified:
  • bin/upgrading/s2layers/bases/layout.s2
  • bin/upgrading/s2layers/blanket/layout.s2
  • bin/upgrading/s2layers/brittle/layout.s2
  • bin/upgrading/s2layers/core2.s2
  • bin/upgrading/s2layers/core2base/layout.s2
  • bin/upgrading/s2layers/drifting/layout.s2
  • bin/upgrading/s2layers/easyread/layout.s2
  • bin/upgrading/s2layers/negatives/layout.s2
  • bin/upgrading/s2layers/skittlishdreams/layout.s2
  • bin/upgrading/s2layers/zesty/layout.s2
  • cgi-bin/LJ/S2.pm
  • htdocs/stc/lj_base.css
--------------------------------------------------------------------------------
diff -r bdd4abb0184b -r f0bd271ee863 bin/upgrading/s2layers/bases/layout.s2
--- a/bin/upgrading/s2layers/bases/layout.s2	Mon Jun 28 12:01:53 2010 -0500
+++ b/bin/upgrading/s2layers/bases/layout.s2	Mon Jun 28 14:44:37 2010 -0500
@@ -622,6 +622,13 @@ li.first-item {margin-left: 0;}
 .comment-title {font-size: normal 1.5em; padding: 0.5em; }
 .comment-title a {display: block; }
 
+.comment-title h4 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: inherit;
+    padding: inherit;
+}
+
 .comment .datetime { border-top: 0.083em solid $*color_entry_border;}
 .comment-poster, .poster-ip {border-bottom: 0.083em solid $*color_entry_border; display: block; padding: 0 0.5em 0 0.5em; }
 
diff -r bdd4abb0184b -r f0bd271ee863 bin/upgrading/s2layers/blanket/layout.s2
--- a/bin/upgrading/s2layers/blanket/layout.s2	Mon Jun 28 12:01:53 2010 -0500
+++ b/bin/upgrading/s2layers/blanket/layout.s2	Mon Jun 28 14:44:37 2010 -0500
@@ -371,6 +371,14 @@ ul.entry-interaction-links li { display:
 ul.entry-interaction-links li { display: inline; list-style: none; font-size: 0.9em; font-weight: normal; text-transform: uppercase; letter-spacing: 0; padding: 0 5px 0 0; $page_title_colors }
 
 /*--- comments ---*/
+
+.comment-title h4 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: inherit;
+    padding: inherit;
+}
+
 hr.above-entry-interaction-links, hr.below-reply-container { display: none; }
 
 input, textarea { padding: 5px; font: 1em Helvetica, Arial, 'Arial Narrow', sans-serif; line-height: 1.8em; $input_colors }
diff -r bdd4abb0184b -r f0bd271ee863 bin/upgrading/s2layers/brittle/layout.s2
--- a/bin/upgrading/s2layers/brittle/layout.s2	Mon Jun 28 12:01:53 2010 -0500
+++ b/bin/upgrading/s2layers/brittle/layout.s2	Mon Jun 28 14:44:37 2010 -0500
@@ -642,6 +642,13 @@ td.day {
 
 /*--- comments ---*/
 
+.comment-title h4 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: inherit;
+    padding: inherit;
+}
+
 #comments { $entry_font }
 
 hr.above-entry-interaction-links, hr.below-reply-container { display: none; }
diff -r bdd4abb0184b -r f0bd271ee863 bin/upgrading/s2layers/core2.s2
--- a/bin/upgrading/s2layers/core2.s2	Mon Jun 28 12:01:53 2010 -0500
+++ b/bin/upgrading/s2layers/core2.s2	Mon Jun 28 14:44:37 2010 -0500
@@ -2445,6 +2445,14 @@ property string text_nosubject {
     note = "This only appears in places where a subject line is required, such as on a month view.";
 }
 
+property string text_nosubject_screenreader {
+    des = "Text to replace a subject line in screenreaders when no subject is specified";
+    maxlength = 20;
+    size = 10;
+    example = "No Subject";
+    note = "This only is visible to screenreaders or with CSS disabled. Do not set this to empty.";
+}
+
 property string text_calendar_num_entries {
     des = "Text to show how many entries were made on a particular day";
     format = "plurals";
@@ -2459,6 +2467,7 @@ set text_layout_resources = "Resources:"
 set text_layout_resources = "Resources:";
 set text_posting_in = " posting in ";
 set text_nosubject = "(no subject)";
+set text_nosubject_screenreader = "no subject";
 set text_calendar_num_entries = "1 entry // # entries";
 
 property bool all_entrysubjects {
@@ -4289,7 +4298,7 @@ function EntryLite::print_subject( strin
 function EntryLite::print_subject( string{} opts ) [fixed] {
     if ($this isa Comment) {
         var Comment c = $this as Comment;
-        """<div class="comment-title">""";
+        """<div class="comment-title"><h4>""";
         if ($c.screened) {
             print $*text_screened;
         }
@@ -4297,7 +4306,7 @@ function EntryLite::print_subject( strin
             print $*text_frozen;
         }
         print $this->formatted_subject( $opts );
-        "</div>";
+        "</h4></div>";
     }
     else {
         if ($this isa StickyEntry) {
diff -r bdd4abb0184b -r f0bd271ee863 bin/upgrading/s2layers/core2base/layout.s2
--- a/bin/upgrading/s2layers/core2base/layout.s2	Mon Jun 28 12:01:53 2010 -0500
+++ b/bin/upgrading/s2layers/core2base/layout.s2	Mon Jun 28 14:44:37 2010 -0500
@@ -564,6 +564,13 @@ ul.entry-interaction-links li {
     $comment_title_colors
 }
 
+.comment-title h4 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: inherit;
+    padding: inherit;
+}
+
 ul.comment-management-links {
     list-style: none;
     margin-left: 0;
diff -r bdd4abb0184b -r f0bd271ee863 bin/upgrading/s2layers/drifting/layout.s2
--- a/bin/upgrading/s2layers/drifting/layout.s2	Mon Jun 28 12:01:53 2010 -0500
+++ b/bin/upgrading/s2layers/drifting/layout.s2	Mon Jun 28 14:44:37 2010 -0500
@@ -731,6 +731,13 @@ function Page::print_default_stylesheet(
         border-bottom: 1px solid $*color_entry_border;
     }
 
+    .comment-title h4 {
+        font-size: inherit;
+        font-weight: inherit;
+        margin: inherit;
+        padding: inherit;
+    }
+
     .comment .subject {
         border: 1px solid $*color_entry_border;
         border-left: none;
diff -r bdd4abb0184b -r f0bd271ee863 bin/upgrading/s2layers/easyread/layout.s2
--- a/bin/upgrading/s2layers/easyread/layout.s2	Mon Jun 28 12:01:53 2010 -0500
+++ b/bin/upgrading/s2layers/easyread/layout.s2	Mon Jun 28 14:44:37 2010 -0500
@@ -484,6 +484,13 @@ h2.module-header a {
     position: relative;
 }
 
+.comment-title h4 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: inherit;
+    padding: inherit;
+}
+
 /* Entry header */
 #primary .header {
     position: relative;
diff -r bdd4abb0184b -r f0bd271ee863 bin/upgrading/s2layers/negatives/layout.s2
--- a/bin/upgrading/s2layers/negatives/layout.s2	Mon Jun 28 12:01:53 2010 -0500
+++ b/bin/upgrading/s2layers/negatives/layout.s2	Mon Jun 28 14:44:37 2010 -0500
@@ -460,6 +460,13 @@ function Page::print_default_stylesheet(
     }
     .comment-wrapper.partial , .partial .comment { 
         min-height: 0;
+    }
+
+    .comment-title h4 {
+        font-size: inherit;
+        font-weight: inherit;
+        margin: inherit;
+        padding: inherit;
     }
     .partial .comment-title {
         display: inline;
diff -r bdd4abb0184b -r f0bd271ee863 bin/upgrading/s2layers/skittlishdreams/layout.s2
--- a/bin/upgrading/s2layers/skittlishdreams/layout.s2	Mon Jun 28 12:01:53 2010 -0500
+++ b/bin/upgrading/s2layers/skittlishdreams/layout.s2	Mon Jun 28 14:44:37 2010 -0500
@@ -565,6 +565,13 @@ h1, h2, h3, h4 {font-weight: 700; font-v
 .page-entry .entry, .page-entry .comment, .page-entry .text_noentries_day {border:0px;}
 .page-entry #comments {padding-top:20px;}
 
+.comment-title h4 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: inherit;
+    padding: inherit;
+}
+
 .entry-title, .comment-title {margin:0 120px .5em 0; padding: 0.2em;border: solid 1px $*color_entry_title_border; $entry_title_colors }
 
 .entry .entry-title {
diff -r bdd4abb0184b -r f0bd271ee863 bin/upgrading/s2layers/zesty/layout.s2
--- a/bin/upgrading/s2layers/zesty/layout.s2	Mon Jun 28 12:01:53 2010 -0500
+++ b/bin/upgrading/s2layers/zesty/layout.s2	Mon Jun 28 14:44:37 2010 -0500
@@ -725,6 +725,13 @@ h3 {
 
 /* shared entry and comments */
 
+.comment-title h4 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: inherit;
+    padding: inherit;
+}
+
 .tools {
     text-align: center;
     padding: 10px;
diff -r bdd4abb0184b -r f0bd271ee863 cgi-bin/LJ/S2.pm
--- a/cgi-bin/LJ/S2.pm	Mon Jun 28 12:01:53 2010 -0500
+++ b/cgi-bin/LJ/S2.pm	Mon Jun 28 14:44:37 2010 -0500
@@ -3629,40 +3629,41 @@ sub EntryLite__formatted_subject {
     my ($ctx, $this, $attrs) = @_;
     my $subject = $this->{subject};
 
+    # Figure out what subject to show. Even if the settings are configured
+    # to show nothing for entries or comments without subjects, there should
+    # always be at a minimum a hidden visibility subject line for screenreaders.
+    my $set_subject = sub {
+        my ( $all_subs, $always ) = @_;
+        return unless $subject eq "";  # no subject
+
+        my $text_nosubject = $ctx->[S2::PROPS]->{text_nosubject};
+        if ( $text_nosubject ne "" ) {
+            # if text_nosubject is set, use it as the subject if
+            # all_entrysubjects/all_commentsubjects is true,
+            # or if we're in the month view for entries,
+            # or if we're in the collapsed view for comments
+
+            $subject = $text_nosubject
+                if $ctx->[S2::PROPS]->{$all_subs} || $always;
+
+        }
+        if ( $subject eq "" ) {
+            # still no subject, so use hidden text_nosubject_screenreader
+            $subject = $ctx->[S2::PROPS]->{text_nosubject_screenreader};
+            $attrs->{class} .= " invisible";
+        }
+    };
+
+    # Leave the subject as is if it exists. Otherwise, determine what to show.
     if ( $this->{_type} eq 'Entry' || $this->{_type} eq 'StickyEntry' ) {
-        # if an entry does not have a subject, and text_nosubject is not set, return nothing
-        return if $subject eq ""  && $ctx->[S2::PROPS]->{text_nosubject} eq "";
-
-        # if an entry does not have a subject, text_nosubject is set, and all_entrysubjects, then use text_nosubject as the subject
-        $subject = $ctx->[S2::PROPS]->{text_nosubject}
-            if $subject eq ""
-                && $ctx->[S2::PROPS]->{text_nosubject} ne ""
-                && $ctx->[S2::PROPS]->{all_entrysubjects};
-
-        # if an entry does not have a subject, text_nosubject is set, and all_entrysubjects is false, then only return the formatted subject with text_nosubject on the month view
-        $subject = $ctx->[S2::PROPS]->{text_nosubject}
-            if $subject eq ""
-                && $ctx->[S2::PROPS]->{text_nosubject} ne ""
-                && ! $ctx->[S2::PROPS]->{all_entrysubjects}
-                && $LJ::S2::CURR_PAGE->{view} eq 'month';
+
+        $set_subject->( 'all_entrysubjects', $LJ::S2::CURR_PAGE->{view} eq 'month' );
 
     } elsif ( $this->{_type} eq "Comment" ) {
-        if ( $this->{full} ) {
-            # if a comment does not have a subject, and all_commentsubjects is false, then return nothing
-            return if $subject eq "" && $ctx->[S2::PROPS]->{all_commentsubjects} eq "";
-
-            # if a comment does not have a subject, text_nosubject is set, and all_commentsubjects is true,
-            # then return the formatted subject with text_nosubject
-            $subject = $ctx->[S2::PROPS]->{text_nosubject}
-                if $subject eq ""
-                    && $ctx->[S2::PROPS]->{text_nosubject} ne ""
-                    && $ctx->[S2::PROPS]->{all_commentsubjects};
-        } else {
-            # if collapsed, always show a subject
-            $subject ||= $ctx->[S2::PROPS]->{text_nosubject};
-        }
-    }
-
+
+        $set_subject->( 'all_commentsubjects', ! $this->{full} );
+
+    }
 
     # display subject as-is (cleaned but not wrapped in a link)
     # if subject has a link and we are on a full comment/single entry view and don't need to click through
@@ -3675,7 +3676,12 @@ sub EntryLite__formatted_subject {
         my $class = $attrs->{class} ? " class=\"" . LJ::ehtml( $attrs->{class} ) . "\" " : '';
         my $style = $attrs->{style} ? " style=\"" . LJ::ehtml( $attrs->{style} ) . "\" " : '';
 
-        return "<a href=\"$this->{permalink_url}\"$class$style>$subject</a>";
+        # additional cleaning for title attribute, necessary to enable
+        # screenreaders to see the names of the invisible links
+        my $title = $subject;
+        LJ::CleanHTML::clean_subject_all( \$title );
+
+        return "<a title=\"$title\" href=\"$this->{permalink_url}\"$class$style>$subject</a>";
     }
 }
 
diff -r bdd4abb0184b -r f0bd271ee863 htdocs/stc/lj_base.css
--- a/htdocs/stc/lj_base.css	Mon Jun 28 12:01:53 2010 -0500
+++ b/htdocs/stc/lj_base.css	Mon Jun 28 14:44:37 2010 -0500
@@ -157,3 +157,9 @@ div.lj_ippu_titlebar {
 .example {
     vertical-align: top;
 }
+
+.invisible {
+    position:absolute;
+    left:-10000px;
+    top:auto;
+}
--------------------------------------------------------------------------------
  • Add Memory
  • Share This Entry
(0 comments)

Post a comment in response:

This account has disabled anonymous posting.
If you don't have an account you can create one now.
HTML doesn't work in the subject.
More info about formatting

If you are unable to use this captcha for any reason, please contact us by email at support@dreamwidth.org

 
Notice: This account is set to log the IP addresses of everyone who comments.
Links will be displayed as unclickable URLs to help prevent spam.