mirror of
https://github.com/discourse/discourse.git
synced 2025-01-21 15:34:02 +08:00
496f910f03
This commit includes various accessibility improvements for the new user menu: * Add `title` attributes to the user menu tabs * Properly label lists (by adding `aria-labelledby` to `<ul>` elements) for screen readers * Change the user menu structure so that the tabs come before the content panel in the DOM, but use CSS to reverse them visually. Normally, changing the order of elements via CSS is bad for accessibility, but I believe this is one of the rare scenarios where it [makes sense](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#use_cases_for_order). Prior to this change, if you want to reach the first notification item after you select a tab using the keyboard, you have to hit <kbd>ctrl</kbd>+<kbd>tab</kbd> because the notifications list is before the tabs list. However, with this change, <kbd>tab</kbd> will move you to the first item in the list after you select a tab using your keyboard. * Aria-hide the unread notifications badge/count on the tabs because the `title` attribute on the tab indicates the unread count. * Add some tests. |
||
|---|---|---|
| .. | ||
| admin | ||
| confirm-new-email | ||
| discourse | ||
| discourse-common | ||
| discourse-ensure-deprecation-order | ||
| discourse-hbr | ||
| discourse-plugins | ||
| discourse-widget-hbs | ||
| docs | ||
| ember-addons | ||
| ember-cli-progress-ci | ||
| locales | ||
| pretty-text | ||
| select-kit | ||
| truth-helpers | ||
| wizard | ||
| .licensee.json | ||
| .npmrc | ||
| admin-plugins.js.erb | ||
| discourse-js-processor.js | ||
| handlebars-shim.js | ||
| mini-loader.js | ||
| package.json | ||
| polyfills.js | ||
| service-worker.js.erb | ||
| yarn.lock | ||