@cryptotaxi247 / documentation-1 / commits / e3a4996

[Accessibility fixes] (#1268)

## 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">

Jithin Prabhakaran Girija committed Sep 12, 2024 at 16:41 UTC e3a499693c4b20616e99b18eee279ca524bca49e

2 files changed +11 -2

src/components/page-footer.js

+1 -1

@@ -44,7 +44,7 @@ const Contributors = ({contributors = [], latestCommit}) => {

44 ))}

45 </Box>

46 {latestCommit ? (

47 - <Text sx={{fontSize: 1, color: 'fg.muted', mt: 1}}>

47 + <Text sx={{fontSize: 1, mt: 1}}>

48 Last edited by <Link href={`https://github.com/${latestCommit.login}`}>{latestCommit.login}</Link> on{' '}

49 <Link href={latestCommit.url}>{format(new Date(latestCommit.date))}</Link>

50 </Text>

src/mdx/code.js

+10 -1

@@ -114,7 +114,16 @@ function Code({className = '', prompt, children}) {

114 {tokens.map((line, i) => (

115 <Box key={i} {...getLineProps({line, key: i})}>

116 {line.map((token, key) => (

117 - <MonoText key={key} {...getTokenProps({token, key})} />

117 + <MonoText

118 + key={key}

119 + {...{

120 + ...getTokenProps({token, key}),

121 + style:

122 + getTokenProps({token, key}).className === 'token comment'

123 + ? {...getTokenProps({token, key}).style, color: '#747459'}

124 + : getTokenProps({token, key}).style,

125 + }}

126 + />

127 ))}

128 </Box>

129 ))}