feat: screen reader-only utility class (#760)

* feat: screen-reader only class

* fix: move screen reader class to calendar, fix docs

* fix: remove from helpers

* fix: reference images

* fix: ref images

src/calendar.scss

@@ -300,6 +300,10 @@ $fd-calendar-special-days: (
     &--months {
       padding-top: $fd-calendar-item-helper-height;
     }
+
+    &--screen-reader-only {
+      @include fd-screen-reader-only();
+    }
   }
 
   &__table {

src/mixins/_mixins.scss

@@ -369,3 +369,15 @@
   align-items: center;
   @content;
 }
+
+@mixin fd-screen-reader-only {
+  position: absolute;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  border: 0;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}

test/templates/calendar/component.njk

@@ -144,6 +144,7 @@ calendar:
             </tbody>
         </table>
     </div>
+    <div aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">Use arrow keys to navigate dates</div>
 {%- endmacro %}
 
 {% macro calendar_months(id, properties={}, modifier={}, state={}) -%}
@@ -162,12 +163,13 @@ calendar:
                     {%- endif %}
                     {%- set _is_current = properties.month === loop.index0 %}
                     {%- set _is_selected = properties.months.selected === loop.index0 %}
-                    {{ calendar_item(month.name | truncate(3, true, "."),modifier={ 'item': ['current' if _is_current else '' ] },state={}) }}
+                    {{ calendar_item(month.name | truncate(3, true, "."),modifier={ 'item': ['current' if _is_current else '' ] },state={ active: _is_selected }) }}
                     {%- endfor %}
                 </tr>
             </tbody>
         </table>
     </div>
+    <div aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">Use arrow keys to navigate dates</div>
 {%- endmacro %}
 
 {% macro calendar_years(id, properties={}, modifier={}, state={}) -%}
@@ -186,12 +188,13 @@ calendar:
                     {%- set year = properties.year + loop.index0 %}
                     {%- set _is_current = properties.year === year %}
                     {%- set _is_selected = properties.years.selected === loop.index0 %}
-                    {{ calendar_item(properties.year + loop.index0,modifier={ 'item': ['current' if _is_current else '' ] },state={ blocked: _is_blocked, selected: _is_selected }) }}
+                    {{ calendar_item(properties.year + loop.index0,modifier={ 'item': ['current' if _is_current else '' ] },state={ blocked: _is_blocked, active: _is_selected }) }}
                     {%- endfor %}
                 </tr>
             </tbody>
         </table>
     </div>
+    <div aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">Use arrow keys to navigate dates</div>
 {%- endmacro %}
 
 {% macro calendar_header(ids={},properties={}, modifier={}, state={}, aria={}) -%}
@@ -238,6 +241,6 @@ calendar:
 {%- endmacro %}
 
 {% macro calendar_item(text, properties={}, modifier={}, state={}, aria={}, el="td") -%}
-    <{{ el }} class="fd-calendar__item{{ modifier.item | modifier('calendar__item') }}{{ state | state }}"{{ { selected: true } | aria if state.selected }}>
+    <{{ el }} class="fd-calendar__item{{ modifier.item | modifier('calendar__item') }}{{ state | state }}"{{ { selected: true } | aria if state.active }}>
     <span class="fd-calendar__text" role="button">{{ text }}</span></{{ el }}>
 {%- endmacro %}