Change Details

== Background To help preserve space and reduce visual clutter, we should replace the existing “tools” text button with an ellipsis icon. This would align the Desktop experience more closely with Minerva - where the same actions are already accessed through an overflow menu pattern. Recent addition of a Watch label (which was essential to improve clarity and usability), has increased the amount of text in the navigation and so by doing applying this change we can reclaim some of the space on article nav when the menu is not pinned. === User story As a user, I want page tools to be presented in a consistent and familiar way across devices, so that I can easily find actions and have the nav look less cluttered. === Design requirements Proposed {F88713609 width=700} Current menu on minerva for reference {F88713715} --- == Requirements === Acceptance criteria [] Replace the Tools text button in the page actions navigation with an ellipsis icon similar to Minerva [] Ensure that the correct level of spacing and hover effects are applied to it. [[ https://www.figma.com/design/Q3pYKI7RRMdRRgkQp2RiTf/Web--Reading-List-Collections?node-id=3098-4910&t=N9FoSwjr0Q5MNyjD-4 | Check Figma ]] [] Make sure the keyboard navigation and screen reader support remains intact. [] Make sure the experience within the drop down (when clicked on the icon) or when the menu is pinned to the side remains the same. === BDD **Scenario: ** a user has the same UX (feature parity) with ellipsis icon as with the previous tools text button **Given** a user is on any page on wikipedia **When** ellipsis menu button is present **And** s user is clicks on the ellipses button **Then** all previous tools menu items should be there === Test Steps [x] check Desktop/mobile (tablet included) for the ellipsis menu to be present [x] click on the ellipsis menu to see that all Tools menu options are present there [x] check for the visual spacing between all icons in the toolbelt [x] general accessibility check [x] screen reader accessibility check === Communication criteria //Add if this needs an announcement or discussion.// === Rollback plan //Describe the rollback plan in production for this task if something goes wrong.// //This task was created by Version 1.0.0 of the Reader Experience team task template using [[ https://phabulous.toolforge.org/ | phabulous ]].//

== Background To help preserve space and reduce visual clutter, we should replace the existing “tools” text button with an ellipsis icon. This would align the Desktop experience more closely with Minerva - where the same actions are already accessed through an overflow menu pattern. Recent addition of a Watch label (which was essential to improve clarity and usability), has increased the amount of text in the navigation and so by doing applying this change we can reclaim some of the space on article nav when the menu is not pinned. === User story As a user, I want page tools to be presented in a consistent and familiar way across devices, so that I can easily find actions and have the nav look less cluttered. === Design requirements Proposed {F88713609 width=700} Current menu on minerva for reference {F88713715} --- == Requirements === Acceptance criteria [] Replace the Tools text button in the page actions navigation with an ellipsis icon similar to Minerva [] Ensure that the correct level of spacing and hover effects are applied to it. [[ https://www.figma.com/design/Q3pYKI7RRMdRRgkQp2RiTf/Web--Reading-List-Collections?node-id=3098-4910&t=N9FoSwjr0Q5MNyjD-4 | Check Figma ]] [] Make sure the keyboard navigation and screen reader support remains intact. [] Make sure the experience within the drop down (when clicked on the icon) or when the menu is pinned to the side remains the same. === BDD - //For QA engineer to fill out.//**Scenario: ** a user has the same UX (feature parity) with ellipsis icon as with the previous tools text button **Given** a user is on any page on wikipedia **When** ellipsis menu button is present **And** s user is clicks on the ellipses button **Then** all previous tools menu items should be there === Test Steps - //For QA engineer to fill out.//[x] check Desktop/mobile (tablet included) for the ellipsis menu to be present [x] click on the ellipsis menu to see that all Tools menu options are present there [x] check for the visual spacing between all icons in the toolbelt [x] general accessibility check [x] screen reader accessibility check === Communication criteria //Add if this needs an announcement or discussion.// === Rollback plan //Describe the rollback plan in production for this task if something goes wrong.// //This task was created by Version 1.0.0 of the Reader Experience team task template using [[ https://phabulous.toolforge.org/ | phabulous ]].//