Issue 5540 - implement notification

new-options.html

Index: new-options.html
===================================================================
--- a/new-options.html
+++ b/new-options.html
@@ -374,5 +374,10 @@
       <!-- Placeholder element to determine when to wrap focus around -->
       <span class="focus-last" tabindex="0"></span>
     </div>
+     <!-- Notification -->
+    <div id="notification" aria-hidden="true" aria-live="polite">
+      <strong id="notification-text"></strong>
+      <button id="hide-notification" data-action="hide-notification" aria-label="Close Notification"></button>

[ire, 2017/08/25 12:10:07]

Sorry I didn't notice this before, but shouldn't the aria-label be translated as
well?

[saroyanm, 2017/08/25 12:22:56]

Thanks for bringing this up.
There is no easy way to translate attribute values currently unfortunately. So
to translate the values will require to do that using JavaScript which will
become a headache on current stage, but we should fix that in future. Well we
probably will need to fix whole translation, currently it's done using CLASSes
which was previously done because of browsers were not supporting data
attributes.

[ire, 2017/08/25 12:43:44]

You're welcome :) A suggestion for now could be to add a <span> element within
the button that would only be visible to screen readers that would have the
content. e.g.

<button id="hide-notification" data-action="hide-notification">
  <span class="sr-only i18n_hide_notification"></span>
</button>

The .sr-only class would be hidden from visual view, e.g.
https://hg.adblockplus.org/web.acceptableads.com/file/6e89cf6909de/static/scs...

This would solve the problem for now until all translations are refactored.

[saroyanm, 2017/08/25 13:22:08]

Great idea :)
Done.

+    </div>
   </body>
 </html>