add screen-reader-only callout type when appropriate (#726)

Author: cscheid

src/resources/filters/modules/callouts.lua

@@ -191,6 +191,11 @@ local calloutidx = 1
 local function calloutDiv(node)
   node = decorate_callout_title_with_crossref(node)
 
+  local needs_screen_reader_callout_type = true
+  if is_valid_ref_type(refType(node.attr.identifier)) then
+    needs_screen_reader_callout_type = false
+  end
+
   -- the first heading is the title
   local div = pandoc.Div({})
   local c = quarto.utils.as_blocks(node.content)
@@ -218,6 +223,7 @@ local function calloutDiv(node)
 
   if calloutAppearance == _quarto.modules.constants.kCalloutAppearanceDefault and pandoc.utils.stringify(title) == "" and not found then
     title = quarto.utils.as_inlines(pandoc.Plain(displayName(node.type)))
+    needs_screen_reader_callout_type = false
   end
 
   -- Make an outer card div and transfer classes and id
@@ -262,6 +268,12 @@ local function calloutDiv(node)
   -- show a titled callout
   if title ~= nil and (pandoc.utils.type(title) == "string" or next(title) ~= nil) then
 
+    if needs_screen_reader_callout_type then
+      -- add a screen reader callout type
+      local srCalloutType = pandoc.Span(pandoc.Str(displayName(callout_type)))
+      srCalloutType.attr.classes:insert("screen-reader-only")
+      title:insert(1, srCalloutType)
+    end
     -- mark the callout as being titleed
     calloutDiv.attr.classes:insert("callout-titled")
 

src/resources/formats/html/bootstrap/_bootstrap-rules.scss

@@ -2192,3 +2192,15 @@ a {
   font-weight: $link-weight;
   text-decoration: $link-decoration;
 }
+
+// screen-reader-only, cf https://github.com/quarto-dev/quarto-cli/issues/726#issuecomment-1112486100
+.screen-reader-only {
+    position: absolute;
+    clip: rect(0 0 0 0);
+    border: 0;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    width: 1px;
+}