You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by am...@apache.org on 2019/05/07 17:24:38 UTC
[couchdb-fauxton] branch master updated: Improve Accessibility for
screen reader users (#1198)
This is an automated email from the ASF dual-hosted git repository.
amaranhao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/couchdb-fauxton.git
The following commit(s) were added to refs/heads/master by this push:
new 8773b05 Improve Accessibility for screen reader users (#1198)
8773b05 is described below
commit 8773b054de9ec818c2a8555e342392abbd9dddec
Author: Dickson Tan <Ne...@users.noreply.github.com>
AuthorDate: Wed May 8 01:24:33 2019 +0800
Improve Accessibility for screen reader users (#1198)
* Navigation menu: ensure that nav links are always labelled for screen readers, regardless of whether they are visually minimized. Add labels and roles for the minimize toggle button.
* Make screen readers read incoming notifications, add some missing labels in the notifications panel
* render notifications in a labelled <aside> instead of a <span>
* DatabaseRow: add missing labels to controls
* Narrow the scope of role=main so it excludes the navigation bar
---
app/addons/components/components/copy.js | 3 ++-
app/addons/databases/components.js | 3 +++
app/addons/fauxton/appwrapper.js | 4 ++--
app/addons/fauxton/navigation/components/Burger.js | 4 ++--
app/addons/fauxton/navigation/components/NavLink.js | 9 +++++----
.../fauxton/notifications/components/GlobalNotifications.js | 2 +-
.../fauxton/notifications/components/NotificationCenterPanel.js | 4 ++--
.../notifications/components/NotificationPanelWithTransition.js | 4 ++--
8 files changed, 19 insertions(+), 14 deletions(-)
diff --git a/app/addons/components/components/copy.js b/app/addons/components/components/copy.js
index 49cc252..85b9f42 100644
--- a/app/addons/components/components/copy.js
+++ b/app/addons/components/components/copy.js
@@ -49,7 +49,7 @@ export class Copy extends React.Component {
getClipboardElement () {
if (this.props.displayType === 'icon') {
- return (<i className="fontawesome icon-paste"></i>);
+ return (<i aria-hidden="true" className="fontawesome icon-paste"></i>);
}
return this.props.textDisplay;
}
@@ -58,6 +58,7 @@ export class Copy extends React.Component {
const btnClasses = this.props.displayType === 'input' ? "btn copy-button" : "copy" + " clipboard-copy-element";
return (
<button
+ aria-label="Copy to Clipboard"
className={btnClasses}
data-clipboard-text={this.props.text}
title={this.props.title}
diff --git a/app/addons/databases/components.js b/app/addons/databases/components.js
index 46eccb4..a5b8cb5 100644
--- a/app/addons/databases/components.js
+++ b/app/addons/databases/components.js
@@ -231,12 +231,15 @@ class DatabaseRow extends React.Component {
<td className="database-actions">
<a className="db-actions btn fonticon-replicate set-replication-start"
+ aria-label={`Replicate ${id}`}
title={"Replicate " + name}
href={"#/replication/_create/" + encodedId} />
<a
+ aria-label={`Set permissions for ${id}`}
className="db-actions btn icon-lock set-permissions"
title={"Set permissions for " + name} href={"#/database/" + encodedId + "/permissions"} />
<a
+ aria-label={`Delete ${id}`}
className="db-actions btn icon-trash"
onClick={this.showDeleteDatabaseModal.bind(this, id, encodedId)}
title={'Delete ' + id} data-bypass="true" />
diff --git a/app/addons/fauxton/appwrapper.js b/app/addons/fauxton/appwrapper.js
index ea81a67..3df37c8 100644
--- a/app/addons/fauxton/appwrapper.js
+++ b/app/addons/fauxton/appwrapper.js
@@ -69,10 +69,10 @@ class App extends React.Component {
<GlobalNotificationsContainer />
<NotificationPanelContainer />
</div>
- <div role="main" id="main" className={mainClass}>
+ <div id="main" className={mainClass}>
<div id="app-container">
<div className="wrapper">
- <div className="pusher">
+ <div role="main" className="pusher">
<ContentWrapper router={this.props.router} setNavbarActiveLink={this.props.setNavbarActiveLink}/>
</div>
<div id="primary-navbar">
diff --git a/app/addons/fauxton/navigation/components/Burger.js b/app/addons/fauxton/navigation/components/Burger.js
index cbae67b..07ee28d 100644
--- a/app/addons/fauxton/navigation/components/Burger.js
+++ b/app/addons/fauxton/navigation/components/Burger.js
@@ -29,8 +29,8 @@ const Burger = ({toggleMenu, isMinimized}) => {
'icon-signin faux-navbar__burger__icon--flipped';
return (
- <div className={burgerClasses} onClick={toggleMenu}>
- <i className={"faux-navbar__burger__icon " + icon}></i>
+ <div aria-expanded={!isMinimized} aria-label="Toggle Navigation Menu" className={burgerClasses} onClick={toggleMenu} role="button" tabIndex="0">
+ <i aria-hidden="true" className={"faux-navbar__burger__icon " + icon}></i>
</div>
);
};
diff --git a/app/addons/fauxton/navigation/components/NavLink.js b/app/addons/fauxton/navigation/components/NavLink.js
index 6ba591c..2afc4ea 100644
--- a/app/addons/fauxton/navigation/components/NavLink.js
+++ b/app/addons/fauxton/navigation/components/NavLink.js
@@ -18,10 +18,11 @@ import classNames from 'classnames';
const NavLink = ({link, active, isMinimized}) => {
+ const isActive = active === link.title;
const linkClass = classNames(
'faux-navbar__link',
- {'faux-navbar__link--active': active === link.title},
- {'faux-navbar__link--inactive': active !== link.title},
+ {'faux-navbar__link--active': isActive},
+ {'faux-navbar__link--inactive': !isActive},
{'faux-navbar--wide': !isMinimized},
{'faux-navbar--narrow': isMinimized}
);
@@ -33,7 +34,7 @@ const NavLink = ({link, active, isMinimized}) => {
let linkIcon = null;
if (link.icon) {
linkIcon = (
- <i className={classNames(
+ <i aria-hidden="true" className={classNames(
link.icon,
'fonticon faux-navbar__icon',
{'faux-navbar__icon-badge': link.badge})}>
@@ -42,7 +43,7 @@ const NavLink = ({link, active, isMinimized}) => {
}
return (
- <a className={linkClass} href={link.href} target={link.target ? '_blank' : null} data-bypass={link.target ? 'true' : null}>
+ <a aria-current={isActive ? "page" : null } aria-label={link.title} className={linkClass} href={link.href} target={link.target ? '_blank' : null} data-bypass={link.target ? 'true' : null}>
<div data-nav-name={link.title} className="faux-navbar__itemarea">
{linkIcon}
{linkTitle}
diff --git a/app/addons/fauxton/notifications/components/GlobalNotifications.js b/app/addons/fauxton/notifications/components/GlobalNotifications.js
index 5d63dd3..2a3d7ce 100644
--- a/app/addons/fauxton/notifications/components/GlobalNotifications.js
+++ b/app/addons/fauxton/notifications/components/GlobalNotifications.js
@@ -123,7 +123,7 @@ export default class GlobalNotifications extends React.Component {
render() {
return (
- <div id="global-notifications">
+ <div id="global-notifications" role="alert">
<TransitionMotion
styles={this.getStyles}
>
diff --git a/app/addons/fauxton/notifications/components/NotificationCenterPanel.js b/app/addons/fauxton/notifications/components/NotificationCenterPanel.js
index a89e7c2..85ca45a 100644
--- a/app/addons/fauxton/notifications/components/NotificationCenterPanel.js
+++ b/app/addons/fauxton/notifications/components/NotificationCenterPanel.js
@@ -103,10 +103,10 @@ export default class NotificationCenterPanel extends React.Component {
<header className="flex-layout flex-row">
<span className="fonticon fonticon-bell" />
<h1 className="flex-body">Notifications</h1>
- <button type="button" onClick={this.props.hideNotificationCenter}>×</button>
+ <button aria-label="Hide Notifications Center" type="button" onClick={this.props.hideNotificationCenter}>×</button>
</header>
- <ul className="notification-filter flex-layout flex-row">
+ <ul aria-label="Filters" className="notification-filter flex-layout flex-row">
<li className={filterClasses.all} title="All notifications" data-filter="all"
onClick={() => this.props.selectNotificationFilter('all')}>All</li>
<li className={filterClasses.success} title="Success notifications" data-filter="success"
diff --git a/app/addons/fauxton/notifications/components/NotificationPanelWithTransition.js b/app/addons/fauxton/notifications/components/NotificationPanelWithTransition.js
index e97f159..f744283 100644
--- a/app/addons/fauxton/notifications/components/NotificationPanelWithTransition.js
+++ b/app/addons/fauxton/notifications/components/NotificationPanelWithTransition.js
@@ -47,9 +47,9 @@ export default class NotificationPanelWithTransition extends React.Component {
{...this.props} />;
});
return (
- <span>
+ <aside aria-label="Notifications">
{panel}
- </span>
+ </aside>
);
};