-
Notifications
You must be signed in to change notification settings - Fork 1k
fix #7579 Pagination aria label #7590
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
Conversation
return ( | ||
<Box direction="row" align="center" gap="xsmall" {...rest}> | ||
<Text>{formatMessage({ id: 'pagination.stepLabel', messages })}</Text> | ||
<Select | ||
options={options} | ||
value={step} | ||
a11yTitle="Items per Page" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
do we want a aria-label
here instead then also we should include it in default.json message and allow for internationalization so using our
format({
id: 'pagination.itemsPerPage',
messages,
},
})
then add that message in the default.json file
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@britt6612 I noticed stepLabel is exactly the same value of Item per page
. can we just we just use that instead of creating new label. I have pushed the new changes with this.
return ( | ||
<Box direction="row" align="center" gap="xsmall" {...rest}> | ||
<Text>{formatMessage({ id: 'pagination.stepLabel', messages })}</Text> | ||
<Select | ||
options={options} | ||
value={step} | ||
a11yTitle={formatMessage({ id: 'pagination.stepLabel', messages })} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
one last comment can we change this to be
aria-label={formatMessage({ id: 'pagination.stepLabel', messages })}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good!
What does this PR do?
Where should the reviewer start?
What testing has been done on this PR?
How should this be manually tested?
Do Jest tests follow these best practices?
screen
is used for querying.asFragment()
is used for snapshot testing.Any background context you want to provide?
What are the relevant issues?
Screenshots (if appropriate)
Do the grommet docs need to be updated?
Should this PR be mentioned in the release notes?
Is this change backwards compatible or is it a breaking change?