BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved accessibility

Browse Source
This commit is contained in:
Joao Victor 2022-02-14 15:55:07 -03:00
parent 7768dba030
commit af0b1f3681
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
bbb-learning-dashboard/src/components/UserDetails/component.jsx
View File

@ -1,4 +1,4 @@
import React, { useContext } from 'react';
import React, { useContext, useEffect } from 'react';
import ReactDOM from 'react-dom';
import {
FormattedMessage, injectIntl,
@ -12,6 +12,12 @@ const UserDatailsComponent = (props) => {
isOpen, dispatch, user, dataJson,
} = props;
useEffect(() => {
window.addEventListener('keydown', (e) => {
if (e.code === 'Escape') dispatch({ type: 'closeModal' });
});
}, []);
if (!isOpen) return null;
const { createdOn, endedOn, polls } = dataJson;
@ -77,6 +83,7 @@ const UserDatailsComponent = (props) => {
<button
onClick={() => dispatch({ type: 'closeModal' })}
type="button"
aria-label="Close user details modal"
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />

11
bbb-learning-dashboard/src/components/UsersTable.jsx
View File

@ -232,7 +232,7 @@ class UsersTable extends React.Component {
.map((user) => {
const opacity = user.leftOn > 0 ? 'opacity-75' : '';
return (
<tr key={user} className="text-gray-700 cursor-pointer" onClick={() => this.openUserModal(user)}>
<tr key={user} className="text-gray-700">
<td className={`flex items-center px-4 py-3 col-text-left text-sm ${opacity}`}>
<div className="inline-block relative w-8 h-8 rounded-full">
<UserAvatar user={user} />
@ -243,9 +243,14 @@ class UsersTable extends React.Component {
</div>
&nbsp;&nbsp;&nbsp;
<div className="inline-block">
<p className="font-semibold truncate xl:max-w-sm max-w-xs">
<button
className="border-0 p-0 m-0 bg-none font-semibold truncate xl:max-w-sm max-w-xs cursor-pointer rounded-md focus:outline-none focus:ring ring-offset-0 focus:ring-gray-500 focus:ring-opacity-50"
type="button"
onClick={() => this.openUserModal(user)}
aria-label={`Open user details modal - ${user.name}`}
>
{user.name}
</p>
</button>
{ Object.values(user.intIds || {}).map((intId, index) => (
<>
<p className="text-xs text-gray-600 dark:text-gray-400">