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 deborah.
diffs (301 lines):
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;
+}
_______________________________________________
dw-changelog mailing list
[email protected]
http://lists.dwscoalition.org/mailman/listinfo/dw-changelog
