diff options
Diffstat (limited to 'packages/web-util/src')
| -rw-r--r-- | packages/web-util/src/components/Header.tsx | 13 |
1 files changed, 7 insertions, 6 deletions
diff --git a/packages/web-util/src/components/Header.tsx b/packages/web-util/src/components/Header.tsx index 0f50b8327..0b86418ec 100644 --- a/packages/web-util/src/components/Header.tsx +++ b/packages/web-util/src/components/Header.tsx @@ -12,7 +12,7 @@ export function Header({ title, iconLinkURL, sites, onLogout, children }: <div class="flex flex-row h-16 items-center "> <div class="flex px-2 justify-start"> <div class="flex-shrink-0 bg-white rounded-lg"> - <a href={iconLinkURL ?? "#"}> + <a href={iconLinkURL ?? "#"} name="logo"> <img class="h-8 w-auto" src={logo} @@ -30,12 +30,12 @@ export function Header({ title, iconLinkURL, sites, onLogout, children }: {sites.map((site) => { if (site.length !== 2) return; const [name, url] = site - return <a href={url} class="hidden sm:block text-white hover:bg-indigo-500 hover:bg-opacity-75 rounded-md py-2 px-3 text-sm font-medium">{name}</a> + return <a href={url} name={`site header ${name}`} class="hidden sm:block text-white hover:bg-indigo-500 hover:bg-opacity-75 rounded-md py-2 px-3 text-sm font-medium">{name}</a> })} </div> </div> <div class="flex justify-end"> - <button type="button" class="relative inline-flex items-center justify-center rounded-md bg-indigo-600 p-1 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600" aria-controls="mobile-menu" aria-expanded="false" + <button type="button" name="toggle sidebar" class="relative inline-flex items-center justify-center rounded-md bg-indigo-600 p-1 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600" aria-controls="mobile-menu" aria-expanded="false" onClick={(e) => { setOpen(!open) }}> @@ -50,7 +50,7 @@ export function Header({ title, iconLinkURL, sites, onLogout, children }: </header> {open && - <div class="relative z-10" aria-labelledby="slide-over-title" role="dialog" aria-modal="true" + <div class="relative z-10" name="sidebar overlay" aria-labelledby="slide-over-title" role="dialog" aria-modal="true" onClick={() => { setOpen(false) }}> @@ -70,7 +70,7 @@ export function Header({ title, iconLinkURL, sites, onLogout, children }: <i18n.Translate>Menu</i18n.Translate> </h2> <div class="ml-3 flex h-7 items-center"> - <button type="button" class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" + <button type="button" name="close sidebar" class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" onClick={(e) => { setOpen(false) }} @@ -93,6 +93,7 @@ export function Header({ title, iconLinkURL, sites, onLogout, children }: {onLogout ? <li> <a href="#" + name="logout" class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold" onClick={() => { onLogout(); @@ -120,7 +121,7 @@ export function Header({ title, iconLinkURL, sites, onLogout, children }: <ul role="list" class="space-y-1"> {sites.map(([name, url]) => { return <li> - <a href={url} target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"> + <a href={url} name={`site ${name}`} target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"> <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">></span> <span class="truncate">{name}</span> </a> |