Merge pull request #8898 from erangatl/WCAG

Fix overview page accessibility issues
wso2 · Jul 13, 2020 · f655bf6 · f655bf6
2 parents 60fc3e1 + 416613a
commit f655bf6
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 12 deletions.
diff --git a/...e.feature/src/main/resources/devportal/source/src/app/components/Apis/Details/InfoBar.jsx b/...e.feature/src/main/resources/devportal/source/src/app/components/Apis/Details/InfoBar.jsx
@@ -636,7 +636,7 @@ class InfoBar extends React.Component {
                     </Collapse>
                 )}
                 <div className={classes.infoContentBottom}>
-                    <a className={classes.expandWrapper} onClick={this.toggleOverview}>
+                    <Button className={classes.expandWrapper} onClick={this.toggleOverview}>
                         <div className={classes.buttonView}>
                             {showOverview ? (
                                 <Typography className={classes.buttonOverviewText}>
@@ -649,7 +649,7 @@ class InfoBar extends React.Component {
                             )}
                             {showOverview ? <Icon>arrow_drop_up</Icon> : <Icon>arrow_drop_down</Icon>}
                         </div>
-                    </a>
+                    </Button>
                 </div>
             </div>
         );

diff --git a/....feature/src/main/resources/devportal/source/src/app/components/Apis/Details/Overview.jsx b/....feature/src/main/resources/devportal/source/src/app/components/Apis/Details/Overview.jsx
@@ -414,7 +414,7 @@ function Overview(props) {
                                 height={titleIconSize}
                                 icon='credentials'
                             />
-                            <Typography className={classes.heading} variant='h6'>
+                            <Typography id='APIOperationTitle' className={classes.heading} variant='h6'>
                                 {getTitleForAPIOperationType(api.type)}
                             </Typography>
                         </ExpansionPanelSummary>
@@ -426,7 +426,12 @@ function Overview(props) {
                                 <Divider />
                                 <ExpansionPanelActions className={classes.actionPanel}>
                                     <Link to={'/apis/' + api.id + '/test'} className={classes.linkToTest}>
-                                        <Button size='small' color='primary'>
+                                        <Button
+                                            id='test'
+                                            size='small'
+                                            color='primary'
+                                            aria-labelledby='test APIOperationTitle'
+                                        >
                                             <FormattedMessage
                                                 id='Apis.Details.Overview.resources.show.more'
                                                 defaultMessage='Test >>'
@@ -452,7 +457,7 @@ function Overview(props) {
                                         height={titleIconSize}
                                         icon='comments'
                                     />
-                                    <Typography className={classes.heading} variant='h6'>
+                                    <Typography id='comments' className={classes.heading} variant='h6'>
                                         <FormattedMessage
                                             id='Apis.Details.Overview.comments.title'
                                             defaultMessage='Comments'
@@ -493,7 +498,7 @@ function Overview(props) {
                                 <Divider />
                                 <ExpansionPanelActions className={classes.actionPanel}>
                                     <Link to={'/apis/' + api.id + '/comments'} className={classes.button}>
-                                        <Button size='small' color='primary'>
+                                        <Button id='more' aria-labelledby='more comments' size='small' color='primary'>
                                             <FormattedMessage
                                                 id='Apis.Details.Overview.comments.show.more'
                                                 defaultMessage='Show More >>'
@@ -515,7 +520,7 @@ function Overview(props) {
                                         height={titleIconSize}
                                         icon='sdk'
                                     />
-                                    <Typography className={classes.heading} variant='h6'>
+                                    <Typography id='SDKGeneration' className={classes.heading} variant='h6'>
                                         <FormattedMessage
                                             id='Apis.Details.Overview.sdk.generation.title'
                                             defaultMessage='SDK Generation'
@@ -541,7 +546,12 @@ function Overview(props) {
                                 <Divider />
                                 <ExpansionPanelActions className={classes.actionPanel}>
                                     <Link to={'/apis/' + api.id + '/sdk'} className={classes.linkToTest}>
-                                        <Button size='small' color='primary'>
+                                        <Button
+                                            id='SDKMore'
+                                            size='small'
+                                            color='primary'
+                                            aria-labelledby='SDKMore SDKGeneration'
+                                        >
                                             <FormattedMessage
                                                 id='Apis.Details.Overview.sdk.generation.show.more'
                                                 defaultMessage='Show More >>'
@@ -566,7 +576,7 @@ function Overview(props) {
                                 icon='docs'
                             />
 
-                            <Typography className={classes.heading} variant='h6'>
+                            <Typography id='Documents' className={classes.heading} variant='h6'>
                                 <FormattedMessage
                                     id='Apis.Details.Overview.documents.title'
                                     defaultMessage='Documents'
@@ -581,7 +591,7 @@ function Overview(props) {
                         <Divider />
                         <ExpansionPanelActions className={classes.actionPanel}>
                             <Link to={'/apis/' + api.id + '/documents'} className={classes.button}>
-                                <Button size='small' color='primary'>
+                                <Button id='DMore' size='small' color='primary' aria-labelledby='DMore Documents'>
                                     <FormattedMessage
                                         id='Apis.Details.Overview.comments.show.more'
                                         defaultMessage='Show More >>'

diff --git a/...ore.feature/src/main/resources/devportal/source/src/app/components/Apis/Listing/NoApi.jsx b/...ore.feature/src/main/resources/devportal/source/src/app/components/Apis/Listing/NoApi.jsx
@@ -25,7 +25,7 @@ export default function NoApi() {
         <div className={classes.root}>
             <Grid container spacing={3}>
                 <Grid item xs={12} className={classes.messageWrapper}>
-                    <img src={app.context + theme.custom.noApiImage} className={classes.messageWrapper} />
+                    <img alt='API icon' src={app.context + theme.custom.noApiImage} className={classes.messageWrapper} />
                     <Typography variant='h5' gutterBottom>
                         <FormattedMessage id='Apis.Listing.NoApi.nodata.title' defaultMessage='No APIs Available' />
                     </Typography>

diff --git a/....wso2.carbon.apimgt.store.feature/src/main/resources/devportal/source/src/defaultTheme.js b/....wso2.carbon.apimgt.store.feature/src/main/resources/devportal/source/src/defaultTheme.js
@@ -102,7 +102,7 @@ const DefaultConfigurations = {
             get: '#02a8f4',
             post: '#8ac149',
             put: '#ff9700',
-            delete: '#fd5621',
+            delete: '#de3702',
             options: '#5f7c8a',
             patch: '#785446',
             head: '#785446',