From 7d7b187a39488590090130e61312547cbc4e1cb4 Mon Sep 17 00:00:00 2001 From: tidy-dev <75402236+tidy-dev@users.noreply.github.com> Date: Wed, 14 Aug 2024 12:04:01 -0400 Subject: [PATCH 1/2] Provide a titleID for our dialogs with custom headers --- app/src/ui/about/about.tsx | 4 ++- app/src/ui/dialog/dialog.tsx | 17 ++++++++++++- .../open-pull-request-dialog.tsx | 6 ++++- .../open-pull-request-header.tsx | 25 +++---------------- 4 files changed, 28 insertions(+), 24 deletions(-) diff --git a/app/src/ui/about/about.tsx b/app/src/ui/about/about.tsx index 07a93f0f7d3..204c64e5e26 100644 --- a/app/src/ui/about/about.tsx +++ b/app/src/ui/about/about.tsx @@ -322,10 +322,12 @@ export class About extends React.Component { ) const versionText = __DEV__ ? `Build ${version}` : `Version ${version}` + const titleId = 'Dialog_about' return ( @@ -339,7 +341,7 @@ export class About extends React.Component { height="64" /> -

{name}

+

About {name}

{versionText} ({this.props.applicationArchitecture}) diff --git a/app/src/ui/dialog/dialog.tsx b/app/src/ui/dialog/dialog.tsx index 350ecfcd8aa..b4760befa35 100644 --- a/app/src/ui/dialog/dialog.tsx +++ b/app/src/ui/dialog/dialog.tsx @@ -68,6 +68,16 @@ interface IDialogProps { */ readonly title?: string | JSX.Element + /** + * Typically, a titleId is automatically generated based on the title + * attribute if it is a string. If it is not provided, we must assume the + * responsibility of providing a titleID that is used as the id of the h1 in + * the custom header and used in the aria attributes in this dialog component. + * By providing this titleID, the state.titleID will be set to this value and + * used in the aria attributes. + * */ + readonly titleId?: string + /** * An optional element to render to the right of the dialog title. * This can be used to render additional controls that don't belong to the @@ -268,7 +278,7 @@ export class Dialog extends React.Component { public constructor(props: DialogProps) { super(props) - this.state = { isAppearing: true } + this.state = { isAppearing: true, titleId: this.props.titleId } // Observe size changes and let codemirror know // when it needs to refresh. @@ -346,6 +356,11 @@ export class Dialog extends React.Component { } private updateTitleId() { + if (this.props.titleId) { + // Using the one provided that is used in a custom header + return + } + if (this.state.titleId) { releaseUniqueId(this.state.titleId) this.setState({ titleId: undefined }) diff --git a/app/src/ui/open-pull-request/open-pull-request-dialog.tsx b/app/src/ui/open-pull-request/open-pull-request-dialog.tsx index a07b96a8cab..73d32d19507 100644 --- a/app/src/ui/open-pull-request/open-pull-request-dialog.tsx +++ b/app/src/ui/open-pull-request/open-pull-request-dialog.tsx @@ -9,7 +9,10 @@ import { Dispatcher } from '../dispatcher' import { Ref } from '../lib/ref' import { Octicon } from '../octicons' import * as octicons from '../octicons/octicons.generated' -import { OpenPullRequestDialogHeader } from './open-pull-request-header' +import { + OpenPullRequestDialogHeader, + OpenPullRequestDialogId, +} from './open-pull-request-header' import { PullRequestFilesChanged } from './pull-request-files-changed' import { PullRequestMergeStatus } from './pull-request-merge-status' import { ComputedAction } from '../../models/computed-action' @@ -274,6 +277,7 @@ export class OpenPullRequestDialog extends React.Component void } -interface IOpenPullRequestDialogHeaderState { - /** - * An id for the h1 element that contains the title of this dialog. Used to - * aid in accessibility by allowing the h1 to be referenced in an - * aria-labeledby/aria-describedby attributed. Undefined if the dialog does - * not have a title or the component has not yet been mounted. - */ - readonly titleId: string -} - /** * A header component for the open pull request dialog. Made to house the * base branch dropdown and merge details common to all pull request views. */ -export class OpenPullRequestDialogHeader extends React.Component< - IOpenPullRequestDialogHeaderProps, - IOpenPullRequestDialogHeaderState -> { +export class OpenPullRequestDialogHeader extends React.Component { public constructor(props: IOpenPullRequestDialogHeaderProps) { super(props) - this.state = { titleId: createUniqueId(`Dialog_Open_Pull_Request`) } - } - - public componentWillUnmount() { - releaseUniqueId(this.state.titleId) } public render() { @@ -90,7 +73,7 @@ export class OpenPullRequestDialogHeader extends React.Component< return (

From 0b3347c7c879d00454b8a67b7a56d57ff5273413 Mon Sep 17 00:00:00 2001 From: tidy-dev <75402236+tidy-dev@users.noreply.github.com> Date: Wed, 14 Aug 2024 14:11:07 -0400 Subject: [PATCH 2/2] Update _about.scss --- app/styles/ui/_about.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/styles/ui/_about.scss b/app/styles/ui/_about.scss index 3be68a590ef..e2c70d274ef 100644 --- a/app/styles/ui/_about.scss +++ b/app/styles/ui/_about.scss @@ -5,10 +5,14 @@ dialog#about { } p, - h2 { + h1 { text-align: center; } + h1 { + font-size: var(--font-size-md); + } + // The version, EULA link, and acknowledgements are conceptually two lines // in a paragraph but we don't have a great way of modelling that now // (and don't you say
) so we'll just kill off the bottom margin.