[Page] Improve the accessibility of the rollup actions

[lsit]

WHY are these changes introduced?

Resolves #4072

WHAT is this pull request doing?

• Updates the default accessibility label of the RollupActions button to be "View actions" to better match our content guidelines
• Updates the accessibility label of the RollupActions button within the Page header to be related to the title "View actions for {title}". This will provide consistency across all pages.

Media

How to 🎩

• View the Page with all header elements story on small screen
• Enable VoiceOver and tab to the "..." button or look at the Form Controls in the rotor

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[github-actions]

🟢 This pull request modifies 5 files and might impact 3 other files.

Details:

All files potentially affected (total: 3)

• /src/components/Page/components/Header/Header.tsx
• /src/components/Page/Page.tsx
• /src/components/ActionMenu/ActionMenu.tsx

📄 locales/en.json (total: 0)

Files potentially affected (total: 0)

🧩 src/components/ActionMenu/ActionMenu.tsx (total: 2)

Files potentially affected (total: 2)

• /src/components/Page/components/Header/Header.tsx
• /src/components/Page/Page.tsx

🧩 src/components/ActionMenu/components/Actions/Actions.tsx (total: 3)

Files potentially affected (total: 3)

• /src/components/ActionMenu/ActionMenu.tsx
• /src/components/Page/components/Header/Header.tsx
• /src/components/Page/Page.tsx

🧩 src/components/ActionMenu/components/RollupActions/RollupActions.tsx (total: 3)

Files potentially affected (total: 3)

• /src/components/ActionMenu/ActionMenu.tsx
• /src/components/Page/components/Header/Header.tsx
• /src/components/Page/Page.tsx

🧩 src/components/Page/components/Header/Header.tsx (total: 1)

Files potentially affected (total: 1)

• /src/components/Page/Page.tsx

[github-actions]

size-limit report

Path	Size
cjs	166.18 KB (+0.04% 🔺)
esm	96.75 KB (+0.07% 🔺)
esnext	143.3 KB (+0.05% 🔺)
css	34.28 KB (0%)

[kyledurand]

I'm wondering if the tooltip is 100% necessary because it's adding more clutter to the already cluttered page header the a11y label on button should be enough for screenreaders right? @sarahill do you have thoughts on this?

[lsit]

@kyledurand thanks for taking a look! Adding the tooltip was to help voice-command users as @emma-boardman described in this comment.

[emma-boardman]

Apologies for the delayed review!

- Label overrides
I can't remember if this was discussed previously (apologies if it was), but is there a way to encourage consistency with the custom labels, and thus across the admin? For example, View actions for ${my-custom-label}?

- Tooltip
Agree this could look cluttered depending on the page in question 🤔

Maybe next time there's a design language iteration we could do some Fable testing and see if there's a way to better serve voice-activation users within our mobile UI.

[lsit]

I've removed the tooltip and we can revisit that later, particularly because depending on hover is not a pattern we can use on mobile. I also updated the label to use the Page title if it's provided, which I think will provide good consistency across pages and should be descriptive enough. If we need more customization, we can add the prop back later as well.

I'll re-request the translation once approved.

[sarahill]

➕ 1 to removing the tooltip for now. We're starting to look at things like this across the UI now so thanks for bringing this up. I will keep it in mind 👍

[kyledurand]

Looks great. Thanks @lsit !

[ghost]

🎉 Thanks for your contribution to Polaris React!