Skip to content

Commit

Permalink
[Accessibility fixes] (npm#1268)
Browse files Browse the repository at this point in the history
## WHAT
This pull request includes changes to enhance the user interface and
improve code readability in the `src/components/page-footer.js` and
`src/mdx/code.js` files. The most important changes involve modifying
the display of the latest commit information and enhancing the styling
of code comments.

User Interface Enhancements:

*
[`src/components/page-footer.js`](diffhunk://#diff-698aaa879c704b0a0f6ffd35d2ef80ef133c897a318c5cdfd1c56e6d85135aefL47-R47):
Removed the `color: 'fg.muted'` style from the `Text` component that
displays the latest commit information.

Code Readability Improvements:

*
[`src/mdx/code.js`](diffhunk://#diff-f3f4e897983cba6337e020c78ef03c356c88f8868bcd19c465eb3c07e8b96625L117-R126):
Enhanced the `MonoText` component to apply a specific color (`#747459`)
to comments within code blocks. This change ensures that comments are
visually distinct from other code elements.

## WHY
This PR includes changes regarding accessibility bug fixes.

Change 1: The text `comment` colour is changed for better accessibility.

<img width="1057" alt="image"
src="https://github.com/user-attachments/assets/fdceae51-571d-40f7-8722-3a025879d65e">
<img width="1057" alt="image"
src="https://github.com/user-attachments/assets/9ce2455a-ff4c-46a5-852d-9d12d31df8e7">

Change 2: From the text `Last edited by` the muted colour is removed for
better colour contrast ratio.

<img width="1057" alt="image"
src="https://github.com/user-attachments/assets/338bca34-5ce8-4acd-89ee-09440b5f0671">
<img width="1057" alt="image"
src="https://github.com/user-attachments/assets/76c42381-412d-408f-8a1c-cddad4c78c96">
  • Loading branch information
jpg619 committed Sep 12, 2024
1 parent 2ddfdac commit e3a4996
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 2 deletions.
2 changes: 1 addition & 1 deletion src/components/page-footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const Contributors = ({contributors = [], latestCommit}) => {
))}
</Box>
{latestCommit ? (
<Text sx={{fontSize: 1, color: 'fg.muted', mt: 1}}>
<Text sx={{fontSize: 1, mt: 1}}>
Last edited by <Link href={`https://github.com/${latestCommit.login}`}>{latestCommit.login}</Link> on{' '}
<Link href={latestCommit.url}>{format(new Date(latestCommit.date))}</Link>
</Text>
Expand Down
11 changes: 10 additions & 1 deletion src/mdx/code.js
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,16 @@ function Code({className = '', prompt, children}) {
{tokens.map((line, i) => (
<Box key={i} {...getLineProps({line, key: i})}>
{line.map((token, key) => (
<MonoText key={key} {...getTokenProps({token, key})} />
<MonoText
key={key}
{...{
...getTokenProps({token, key}),
style:
getTokenProps({token, key}).className === 'token comment'
? {...getTokenProps({token, key}).style, color: '#747459'}
: getTokenProps({token, key}).style,
}}
/>
))}
</Box>
))}
Expand Down

0 comments on commit e3a4996

Please sign in to comment.