tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Accessibility: Move column extra buttons out of h1 column heading

Browse Source 
Port bcafd7d0c7c929f5e90fa1f64c881632a145f8b8 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion 2026-06-08 12:16:33 +02:00 committed by Claire
parent 4b24bc1c6d
commit dccb5e501d
2 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/javascript/flavours/glitch/components/column_header.tsx
View File

@ -152,7 +152,7 @@ export const ColumnHeader: React.FC<Props> = ({
active, active,
}); });
const buttonClassName = classNames('column-header', { const headingClassName = classNames('column-header', {
active, active,
}); });
@ -276,16 +276,14 @@ export const ColumnHeader: React.FC<Props> = ({
</> </>
); );
const HeadingElement = hasTitle ? 'h1' : 'div';
const component = ( const component = (
<div className={wrapperClassName}> <div className={wrapperClassName}>
<HeadingElement className={buttonClassName}> <div className={headingClassName}>
{hasTitle && ( {hasTitle && (
<> <h1 className='column-header__title-wrapper'>
{backButton} {backButton}
{onClick && ( {onClick ? (
<button <button
onClick={handleTitleClick} onClick={handleTitleClick}
className='column-header__title' className='column-header__title'
@ -294,8 +292,7 @@ export const ColumnHeader: React.FC<Props> = ({
> >
{titleContents} {titleContents}
</button> </button>
)} ) : (
{!onClick && (
<span <span
className='column-header__title' className='column-header__title'
tabIndex={-1} tabIndex={-1}
@ -304,7 +301,7 @@ export const ColumnHeader: React.FC<Props> = ({
{titleContents} {titleContents}
</span> </span>
)} )}
</> </h1>
)} )}
{!hasTitle && backButton} {!hasTitle && backButton}
@ -313,7 +310,7 @@ export const ColumnHeader: React.FC<Props> = ({
{extraButton} {extraButton}
{collapseButton} {collapseButton}
</div> </div>
</HeadingElement> </div>
<div <div
className={collapsibleClassName} className={collapsibleClassName}

6
app/javascript/flavours/glitch/styles/mastodon/components.scss
View File

@ -4727,9 +4727,14 @@ a.status-card {
z-index: 2; z-index: 2;
outline: 0; outline: 0;
&__title-wrapper {
flex-grow: 1;
}
&__title { &__title {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%;
gap: 5px; gap: 5px;
margin: 0; margin: 0;
border: 0; border: 0;
@ -4742,7 +4747,6 @@ a.status-card {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
flex: 1;
&:focus-visible { &:focus-visible {
outline: var(--outline-focus-default); outline: var(--outline-focus-default);