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

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

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