Change Details

NOTE: Blocker for this work: T306609 With the new feature flag FEATURE_ARTICLE_TOOLS_MENU in place (T306609) we will begin work on the new page tools feature The scope of this work is pinning the **existing** more menu. The pinning/hiding functionality should work similarly to the table of contents. No changes should be made to the contents of the menu. prototype: https://vector-2022.web.app/Moth | {F35521712 width=300} | {F35521715 width=300} # TODO [] When the feature flag is disabled there are no visual changes [] When the feature flag is enabled, the more menu becomes pinnable to the right side of the screen. [] When the feature flag is enabled at the top of the menu is the label "pin menu to sidebar". [] The pinning mechanism should share the same code as the table of contents so this task should be used to generalize that work. [] The more menu if empty is not shown [] When pinned, the menu appears in the right side of the screen [] When pinned, the menu does not overlap the footer when the page is scrolled to the bottom [] When the main menu or TOC are in the left sidebar, the content should be [[ #8300629 | left-anchored ]] to the left sidebar [] When the left sidebar is empty and the right sidebar has the page tools menu in it, [[ #8300629 | center the content + right sidebar as a block ]] [] Landmark regions are preserved and accessible by screenreaders when a menu is pinned and unpinned [] Contents of pinned menu are immediately follows the menu toggle in the DOM so the contents are accessible to keyboard/screenreader users [] Ensure brackets in pinnable toggle buttons aren't read out to screenreaders.

NOTE: Blocker for this work: T306609 With the new feature flag FEATURE_ARTICLE_TOOLS_MENU in place (T306609) we will begin work on the new page tools feature The scope of this work is pinning the **existing** more menu. The pinning/hiding functionality should work similarly to the table of contents. No changes should be made to the contents of the menu. prototype: https://vector-2022.web.app/Moth | {F35521712 width=300} | {F35521715 width=300} # TODO [x] The pinning mechanism should share the same code as the table of contents so this task should be used to generalize that work. [] The more menu if empty is not shown === QA steps Use the page tools feature flag query to test on the beta cluster ('?vectorpagetools=1') [] When the feature flag is disabled there are no visual changes [] When the feature flag is enabled, the more menu becomes pinnable to the right side of the screen. [] When the feature flag is enabled at the top of the menu is the label "pin menu to sidebar". [] When pinned, the menu appears in the right side of the screen [] When the main menu or TOC are in the left sidebar, the content should be [[ #8300629 | left-anchored ]] to the left sidebar [] When the left sidebar is empty and the right sidebar has the page tools menu in it, [[ #8300629 | center the content + right sidebar as a block ]] [] Landmark regions are preserved and accessible by screenreaders when a menu is pinned and unpinned [] Contents of pinned menu are immediately follows the menu toggle in the DOM so the contents are accessible to keyboard/screenreader users [] Ensure brackets in pinnable toggle buttons aren't read out to screenreaders.

NOTE: Blocker for this work: T306609 With the new feature flag FEATURE_ARTICLE_TOOLS_MENU in place (T306609) we will begin work on the new page tools feature The scope of this work is pinning the **existing** more menu. The pinning/hiding functionality should work similarly to the table of contents. No changes should be made to the contents of the menu. prototype: https://vector-2022.web.app/Moth | {F35521712 width=300} | {F35521715 width=300} # TODO [x] The pinning mechanism should share the same code as the table of contents so this task should be used to generalize that work. [] The more menu if empty is not shown === QA steps Use the page tools feature flag query to test on the beta cluster ('?vectorpagetools=1') [] When the feature flag is disabled there are no visual changes [] When the feature flag is enabled, the more menu becomes pinnable to the right side of the screen. [] When the feature flag is enabled at the top of the menu is the label "pin menu to sidebar". [] The pinning mechanism should share the same code as the table of contents so this task should be used to generalize that work. [] The more menu if empty is not shown [] When pinned, the menu appears in the right side of the screen [] When pinned, the menu does not overlap the footer when the page is scrolled to the bottom [] When the main menu or TOC are in the left sidebar, the content should be [[ #8300629 | left-anchored ]] to the left sidebar [] When the left sidebar is empty and the right sidebar has the page tools menu in it, [[ #8300629 | center the content + right sidebar as a block ]] [] Landmark regions are preserved and accessible by screenreaders when a menu is pinned and unpinned [] Contents of pinned menu are immediately follows the menu toggle in the DOM so the contents are accessible to keyboard/screenreader users [] Ensure brackets in pinnable toggle buttons aren't read out to screenreaders.