Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added custom condition to the aria-label user button #6346

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

Wagner3UB
Copy link
Contributor

Added a condition to set the aria-label to differentiate the "regular users" from the admin users.

The condition is the same one used inside the 'PersonalTools' component, which opens after the user button is clicked.

Issue with discussion:
#5119

@Wagner3UB Wagner3UB added the 99 tag: UX Accessibility Accessibility issues label Sep 27, 2024
@Wagner3UB Wagner3UB self-assigned this Sep 27, 2024
Copy link

netlify bot commented Sep 27, 2024

Deploy Preview for plone-components canceled.

Name Link
🔨 Latest commit 681a464
🔍 Latest deploy log https://app.netlify.com/sites/plone-components/deploys/66f6b3407bc8780008444e8b

Copy link
Member

@JeffersonBledsoe JeffersonBledsoe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a couple of comments. One of them will need to be resolved in a follow up PR, but I'm happy with this once the other minor things are covered!

@@ -0,0 +1 @@
- added custom condition to the aria-label user button @Wagner3UB
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Wagner3UB Could you be clearer what the condition is for in the changelog?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- added custom condition to the aria-label user button @Wagner3UB
- On the user button, whether the authenticated user is an administrator or not, change the `aria-label` attribute accordingly. @Wagner3UB

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also I think this needs to be renamed to 6346.breaking.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this PR breaking? I don't see it right now but maybe I missed it.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It changes the aria-label from "Personal tools" to either "Site and user settings" or "User settings".

Comment on lines +235 to +236
const { userId, getUser } = this.props;
getUser(userId);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Wagner3UB Did you test to see what would happen if you logged in as one user who does have permission, logged out, then logged in as a different user who doesn't have permission?
I would assume the state gets updated elsewhere and handled by the rendering of this component, but it would be a good thing to check.

Comment on lines +635 to +642
userHasRoles(this.props.user, [
'Site Administrator',
'Manager',
])
? this.props.intl.formatMessage(
messages.adminUserlTools,
)
: this.props.intl.formatMessage(messages.userTools)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you make the message a variable so it is easier to keep in-sync with the above button?

@@ -67,6 +69,14 @@ const messages = defineMessages({
id: 'Personal tools',
defaultMessage: 'Personal tools',
},
adminUserlTools: {
id: 'Site tools and user settings',
Copy link
Sponsor Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

make the id same as default message

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also remove personalTools entirely?

Copy link
Collaborator

@stevepiercy stevepiercy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Per a11y team meeting

@@ -0,0 +1 @@
- added custom condition to the aria-label user button @Wagner3UB
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- added custom condition to the aria-label user button @Wagner3UB
- On the user button, whether the authenticated user is an administrator or not, change the `aria-label` attribute accordingly. @Wagner3UB

@@ -0,0 +1 @@
- added custom condition to the aria-label user button @Wagner3UB
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also I think this needs to be renamed to 6346.breaking.

Copy link
Collaborator

@stevepiercy stevepiercy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we remove the messages for Personal Tools, since this PR seems to make it unnecessary?

@@ -67,6 +69,14 @@ const messages = defineMessages({
id: 'Personal tools',
defaultMessage: 'Personal tools',
},
adminUserlTools: {
id: 'Site tools and user settings',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also remove personalTools entirely?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants