Add aria-label to Notifications page “Recent activity” filter widget

Adding `aria-label` to the filter widget, with `listbox` role assigned 
to allow screen readers parse read the content.

Bug: T244543
Change-Id: I72a4045abe9a7c391ee3fe471ed944d96259b79e
This commit is contained in:
Akinwale Alagbe 2020-02-06 14:15:59 -08:00 committed by VolkerE
parent 9ea6251a51
commit b49fdb88c3
4 changed files with 6 additions and 2 deletions

View file

@ -404,7 +404,8 @@
"echo-mark-all-as-read", "echo-mark-all-as-read",
"echo-learn-more", "echo-learn-more",
"mypreferences", "mypreferences",
"echo-specialpage-section-markread" "echo-specialpage-section-markread",
"echo-specialpage-pagefilterwidget-aria-label"
], ],
"targets": [ "targets": [
"desktop", "desktop",

View file

@ -109,6 +109,7 @@
"echo-specialpage-section-markread": "Mark group as read", "echo-specialpage-section-markread": "Mark group as read",
"echo-specialpage-markasread": "Notification: Mark as read", "echo-specialpage-markasread": "Notification: Mark as read",
"echo-specialpage-markasread-invalid-id": "Invalid event ID", "echo-specialpage-markasread-invalid-id": "Invalid event ID",
"echo-specialpage-pagefilterwidget-aria-label": "Filter by wiki and page title",
"echo-specialpage-pagination-numnotifications": "$1 {{PLURAL:$1|notification|notifications}}", "echo-specialpage-pagination-numnotifications": "$1 {{PLURAL:$1|notification|notifications}}",
"echo-specialpage-pagination-range": "$1 - $2", "echo-specialpage-pagination-range": "$1 - $2",
"echo-specialpage-pagefilters-title": "Recent activity", "echo-specialpage-pagefilters-title": "Recent activity",

View file

@ -111,6 +111,7 @@
"echo-specialpage-section-markread": "Label for the button to mark notifications in the given section as read in [[Special:Notifications]]", "echo-specialpage-section-markread": "Label for the button to mark notifications in the given section as read in [[Special:Notifications]]",
"echo-specialpage-markasread": "Special page title for Special:NotificationsMarkRead for marking specific notification as read.", "echo-specialpage-markasread": "Special page title for Special:NotificationsMarkRead for marking specific notification as read.",
"echo-specialpage-markasread-invalid-id": "Error message shown to users who try to mark a notification as read with an invalid event ID.", "echo-specialpage-markasread-invalid-id": "Error message shown to users who try to mark a notification as read with an invalid event ID.",
"echo-specialpage-pagefilterwidget-aria-label": "Screen readers use this name to identify the recent activities (pages with unread notifications) wiki and pages grouped lists.",
"echo-specialpage-pagination-numnotifications": "Label noting the number of notifications displayed in the page. This only appears if there is a single page of results.\n\nParameters:\n* $1 - Number of notifications in the page.\n{{Identical|Notification}}", "echo-specialpage-pagination-numnotifications": "Label noting the number of notifications displayed in the page. This only appears if there is a single page of results.\n\nParameters:\n* $1 - Number of notifications in the page.\n{{Identical|Notification}}",
"echo-specialpage-pagination-range": "Label noting the range of the notifications displayed in the page. This only appears if there are multiple pages of results available.\n\nParameters:\n* $1 - Number of the first item.\n* $2 - Number of the last item.", "echo-specialpage-pagination-range": "Label noting the range of the notifications displayed in the page. This only appears if there are multiple pages of results available.\n\nParameters:\n* $1 - Number of the first item.\n* $2 - Number of the last item.",
"echo-specialpage-pagefilters-title": "Title of the page filter box in Special:Notifications page.", "echo-specialpage-pagefilters-title": "Title of the page filter box in Special:Notifications page.",

View file

@ -43,7 +43,8 @@
// Initialization // Initialization
this.populateDataFromModel(); this.populateDataFromModel();
this.$element this.$element
.addClass( 'mw-echo-ui-pageFilterWidget' ); .addClass( 'mw-echo-ui-pageFilterWidget' )
.attr( 'aria-label', mw.message( 'echo-specialpage-pagefilterwidget-aria-label' ).text() );
}; };
/* Initialization */ /* Initialization */