Calendar header buttons navigation with VO/Safari

Screenreader-only class has position: absolute which makes the
element be removed from the page flow, causing the VO to jump to the
first element each time the warning loses the focus, this PS sets the
warning position to "relative", so the element can stay in the normal
page flow

fixes: LS-2898
flag= none

Test plan:

- With Safari go to the Calendar.
- Enable VO and navigate over the Calendar header options using the
arrow keys.
- When you get the warning that recommends the agenda usage
- Notice that it jumps to the next element correctly

Change-Id: I29327133196f0b20be4f728fb746399119325c8f
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/282374
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Product-Review: Jonathan Guardado <jonathan.guardado@instructure.com>
Reviewed-by: Robin Kuss <rkuss@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>

app/stylesheets/pages/calendar/_calendar2.scss

@@ -29,3 +29,7 @@
 .skip-to-calendar {
   @include accessibility-prompt;
 }
+
+.calendar_header .recommend_agenda{
+  position: relative ;
+}