fix: name the pane pin button and expose whether it is pinned

The button that pins the discussion list carries only an icon, and unlike
the back and drawer buttons either side of it, nothing that names it. A
screen reader reaches it and can say no more than "button". Core already
notices: Button warns in the console when it finds no content and no
accessible label, and this button has been tripping that warning rather
than being read as an omission.

It is also a toggle, and its state was carried entirely by the icon
rotating forty-five degrees when unpinned. Nothing about being pinned was
exposed to assistive technology at all.

The label names the control rather than the action, so it holds still while
the state changes underneath it; `aria-pressed` reports whether it is
currently on. Naming it for the action instead would mean a screen reader
reading a button whose name changes under it, with the state never stated.

`aria-pressed` is given as a string rather than a boolean on purpose.
Mithril renders a boolean as an HTML boolean attribute, so `false` omits
the attribute entirely and `true` renders it empty. Neither is valid ARIA,
and an absent `aria-pressed` reads as a plain button rather than as a toggle
that happens to be off. Core has no other use of the attribute, so there
was no local precedent to follow here.

Author: imorland

framework/core/js/src/common/components/Navigation.tsx

@@ -70,6 +70,17 @@ export default class Navigation extends Component {
         className={classList('Button Button--icon Navigation-pin', { active: pane.pinned })}
         onclick={pane.togglePinned.bind(pane)}
         icon="fas fa-thumbtack"
+        // The label names the control and stays put; `aria-pressed` carries
+        // whether it is currently on. Swapping the label for the action instead
+        // ("Pin"/"Unpin") would leave a screen reader reading a button whose
+        // name changes under it, with the state only ever implied.
+        //
+        // Stringified deliberately: Mithril treats a boolean as an HTML boolean
+        // attribute, so `false` omits it altogether and `true` renders it empty.
+        // ARIA needs the words, and an absent `aria-pressed` makes this read as
+        // a plain button rather than a toggle that happens to be off.
+        aria-label={app.translator.trans('core.lib.nav.pin_pane_button')}
+        aria-pressed={pane.pinned ? 'true' : 'false'}
       />
     );
   }

framework/core/locale/core.yml

@@ -953,6 +953,7 @@ core:
     # These translations are used in the navigation header.
     nav:
       drawer_button: Open Navigation Drawer
+      pin_pane_button: Pin Discussion List
 
     # These translations are used in forum & admin notices.
     notices: