Merge pull request #6834 from KDSBrowne/2.2-imprv-notes-accessibility

Improve shared notes accessibility

bigbluebutton-html5/imports/ui/components/note/component.jsx

@@ -15,6 +15,10 @@ const intlMessages = defineMessages({
     id: 'app.note.title',
     description: 'Title for the shared notes',
   },
+  tipLabel: {
+    id: 'app.note.tipLabel',
+    description: 'Label for tip on how to escape iframe',
+  },
 });
 
 const propTypes = {
@@ -57,7 +61,11 @@ const Note = (props) => {
       <iframe
         title="etherpad"
         src={url}
+        aria-describedby="sharedNotesEscapeHint"
       />
+      <span id="sharedNotesEscapeHint" className={styles.hint} aria-hidden>
+        {intl.formatMessage(intlMessages.tipLabel)}
+      </span>
     </div>
   );
 };

bigbluebutton-html5/imports/ui/components/note/styles.scss

@@ -61,6 +61,22 @@
   }
 }
 
+.hint {
+  visibility: hidden;
+  position: absolute;
+
+  @media (pointer: none) {
+    visibility: visible;
+    position: relative;
+    color: var(--color-gray);
+    font-size: var(--font-size-small);
+    font-style: italic;
+    padding-top: var(--sm-padding-x);
+    padding-left: var(--lg-padding-y);
+    text-align: left;
+  }
+}
+
 iframe {
   display: flex;
   flex-flow: column;
@@ -70,4 +86,5 @@ iframe {
   overflow-x: hidden;
   overflow-y: auto;
   border-style: none;
+  border-bottom: 1px solid var(--color-gray-lightest);
 }

bigbluebutton-html5/imports/ui/stylesheets/variables/palette.scss

@@ -7,6 +7,7 @@
   --color-gray-dark: #06172A;
   --color-gray-light: #8B9AA8;
   --color-gray-lighter: #a7b3bd;
+  --color-gray-lightest: #d4d9df;
 
   --color-blue-light: #54a1f3;
   --color-blue-lighter: #92BCEA;

bigbluebutton-html5/private/locales/en.json

@@ -21,6 +21,7 @@
     "app.note.title": "Shared Notes",
     "app.note.label": "Note",
     "app.note.hideNoteLabel": "Hide note",
+    "app.note.tipLabel": "Press Esc to focus editor toolbar",
     "app.userList.usersTitle": "Users",
     "app.userList.participantsTitle": "Participants",
     "app.userList.messagesTitle": "Messages",